- create, update your website today - the online professional site - create, update your website today - the online professional site builder
UK hosted managed web design and ecommerce sitebuilder service

Web Design Width and Web Screen Size

Why do most of your websites have fixed width designs aimed at 800 pixel wide screens? Or to put it another way, when we were recently asked this question...

"One main thing that I did not see on any of your other clients web site's is the use of a fluid width layout. I have a widescreen monitor 1680x1050 and I'm not keen on looking at 6 inches of blank or plain coloured screen either side of the main site in the middle. Do you do full width layouts please ?"

Whilst full width layouts are possible, we normally do not encourage our clients to use these, for a number of reasons including:

1. Not everyone has 1680x1050 monitors, you should be designing for what monitors your website customers have, not what you have, the common size is still 1024x768.

2. Not everyone with large monitors view their browser windows full screen, some have large monitors so they can open multiple smaller windows, after all you are paying Microsoft good money to have this Windows feature, and you are paying your hardware supplier good money for the extra flexibility a larger screen provides. Studies have shown that not all users have their browser maximised, and as screen sizes get bigger, people are more likely to display their browser in a window so that they can see other windows and other parts of the desktop.

3. Websites which stretch to full-widths on wide screen monitors can have areas of text that are difficult to read, e.g. very wide lines with 30, 40 or more words to a line. It is more difficult to read wide lined text because the eye has further to move from the end of one line on the right to the beginning of the next line on left. That's why newspapers have columns.

4. Fluid designs which stretch to full width can look very odd on very wide screen monitors, especially if there isn't much content, you end up with a very short and very fat web page design.

5. Contrary to popular belief, not all monitors used for browsing the web are getting bigger. More and more mobile devices now have desktop browsing capabilities, e.g. Apple iPhone, Apple iPod Touch, and these have small screens.

iPod Touch Safari browser displaying the website
(iPod Touch Safari browser displaying the website)

2008 is also the year when ultra-mobile and ultra-cheap laptops start hitting the market, with Linux based devices such as the 250 Asus Eee PC (800x480), the 99 Elonex One laptop (800x480).

Asus Eeee PC
(Asus Eee PC's Linux Firefox browser displaying the website)

2009 is the year when 99 Smartbooks entered the market, ARM powered laptops bridging the gap between smartphones and netbooks, like the 99 CnMBook from Maplin (800x400).

CnMBook with 800 width (400 height)
(CnMBook Win CE5.0 IE6 browser displaying the website)

The Nintendo Wii is another example of a mass-market device with desktop web browsing features within a standard TV resolution.

6. Since the default for most DIY online shop systems, including open source ecommerce systems, is a fluid design, we try to avoid this because there is the risk that our client's sites are then perceived in the same way as every other online shopping site some school kid has created in their bedroom. We have also made many other changes to distance our shops from the typical default osCommerce shops you see on the web.

7. Fluid design can still end up with a lot of wasted space on wide screens, it is just that the wasted space moves from the edges to inside the web design. This is especially true with online shops, where there might not be so much textual content.

8. It is difficult to guarantee that fluid designs which stretch to the browser window size will look good at any browser window size, and it is more difficult to create branding graphics that look good in this way too. Fluid designs require much more testing at various browser window sizes, not just the maximised window sizes on the higher resolution monitors, but also the in-between browser window sizes when the browser is used in windowed mode.

9. osCommerce, and our custom version of osCommerce, is not fully fluid in design. For instance if a category's products are displayed 3 to a row, they wont magically be displayed 4 or 5 to a row if the browser window is stretched providing more space.

10. Fluid design doesn't generally fit in well with our design goal of 'less is more', something we have followed with our simplification of the osCommerce system. Fluid designs are sometimes better suited to a 'more is more' design goal (let's display as much as possible, and try to fill as much of the screen as possible). With a 'less is more' approach it is also easier to focus the eye on important marketing messages. If you take your current default 3 column osCommerce fluid design, there are 12 boxes in total on either side of the main content column, in our system there would be 2 columns and 3 boxes max, which makes for a very sparsely populated web design if it is displayed as a fluid design stretching the whole width. The osCommerce admin part of our system remains fluid since this helps with the admin side.

If there is a very good reason for a fluid layout then we can accommodate, but we like to make our clients aware of all of the issues before doing so. So far we only have one client with a fluid layout, a watercolour artist's gallery site, and even then we are monitoring this situation closely to see if a fixed width design might be better in the future. As for the blank left and right borders on either side of a fixed width design, it is possible to provide background images to fill the space on either side of a fixed width design.

Update 2010:
The built-in page scaling and zooming features that come as standard with many browsers nowadays, also muddies the water with some of these issues. These features are very important in some phone-based browsers for zooming out (making pages smaller), where phones have smaller screens, and these features are standard in some desktop browsers too (zoom out and make smaller if the page is wider than the browser width/screen width, zoom in and make bigger if the page is not as wide as the browser width/screen width). For example, if you are viewing this page using IE7 or IE8, and you press CTRL +, you can zoom in on this page, and make the page bigger if you wish to have your browser window maximised.

It is also important to note that with our sitebuilder service, your web design or layout is not set in stone up front. You can change your layouts in the future. We monitor the current browser market and situation, which is always changing, and if demand dictates different layouts in the future, then we will make those layouts available where possible.

This article is copyright 2008 - you do not have permission to reproduce, or cut or paste, this article onto any other website, forum or any other electronic or printed media.

Back to previous page - create, update your website today - the online professional sitebuilder

Tue 07 Dec 2021 web design | login © 2021