fbpx

Best Website Layout Models For Web Development in 202021 min read

[lmt-post-modified-info]
BEST WEBSITE LAYOUT MODELS FOR WEB DEVELOPMENT IN 2020
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on whatsapp
Share on email

Table of Contents

INTRODUCTION

One of the things that probably make a website beautiful is the website layout model it is using.

Web and web technologies have evolved over the years from simple, “boring” websites to more complex and really beautiful ones. The major difference between the old and new websites is in the layout of the pages. If the all nice images, colours and other aesthetic properties are removed from a website, all we have left is some unattractive piece of text.

One of the issues that come with the evolution of websites, especially for many young developers, is having their elements (such as images, text, divisions, etc.) displayed in the location they want them to be. This can be a serious challenge.

Thankfully, we now have a lot of solutions to these problems of rightly locating elements on our websites. We now have an array of website layouts models that web developers can choose from. These ensure that the content is nicely rendered in web browsers.

Another problem that arises is that of choosing from this wide range of available options. This article tends to shed more light on some of the website layout models popularly used in the design of websites.

I hope by the time you are through with this article; you will understand each website layout better and know when it is most appropriate to use each one of them.  So, fasten your seat belts as we go on this ride together. You are going to love it.

WHAT IS A WEBSITE LAYOUT?

In simple terms, website layout can be referred to as a method of arranging elements on a website. It is the way text, images and other elements of a website are set out on a page. It is also referred to as the framework of a website. Usually, a website has a header, list of menus, the content, footer and so on. All these are located in different corners of our webpages.

CSS (Cascading Style Sheets) has provided us with a lot of options to effectively create eye-catching and responsive websites using certain web layouts models such as the table, float, column, flexbox and grid models and so on. We will delve into them shortly.

WHY IS WEBSITE LAYOUT IMPORTANT?

  • A good website layout improves readability and the general appearance of the website. It makes your website eye-catching and appealing to users.
  • Having a nice website layout will help create a good and lasting impression in your first-time visitors.
  • A good website layout helps in keeping web users glued to your website because they find information faster and they are able to navigate through the website more easily.
  • Having a good website layout helps in user retention. People are more likely to visit your blog or website again because they enjoyed the previous visit(s).
  • A good website layout can increase sales, especially for online businesses.

TYPES OF WEBSITE LAYOUT

We have two types of website layouts; fixed-width and fluid. Let’s take a deeper look at them.

  1. FIXED-WIDTH WEBSITE LAYOUT: Fixed-width website layouts are those that use a specific unit of measurement to define web page widths. The containing wrapper is set not to move. So, no matter the screen resolution or viewport size, every visitor sees the same width on their respective devices. The most used unit for fixed-width website layout is the pixels(px).

There are advantages and disadvantages to using fixed-width website layout.

Some of the advantages include:

  • Fixed-width website layouts are easier to use and design.
  • Uniform width across browsers and devices.
  • The designer has more control of the appearance of the website.

Its disadvantages are:

  • Excessive white spaces may be created for users with larger screen resolutions making the webpage look less attractive and disturbing the overall balance of the web page.
  • For smaller screen resolutions or viewports, a horizontal scroll bar may be required.
  • Fixed-width layouts generally have a lower overall score when it comes to usability.

When using Fixed-width website layout, you need to consider certain statistical values as to screen resolution among users. This will help you choose a width that fits a large percentage of your users’ screens. The most common screen resolution is 1024 x 768px. Most designers use a width of either 960px or 760px. A width of 760px fits more screens than 960px.

For research on screen resolution, you can browse through

Another good practice while using fixed-width website layout is to center the layout so that on larger screens, the contents does not get pushed away in a corner. This helps to give balance to the website.

  • RELATIVE WIDTH WEBSITE LAYOUT: A relative layout refers to a layout that defines webpage width using some relative unit of measurement. In this case, the content in the page will resize according to the size of browser window or viewports users access it on. There are some other names for this layout; liquid, fluid, flexible layouts.

The common unit of measurement is percentage.

Just like the fixed width website layout, the relative layout also has its own pros and cons. Some of them are highlighted below:

Pros:

  • Liquid website layouts are flexible.
  • They can expand and contract according to the screen resolution or size of the viewport.
  • Fluid web pages are usually more user friendly as it adjusts to the device of each user uniquely.
  • A fluid layout can eliminate horizontal scroll bars in smaller screens if properly designed.

Cons:

  • The designer has a lesser control over what different user sees on their respective devices.
  • Certain fixes may be ignored by the developer if the website looks good on the developer’s screen resolution.
  • Fixed width elements like images must be carefully placed to avoid overlapping text.

