There are so many things to consider when designing a website, but one of the most basic and yet fundamental ones, is what width your webpages should be, and whether they should be fixed or flexible. With different browsers (Chrome, Firefox etc – see my next posting for more on these) and platforms (Windows, Mac, Mobile), it is increasingly difficult to get the configuration right.
If the width is fixed and limited, users will be forced to scroll horizontally, which is far from ideal. As a comment I read on the sitepoint forum recently puts it, ‘a site that is wider than my screen is a major fail’. So what screen size resolutions are currently most in use?
- 1366×768 17.55%
- 1024×768 15.09%
- 1280×800 12.77%
- 1280×1024 7.42
- 1440×900 6.45%
- 1920×1080 5.21%
- 320×480 4.08%
- 1680×1050 3.84%
- 1600×900 3.50%
- 768×1024 2.80%
http://www.w3counter.com/globalstats.php (April 2012)
Fixed width or flexible?
A fixed width page has the great advantage that the layout will always remain as you intended. If you design a page for a 1024×768 resolution (until recently, the most common), then allowing for scroll bars and other browser space, it’s best to fix your page at a maximum of 960 pixels. The majority of sites do seem to have a fixed width, typically a little above 960 pixels. The disadvantage is that users with larger screens and higher resolutions will see a lot of unused space around the page, and the trend is for increased resolution sizes (e.g. 1366×768 recently overtook 1024×768 as the most common size). To compensate for this, you may wish to incorporate background padding into your design, to appear either side of your web pages. Some stick with a bland grey (the default on Chrome for example) though plain white is often a better option so as not to distract from the main content. Others use photos or textures to provide more of a setting for the page. It will depend on the site – for some it can be a visual enhancement. Many professional sports clubs have a backdrop of the stadium or the pitch to complement their main content. The backdrop is an integral part of the design.
Alternatively, you may opt for a liquid page design and instead of setting the width in pixels, opt for a percentage, typically 100% to fill the screen. This has the advantage that your page will automatically adjust to the width available – on the same forum suggested The disadvantage is that your page layout will also change and, at higher resolutions, your sentences may span a long way across the page, making them more difficult to read. If you go for a 100% page width, it is best currently to design the page for a 1024×760 resolution, so that its layout does not change too much at higher resolutions.
You may not want to opt for 100% though. Whereas the background with fixed pages is often to compensate for not filling up the screen, you may decide that this is a positive design feature, and fix the width at 90% or set a maximum width. This will also tackle the problem of sentences spanning too far across the page. Alternatively, if you go beyond 960 pixels or for a 100% width, design you site carefully so that the readability is not too badly affected and make sure you have a good balanced spread of content. Amazon, for example, will add extra content, for those with larger resolution screens.
I must admit, at this stage, I’m not sure what to go for. It might be because I keep switching from a small netbook to a large widescreen monitor which may be no bad thing. On the monitor, sentences on some sites do sprawl right across the page and it doesn’t look good. The same user on the sitepoint forum that I referred to earlier, thinks ‘fixed width is a cop-out for designers, putting their convenience over the needs of their visitors’. Initially I thought that way too and designed my first pilot sites with 100% width before dropping down to 90%. I’m currently designing two sites using fixed widths. However, if I was sure that’s what I wanted, I wouldn’t have researched and written this little piece. I still need to play around more!
Finally, notice that there is one small resolution size in the table above of 320×480. Whereas the trend has been towards bigger resolution sizes for desktop monitors, this size is a relative newcomer to the table above so no prizes for working out that it is the resolution size of many mobiles. There’s a bit of a buzz around ‘responsive web design’ to deal with this increasing variety, but that’s another story, and one I haven’t finished reading yet.