A Guide To Choosing Your Website Width

By Amanda Vlahakis of Truly Ace Design

When having a website designed it's not uncommon for business owners to overlook the fact that websites do come in different sizes (widths) and what width you want for your own site is one important decision to be made before the design and build process commences.

There are two very simple differences when it comes to website widths; websites are generally either a fixed or expanding width within the visitors browser window. When you have your website design built in .html by a website developer (the person who builds a website using coding languages such as .html) before they start building it they will want to know which type of website you prefer - fixed or expanding width. It can be costly to change your mind later on...so be careful that you are making the right decision for your business and consider the pro's and con's carefully.

The Difference Between Fixed & 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 the two relates to means whether your web page stretches when the width of the browser window changes depending on who is viewing your website, 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 or screen resolution. Screen resolutions can come at 800x600, and 1024x768 for example.

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). You might have a better understanding of this since the million dollar homepage website phenomenon! This site is split up into advertising 'pixels'.

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

Often web developers building a fixed width website tend to create these at just under 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 to be avoided, as is well known to cause visitors to leave your website before it even has to a chance to sell its product and/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 Best?

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 Instead?

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.

More Advanced Options

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.

Decision Time

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 because I'm a creative designer, and most of the businesses I design for are very concerned about the visual appeal of their web site (they wouldn't be hiring me otherwise) and my choice has a lot to do with the ability to control the look and feel of the website in all browser sizes.

Amanda Vlahakis runs a graphic design company, Truly Ace, based in the Midlands