Another website layout under the relative web layout is the elastic website layout. This is widely used and preferred. This is because it combines features of both the fixed width and fluid website layouts. The unit of measurement is the em and rem.

Consequently, it has more benefits than using either the percentage or pixel units of measurements. Despite the large number of advantages, the elastic layout will still need a lot of testing across devices to get the right layout for different screen resolutions.

Elastic and fluid layouts look similar in appearance and are often used interchangeably. The major difference however, is that elastic layout uses em’s while the fluid layout uses percentage values.

WHICH LAYOUT IS BEST FOR YOUR WEBSITE?

It will be wrong to declare one layout the best over others. As we have seen above, each website layout has its own pros and cons. The type of layout you choose for your website is greatly affected by the type of website you are building and how you want your elements to be rendered in web browsers. You will need to weight the pros and cons to come up with the best option for your website

However, I will give some suggestions below:

Fixed layouts are useful for designs that include multiple elements that must have perfect alignment on the page. For instance, you may have an image in one column that needs perfect alignment to text or another image in a different column.

Fixed layouts offer a greater measure of control, ensuring that all elements will display in the exact way you intended at the point of designing. When designing a portfolio website, a fixed width layout might be best. You will have better control on the individual elements, especially images.

Relative layouts using percentage is also great provided the sum of column widths does not exceed 100%. If it does exceed a 100%, then a horizontal scroll bar will appear and that can make browsing through the site less fun.

For websites with large audiences, accommodating even the small percentage of users with smaller screen resolution is very important and this can be well handled using fluid layout.

To enjoy the fused benefits of both fixed width and relative website layouts, the elastic layout is the best choice.

WEBSITE LAYOUT MODELS

Over the years, there has been a continuous change in website layouts, just the same way the web in general has continually changed. In this section, we are going to be considering some CSS layout models. I am going to be giving us brief insights into the worlds CSS layout models that are available to you. Some of these models includes; tables, positioning, floats, flexbox and grid layout models.

If you are still new to these concepts, do not be alarmed. I will try as much as possible to make it simple enough for you to understand. I will introduce you to the basics of each one of them and show you how and when to use them. Mind you, you will need a lot of practice to gain mastery of these concepts.

NORMAL FLOW

The layout of a web page starts with the normal flow of the page. A typical example of normal flow is your HTML without any CSS. In normal flow, boxes (I will be explaining the box model subsequently) are displayed one after the other, either vertically or horizontally, depending on the writing mode. If you write vertically, the boxes would be stacked horizontally on one another and if you write horizontally, the boxes will be stacked vertically.

The normal flow is the starting point of any other CSS layout. It is the basic website layout. Therefore, any other layout you implement means that you are taking elements out of their normal flow.

CSS BOX MODEL

All HTML elements can be considered as boxes when they are rendered in the browser. The CSS box model is a box that wraps around every HTML elements. One way to prove this is to set the border property to solid on all HTML elements. This way, you can see that all the content on the screen are enclosed in boxes. The box model is used in design and for layout. It comprises of the content, margin, padding and borders.

  • Content: this is where all the text, media and other elements in our body tag is displayed.
  • Padding: this creates an area around the content. It is transparent.
  • Border: like the name implies, is a border around the content and the padding. In other words, it is a line that marks the territory of each box. This line can either be set to hidden or visible, with some other styles applied.
  • Margin: clears an area outside the border. It is transparent.

These properties are used very often in web designing and website layout. You will be seeing them a lot and they are pretty easy to implement.

The lines of codes below show how to implement the box model layout.

div {
width: 500px;
border: 25px solid red;
margin: 15px;
padding: 20px;
}

You can read more about CSS box model at w3schools.com/css/css_boxmodel.asp

CSS TABLE LAYOUT MODEL

Initially, table was the only element that allows us to vertically align content (new techniques like flex and grid allows it too). Table layout property defines the algorithm to lay out table cells, rows and columns. The table layout is one of the oldest website layout models.

Tables come in handy for quickly displaying data in “table” without any block elements inside. They will do magic and automatically calculate required space for each column based on texts inside.

Tables are still in use, but not for the layout of a webpage. That’s really obsolete. One great use of CSS table layout is when you want to render some parts of your webpage as if it were a table.

There are certain values for the table property such as auto, fixed, initial and inherit.

The syntax is given below:

.table {
 table-layout: auto;
width: 500px;
}

Browser support for the table layout is pretty impressive as it is supported by all popular browsers. Though, recalculation of space differs between browsers.

CSS POSITIONING LAYOUT MODEL

This is another great way to remove elements from their normal flow. The position property has five different position values; static, relative, fixed, absolute and sticky. Elements can be further positioned using the top, bottom, left and right properties. For this to work however, the position property must first be set.

