Fixed vs Fluid Layout - A Critical Design Decision

Fixed Width Design

Fixed width designs have the key advantage that they are faithful tothe design on almost any screen resolution.  As a result, this is the preferred model for website templates and the majority of sites on the web.   They are also quite simple to implement into a content management system.

However fixed width do require a fair bit of skill to get the balance right.

It is a good idea to avoid white backgrounds with borders.  Centred design is best to avoid to much space on the right (or left) of the main content area.  Generally only a couple of columns can be used successfully without reducing the font size due to the limited screen space.

There are variations of fixed width designs.

Some designs go for a more vertically, scrolling orientation to offset the smaller width on larger screens.  The ALSO Foundation website (pictured below at 1024x768 resolution with a scrollbar) designed by Datalink achieves a fixed width by setting it centred against a patterned background.  The website scrolls vertically and the less important information goes toward the bottom of the page, making it useful for information rich websites and portals.  The site fills most of the screen on 800x600, still making it backward compatible with older screens.



The Alliance Financial Group website (pictured below viewed at 1024x768 resolution) is an example of a fixed width design centred on a white background used to achieve a stylistic look as well as to work with a range of screens.  It blends with the page, so that the size of the site is obscured and adds to the clean design technique using blank screen as whitespace.  The fixed width allows almost perfect placement of feature boxes around the design and it looks similar on all screens.  Notice how the emphasis is on the horizontal, so rarely do pages scroll or have information "below the fold".  This style is useful for marketing driven rather than information rich websites.  The site fills most of the screen on 800x600, still making it backward compatible with older screens.

Fluid Layout / Scalable Design

Fluid layouts can be quite both impressive and future proofed.  They fill the whole screen horizontally, so the CEO with his bigger screen will be happy and when he hands down his old screen in a few years it will look good to you to.  You can also resize the screen in real-time and all of the graphics and content will wrap and adjust.

While the idea is great, it does require special attention and need to be designed properly by someone who knows what they are doing.  This is because they need to not only define the scalable area, but also make sure that it is actually possible for the graphical elements to scale.

For example, I had one client who wanted a stylistic wave effect which went from one side of the screen to the other and for the design to scale to all resolutions.  However it simply was not possible, due to there being no point in the wave graphic to define a scalable point without ruining the graphic.  For this particular client I had to organise, at their cost, a proof of concept to illustrate the way they wanted it to work.  Suffice to say they went with our original recommendation in the end, which was to move away from the wave extending right across the screen and create a more flexible fluid design that looks good on any resolution.

Additionally, this sort of design is best done by separating styles.  This means no embedded styles.  Programs like Dreamweaver and Frontpage typically embed styles by default.  So typically the stylesheets and HTML need to be manually written for best effect.

It is generally a good idea to have a section of the design (imagine a column from top to bottom) that could be expanded horizontally to an infinite width. This will allow the design to take up the entire screen regardless of the user’s screen resolution.  An example of scalable points is shown in the image below.



With this design, the elements are either rectangular or blank to allow the site to scale so that the footer, header and content area can all fill the full available screen.   The graphics are split into sections, and typically a filler graphic is used to fill the gaps when the two sections move.  That doesn't mean you have to do a blocky design, it just means that you need to think about where your design scales and have something to fill the gaps created when it the two sections move.

The FastTrack website (pictured below) fills the entire screen at any resolution using whitespace separators.   The middle content space widens, content wraps and boxes expand, but retains a margin on either side.



With more attention to detail, more sophisticated scalable designs can be achieved.  The site you're viewing right now employs much more advanced scaling techniques.  Try dragging the bottom corner of your browser and you'll see exactly what I mean. 

In an ideal fluid layout, even viewed in a really tiny browser window (or a Pocket PC powered phone for example) the design should still cascade and "fall apart" gracefully rather than be all over the place. 

Summary

There you go.  There are advantages for both and the application depends on the site.  My personal preference is for fluid layouts designed for the main resolution at the moment which is 1024x768.  In the end though it is purely up to you and your personal preference.  But what is important is that you conceptually understand the differences, because it is difficult to preview when you're still in the design stage and much more difficult to "cut-up" your site again if you change your mind.

I'm interested in hearing your experiences with fixed width vs fluid.

Comments

There are no comments.

Name *


Comment *


Verification code *


Regenerate code