Full vs Fixed Width Website Design


There are two prevalent models of laying out a website, the full width layout and the fixed box layout.

Both layout designs have been around since the advent of web design, however the box layout became extremely popular and pushed the full width design into obscurity.

The full width layout is becoming popular again with the advent of HTML5 and CSS3. It is set up so the content of your page spans the whole width of your screen, whatever the size.

The reason that this design has risen in popularity again is because there are new techniques to make your site respond to the size of the device that’s viewing it, or to the size of your browser’s window.

Full width web design

The full width layout takes up the entire space on the page and it usually resizes itself to fit the size of the screen that the viewer is viewing it on. Rather than doing the layout with a grid based on set pixels, the grid is now designed based on proportions or percentages of the width of the screen.

The downfalls with full width layouts are that they don’t easily allow for a more structured design and use much more white space than the box layout. Full width designs are typically used for minimal content websites and ones where images are more important than text.

• Full width can provide a fully immersive web browsing experience.
• The boundaries between the more traditional ‘website’ and ‘visual experience’ are blurred.
• It’s a particularly useful layout for more photographic/video led websites.

• With no imposed maximum width, content can appear at the extremities of the screen, sometimes making hard work for the user to scan for all relevant information quickly.
• Site speed optimisation means that images can appear visibly compressed on larger screens.
• Image ratios dictate that the wider an image gets, the taller an image gets, thereby pushing your content further down the page due to the increased image height.

Fixed width web design

The box layout is much more conducive to a design where a highly structured layout is preferable. It allows the designer to constrain the canvas that they are working with, so that it looks exactly the same across all browsers and all devices.

It is therefore much easier to lay out a grid and place items on your web page without worrying about changing the layout to match many devices.

However, some designers don’t like the fact that you are not using the entire space on the page. Box layouts are usually prevalent in designs where retail products are being sold, or a lot of detailed information about a number of products needs to be displayed.

• The width of the overall site is no longer an unknown quantity.
• You can have greater certainty that your content will never exceed an imposed maximum width.
• There is more control when it comes to the compression of images.

• A fixed width layout can sometimes feel a little forced, and less organic.
• The page background will need to be a consideration, as areas where a max-width is applied will start to reveal background past a certain breakpoint.
Whichever direction, there are a couple of key points to keep in mind…

You should always look to apply maximum widths for blocks of copy, as this will prohibit line lengths from becoming too long and therefore difficult to read on large screens.

And if you are going to have large, full width images then its best to make sure you have compressed and optimised them sufficiently so as to avoid long load times and increased page weight.

At Intent Marketing, we create a wide variety of full screen, fixed width and also a mix of both styles. We specialise in designing the right website for your specific business need, and take the time to understand your business objectives, before proposing the right design for you.