When changing the value of position, you will typically be also using offset values to move the box around from a particular reference point. The reference point used depends on the value of position you are using.

  1. STATIC POSITIONING:  Elements in normal flow has the position of static. Therefore, the default position of every HTML element is static. The top, bottom, left and right properties does not work on static positioned elements. The syntax is as follows:
.element{
position: static;
}
  • RELATIVE POSITIONING: If the position property is given a value of relative, then the element is taken from the normal flow. The initial position where the element would have been is however, still preserved in the normal flow of the web page and is now the reference point for the relative positioning.

The top, bottom, right or left property can then be used to move the element around. This movement is going to be relative to the element’s reference point. The syntax is given below:

<code>

.element {

position: relative;

right: 30px;

}

</code>

In the example above, the element (say a div or an image) is moved 30px to the right of where it should have been if the positioning property was not used at all. All the subsequent elements follow the normal flow of the webpage, except of course if you apply a positioning property to them also.

Relative positioning is used quite often and is also used alongside other website layout models. So, you might want to get a handle on it.

  • ABSOLUTE POSITIONING: An element with a position value of absolute will be completely taken out of the normal flow. The initial space where the document should have been is not reserved. The other elements behave as if it does not exist at all.

The reference point for positioning the element is going to be the parent element or the containing block. Now this parent element must also be positioned for the absolutely positioned element to reference it. A common practice is to give the parent element a position value of relative since that reserves the normal flow of the document.

If the absolutely positioned element has no positioned parent element or containing block, then the absolutely positioned element references the viewport.

Again, the top, bottom, right and left properties can be used in moving the element around. The syntax is given below:

<code>

. element {

position: absolute;

right: 30px;

top: 60px;

}

</code>

The element in the example above will be positioned at the top right corner of the containing block or the viewport as the case may be. Absolute positioning is also used quite often in website layout and is also used with other website layout models. So, you might want to pay close attention to it.

  • FIXED POSITIONING: Any element with the position value of fixed is usually positioned with reference to the viewport. The element is removed from the normal flow such that no space is left for it.

When the page is scrolled, the fixed element remains relative to the viewport while the other content scrolls with the page. This is very commonly used for headers. You need to be careful with setting the values right so that other elements on the page does not end up behind the fixed element. The syntax is as follows:

<code>

. element {

position: fixed;

right: 30px;

top: 60px;

}

</code>

To position a fixed element other than relative to the viewport, you need to have a containing element with either of the transform, perspective, or filter properties set to something other than their default value of none. In this case, that element will become the containing block and your fixed element will reference that block rather than the viewport.

  • STICKY POSITIONING: When an element has a position value of sticky, it maintains its normal flow for a while and scrolls with other elements normally. When it gets to a certain point, it sticks and assumes the position of fixed with the viewport as its reference point and then it stops scrolling with the other elements. At this point, it is removed from the normal flow of the web page. The syntax is:

<code>

.element {

position: sticky;

top: 0;

}

</code>

The CSS Positioning layout model is still very much in use today and with some practice, you will also be able to do a lot of cool stuff with them. Check here for further reading on CSS Positioning.

FLOATS

Floats are used to shift a box to the left or right, allowing content to display wrapped around it. There are four valid values for the float property; Left, Right, None and Inherit. Right and left floats as u can imagine shifts the box to the right and left respectively. None is the default value; it means no float. Inherit will assume the float value from that elements parent element. The syntax is:

<code>

.element {

float: right;

}

</code>

The float is primarily used to shift elements either to the left or right. It is more commonly used on images. However, it can also be used for web layouts.

Once you have floated an element, all of the following elements will wrap around that floated element until they wrap underneath and normal flow continues. If you want to prevent that, you need to clear the float.

Float and clear works hand in hand. There are several methods for clearing floats. Some of them are using empty divs or br tags, the overflow, the easy clearing method, etc. The empty div tags and br tags have been frowned at as semantically incorrect. The most ideal way might be the easy clearing method.  

This method works by adding CSS Generated Content and setting that to clear both. The syntax is given below:

<code>

.element:after { 

   content: “”; 

   visibility: hidden; 

   display: block;   

   clear: both;

}

</code>

Floats are also getting outdated gradually as a website layout model as they are being replaced with newer technologies like the flexbox and grid layout.

FLEXBOX LAYOUT MODEL

Flexible Box Layout (Flexbox) is a layout model designed majorly for one-dimensional layout. One-dimensional means that you wish to lay out your content in a row, or as a column. To turn your element into a flex layout, you use the display property with a value of flex.

To start using your flexbox model, you need to first define a flex container and then the flex items (to be placed in the containers).

          .flex-container{

                   display: flex;

          }

