When it comes to designing websites, one of the early stages is to decide on a layout. Picking the wrong layout can be disastrous for the website. The layout needs to have enough space to display the relevant information, while maintaining the usability of the website. This is why I decided to blog about what layouts I mainly use and therefore my top 5.

5) 3 Column – 1 Header (+ Footer?) Fluid

3 Column 1 Header Fluid Layout

This layout allows for a large amount of content to be displayed on each page. Perfect for a website that has a lot to say about itself or advertise. The 2 outer columns have the same width (for example, 25%) and the central column accounts for the remaining percentage. This ensures that it fills the full screen of any resolution the website is viewed on. Great for a variety of users, ones with large screens and also small screens. The reason for me putting this layout so low down in the ranking is because it is fluid. I know users moan about having large screens and website designers not utilizing all the space. However, if the width is kept fixed, the look of the website is the same on all screens.

I hate going to a website and seeing the main column stretch all the screen and few lines of text there are stretch with it.

4) Single Column with Footer

Single Large Column Footer

This layout seems to be widely used for websites that have a gallery that needs to be splashed in front of the users eyes as soon as they hit the site. The size of the single column allows for high detail photographs and images to be displayed to the user. If there are not too many links for the website, maybe it is a single page website that is simply advertising a product, the footer can be used to contain links to smaller pages based around the website.

However, if there is a need for links, they can be hovered over the large images. The reason I put this one lower down in my rankings is due to the lack of usability. There is not much space for content and so designers may find it difficult to get great search engine results.

3) Single Column with Header

Single Column with Header

Very similar to the previous layout, this one replaces the footer with a header. The header can be used for a navigation bar. I am currently in the process of designin a website with a layout similar to this for a windows company. The large column is used to display a set of large photographs with text hovered over the top on a transparent gray background. I especially like this more than the previous due to the use of a header.

Although, this and the previous layout could be combined and the use of a footer and header would allow for important links and second order links.

2) 3 Column, fixed width with header

Fixed Width 3 Column Header

One of my personal favorites is the fixed width, 3 column layout. Similar to one of the previous layouts, this layout allows for a large amount of content to be displayed. However, unlike the earlier 3 column layout, this layout has a fixed width and so should look the same on all browsers.

If the width is chosen correctly, the layout will look great on all resolutions from 1280 to 1920. I would only use this layout though if I had a large amount of content to display. With a low amount of content, the layout would look bare and empty. This is what leads on to my number 1 layout.

1) 2 Column, fixed width with header

2 Columns, fixed width with header

This layout is my favorite out of the set I have listed in this article. It allows for important content to be displayed in the larger column and secondary information to be displayed in the smaller column.

Information that could be included in the larger column ranges from blog posts to site news to latest offers. The smaller column can be used for information that is not important but still relevant. For example, the top 10 blog entries, the most read articles etc. I have used this layout in most of my websites, as you can see from my portfolio and will always consider this layout first before any others.

I hope you find this article interesting. If you agree or disagree with me, please leave me some comments, I look forward to hearing what you think. Also, let me know what you think are some of the best layouts you have used.

Jack

Tweet This Post