Fixed or expanding width website – which method of website layout is best for your business?

When it comes to designing and building your website there are many choices to be made and one important early choice that needs to be made at design stage should be whether the website should be fixed or expanding width within the browser window.

At Truly Ace we work with you to design the ‘front end’ of your website (that is the graphics, layout and navigation that make up how your website appears visually to it’s visitors) …this is often described as ‘front end web design’.

When you take that design to your website builder (called a website developer) to be built in .html, we want to know that we have created a design that will work well with the build that you have in mind – whether that is fixed or expanding.

I shall now explain what ‘fixed width’ and ‘expanding width’ means and some pros and cons of choosing each one.

One of the first questions you may be asked when working with a web developer/builder is, ‘do you want fixed or expanding width website?’ They may even have some advice for you with regards to this and you should be aware that expanding width is also sometimes referred to as ‘fluid width’.

Descriptions
The difference between fixed and expanding layout is quite simple, it means whether you web page stretches when the width of the browser window changes or whether is stays ‘fixed’ at a specific width and every single user sees your website at that width regardless of their own screen size.

Fixed websites have a certain number of pixels that determines the width of the site (without getting too technical, the web pages you see on your computer screen are made up of thousands of pixels in rows and columns).

An example of a fixed width website is the Guardian http://www.guardian.co.uk

Typically web developers building a fixed width website tend to create these at 800 pixels wide as research tells us that the majority of Internet visitors will have their screen resolution set at this width or larger, and thus not going larger than in pixel width this assures that no (or barely any) users will have to scroll horizontally to view your website.

Avoid Horizontal Scrolling
Horizontal scrolling is a big ‘no no’ in web site creation, and is well known to cause visitors to leave your website before it even has to a chance to sell it’s product or service to them.

Fluid (expanding width) websites are quite different; the width of these is determined by the resolution you have your monitor set at and how large your browser window is – the website width literally expands to fit the width of the visitors browser window, whatever that may be.

A good example of a fluid website is www.amazon.co.uk.

Is Fixed the way to go?
The great thing about fixed width sites is they look the same to every visitor, this allows you to retain a good amount of control about how your website appears to the world.

However, if you have visitors to your site who have their monitor or browser settings set up in a certain way then they may have to scroll across to read all the text (though this isn’t likely to become an issue if you stay inside of 800 pixels wide when the site is built).

Alternatively if their settings are larger than your website’s maximum width, the design can end up having huge empty margins on each side. These can however be filled with colour that match your website scheme, and even patterned backgrounds.

Should you expand?
The main advantage of using expanding (or fluid) width is that they will expand to any monitor size and are often perceived to be more usable and accessible as they change to accommodate the website visitor’s monitor and settings.

However; you end up with little control over the way your site looks to visitors and less control over the positioning of images (photos or graphics) within the site content. Depending on the size of monitor your visitors are using (i.e. big screen resolutions) they can end up with very long lines of text to read from left right. This has become more of an issue over time as screen sizes of the average user continue to grow.

The future?
Advances in web design and build have led to a third option – elastic. Elastic is a mixture of fixed and expanding width. It allows the user to stay in control but you set certain parameters such as a minimum and maximum width.

Deciding which is best for you
Choosing the right width for you depends on what you want your site to do and the elements that it may contain within it.

If you are going to have a website with lots of images that you want to stay in specific places then you should probably go with a fixed width layout.

If the text is most important then to avoid too much vertical scrolling an expanding (or even elastic) layout could be the best choice for you. Have a surf around the web and look at different sites and the layouts they use to see what might be the best fit for your business and what seems most usable for certain website types.

Personally I lean towards a fixed width web design of recent years, and that probably has a lot to do with the ability to control the look and feel of the website in all browser sizes.

What do you prefer?

This entry was posted on Monday, February 25th, 2008 at 1:01 pm and is filed under Thoughts on Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.