Flexbox is a powerful tool and probably the most popular web layout model. As at the time of writing this article, browser support for it is great. It is supported by all major browsers. Another great thing about flexbox is that it is responsive, if well coded. Flexbox focuses on content flow rather than content placement. The widths or heights of flex items are determined by the content of the item. Flex items grow and shrink according to their inner content and the available space.

The flex container properties include:

  • flex-direction
  • flex-wrap
  • justify-content
  • align-items
  • align-content

The flex items properties are:

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

These properties are whatyou use to determine how the flex box looks like and how it behaves.

A unit that is associated with flexbox model is the fr(fraction). It helps in making designs responsive and it eliminates unwanted white spaces

Flexbox is a wide topic and we will not cover its entirety within this scope. However, you can read more here. You can also try out this game that helps you practice flexbox.

Flexbox is a website layout model you can use to create a responsive one-dimensional website. Flexbox is a great choice when you have a number of things you want to stretch and compress in one-dimension. However, if you want to lay them out in rows and columns, you might want to try out the grid layout.

GRID LAYOUT MODEL.

The grid layout model is the latest technique of creating website layouts. It is pretty easy to learn and understand basic concepts. The grid layout model was designed to display items in two-dimensions, that is, in rows and columns. Just like the flexbox model earlier discussed, Grid Layout is a value of display.

     .element{

              display: grid;

          }

A grid layout consists of a parent element, with one or more child elements. After setting the display to grid, you would want to set the grid-template columns and grid-template-rows properties. The vertical lines of grid items are called columns while the horizontal lines of grid items are called rows. The spaces between each column/row are called gaps.

If you want to accurately control the position of elements within a layout, CSS Grid is the right choice to make. CSS Grid also makes it possible to create responsive layouts without using media queries. Grid can distribute space for you. You don’t need to calculate percentages to ensure things fit into a container.

The fr unit is also used in grid layouts, just like in flexbox. It also serves the function of making designs responsive and deals with the problem of white spaces that may occur with the use of px unit. The fr unit, when combined with the minmax () function can give us very similar behavior to the flex properties in flexbox while still enabling the creation of a layout in two dimensions.

Browser support for grid is also encouraging as all modern popular browsers supports the grid layout properties.

Just like in flexboxes, we will not be able to go deeper into grid layout. You can however read more here or learncssgrid.com.

FLEXBOX VS GRID LAYOUT        

This has been a debate for sometime now and several web designers and developers have aired their opinions. While some are of the opinion that flexbox is the best, other prefer to use the grid systems. It is therefore very difficult to choose one over the other due to this and many other factors.

It is however notable to point out that CSS Grid Layout focuses on content placement while CSS Flex Layout focuses more on content flow.

In my own opinion however, each model is unique in its own way and its uses. A really nice way to see both the flexbox and grid layout are as complementary layout models. You can always combine both the flex and grid layout models to design complex layouts.

You might be wondering… why not just use Bootstrap 4 for your layouts? Well, that’s also an option, but as a well-grounded developer, you do not just want to rely on some library. Bootstrap is good and makes design easy but it is good to also know the fundamentals of CSS designs. Besides, most of the new websites you see nowadays implement CSS Flexbox and Grid layouts.

CONCLUSION

This has really been a long ride into the depths of website layouts and I hope it was worth it. One of the things that will help you in either choosing your website layout type or website layout model is to understand the type of website you want to design and the layout you want to achieve.

Another thing you would want to keep in mind is trying to make your websites as responsive as possible. Except you have a good reason not to. There are a lot of mobile devices (mobile phones and tablets) accessing the internet today. And you definitely want to give them a long-lasting effect and an enjoyable experience also.

If you are a beginner, this might seem overwhelming at first, but they are really simple concepts to grasp. Click on the attached links and read more about them. Also, practice often till you gain mastery of all the concepts discussed above. Do not try to memorize all the syntaxes and properties. That will not be a very good use of your time. It is better to know what each model is capable of doing and you can always refer to online documentation like the W3School’s for help. With time, you become really familiar with them

oluwaseun Ogunlade

oluwaseun Ogunlade

Ogunlade Oluwaseun is currently a Computer Engineering student of the prestigious University of Ilorin. He is also a Front-End Web Developer and a tech enthusiast. As a hobby, he loves music, movies and football.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Business Empowerment Program

Join Our Business Empowerment Program

Get a website and more from #10,000 only.
Get started now!

Don’t forget to share on Social Media!

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on whatsapp
Share on email
Grow your skills

Hey dear, just Before You Leave!

Get Updates To Help You Grow.

We offer more than just services but teach people what we know to help them grow FOR FREE.

We promise not to spam!

Don’t Forget to check our blog/resources hub.