#1 Layout Design

Importance of the Layout

Hello Everyone, Welcome to my blog 🙏.
I hope you are all safe and that this blog finds you in good health ❤️.

Intro

The Layout is the arrangement of visual elements on a page and it is one of the essential things in designing a website.

Layout

Why is it so important?

👉 Visualisation — ease of view.
👉 It enables Accessibility.
👉 Responsiveness.

For example:
1. Which is the best way to show information that contains a list of users?

One thing that comes to my mind is the table format, so here table is the layout that suits our design.

And, there are many other ways where the layout is used for visualisation such as dashboards wherein we have charts along with legends to represent business data.

Hence, layout plays a prominent role in designing a website.

Accessibility

Accessibility is the ability to access the website by everyone irrespective of their disabilities.

How can layout enable accessibility?

Accessibility tools like voice assistant can work better if your layout design is perfect. Suppose you have used semantic HTML with proper naming conventions. It can identify which is a header, footer, etc., by which it can highlight the content to the user.

Responsiveness

In the modern world, responsiveness is essential for websites.
In simple terms, your website should be accessible on any device, either a computer or a mobile.
Layout plays a vital role in achieving this.
In CSS, we have plenty of ways like media queries, float, flex, grid, etc., that can help in the responsiveness of a website.

How can layout leverage responsiveness?

You want to place content at different positions on different devices. So, to handle it, we need to have a proper layout where you can use CSS properties to set it according to the screen without disturbing other elements.

for example:
There is a button to be placed,
1. at the rightmost for mobile resolution,
2. at the centre for web resolution

Such scenarios can be handled if we know the current layout structure and use appropriate styling, avoiding overlapping with other elements.

Implementation of Layout:

👉 By default, HTML follows a normal flow which follows as per source code.

👉 Floating technique — Floating an element changes the behaviour of that element and the block-level elements that follow it in normal flow.

float: left/right/none/inherit

👉 Positioning Technique — Positioning allows you to move an element from one place to another, with reference to its parent.

position: relative/absolute/static/sticky/fixed

👉 Displaying Technique — This is a widely used technique for the layout. As you all know we have a display property provided in CSS. So, this technique revolves around this property.

For Table layout — display: table
For Flex — display: flex
For Grid — display: grid

Note: we also use the display for specifying block and inline elements also.

Short Intro for FLEX & GRID

Both Flex and Grid are widely used in modern-day websites and more-over many libraries use them internally for creating outstanding component designs.

Flex is suitable for Single dimensional content which is either row or column and works on Content First. It deals horizontally by default i.e. row
Grid is suitable for Two-dimensional content and works as per Layout hence, Layout First.

We would dive deep into each of these types in our next blogs which are on the way….
Stay tuned for the next blogs.

This blog intended to state the importance of the Layout. for more reference
CSS tricks, flexbox MDN, CSS layout

Here we go, That’s it folks for this blog. Hope everyone liked it.
If you like it, give it a clap 👏 ,
and share it with your friend.

For more exciting content on Frontend, Please do follow me 🎯.

Thanks a lot, Everyone 🙏.

Until Next time,
Happy Learning ✍️

Abhishek Kovuri, UI developer

#TWBloggersClub