Screen size versus browser size

Screen size versus browser size

There is a lot of discussion about what screen resolution (the physical number of pixels a monitor can display horizontally and vertically) should be targeted for designing a web site. Most people talk about either designing for 800x600, or 1024x768; a minority think that fluid designs–where a layout stretches to fill the amount of available space–is the way forward. The answer is more complicated and less clear-cut than it at first might appear.

Usability guru Jakob Nielsen provides three clear guidelines:

  • Optimize for 1024x768, which is currently the most widely used screen size.
  • Do not design solely for a specific monitor size because screen sizes vary among users. Window size variability is even greater, since users don't always maximize their browsers (especially if they have large screens).
  • Use a liquid layout that stretches to the current user's window size (that is, avoid frozen layouts that are always the same size).

I’m not sure that I agree with his recommendations though. His guidelines overlook a few key facts.

Firstly, I’d like to clarify how widely screen size actually varies: between around 200 pixels on some older mobiles with smaller screens (like my Nokia 5500) to 2560 pixels wide for the fancy Apple 30” HD display Jon, our creative director, keeps dreaming about. Now, that’s quite a difference. I can fit more than 12 of my Nokias next to each other on Jon’s dream screen.

Secondly, it’s actually not that helpful to look at screen resolution (how many pixels your monitor can display) when you want to know how many pixels can comfortably fit in a browser window. The operating system typically takes up some pixels (the bar at the bottom of your screen if you are on Windows), as does the browser itself (called the browser chrome). Of course the browser chrome varies from browser to browser, and from person to person (many people customize their browser chrome). And that’s not even taking into account the fact that not everybody maximises their browser.

The point I’m trying to make here is that as Jesper Rønn-Jensen suggests, really we should be looking at the available space within a browser window (also called the viewport) and forget about screen resolution. The problem here is that there isn’t all that much viewport data available.

That is until Thomas Baekdal did a comprehensive review. While we can’t say the sites he did his research on are a valid statistical set, it is much better than having nothing. More about his findings later.

Thirdly, I’m just not convinced that a liquid layout is the way to go. There are very clear guidelines as to what makes text most legible (between 52 and 78 characters per line). Working with a liquid layout that has to work to anything near the range as outlined above is throwing the baby out with the bathwater. I’d rather have a site with a bit too much whitespace than one that I have difficulties reading.

So what did Thomas Baekdal find from his study?

  • People mostly maximize their browser.
  • The bigger the screen, the more likely people are to not have their browser maximized. A significant drop-off occurs somewhere around a width of 1440 pixels.
  • Even on bigger screens, people always use the maximum available height.
  • The most common screen size is indeed 1024 x 768, with 800 x 600 down to about 5% for the site he ran his analysis on.
  • Translated into viewport size, Baekdal advises that if you want to support 95% of viewports, you have to design for 776 x 424 (which ignores the needs of mobile users).

This is, of course, because most websites are in reality quite tall and not very wide. Or a portrait design on a landscape medium. Pretty silly, really. One solution is to have your monitor rotated 90 degrees, like the one I’m typing this on. Anyway, back to the topic at hand.

Something else to note in this discussion is that the needs of widescreen users are different from those using conventional ratio screens. With a trend towards more and more widescreen, Patrick McNeil predicted a comeback of horizontal scrolling at the Future of Web Design. I’m not so sure myself.

So, what’s the solution then? There are a number of options:

  • Ignore these findings: keep on doing what we’ve been doing all along and design for the average viewport in a maximized browser on a 1024 x 768 monitor. Live with the fact that for some visitors there will be loads of whitespace if they have their browser maximized, and that others will have to scroll horizontally if they want to see the full width of the site. Mobile visitors don’t get a nice experience at all
  • Provide a dedicated mobile site, like we’ve done for Bristol International Airport. Companies like Facebook and Google even provide dedicated optimized applications for devices like the Blackberry and Apple’s iPhone.
  • The liquid layout: not really an option, for reasons of legibility across different widths as described earlier.
  • The adaptive layout: this is an interesting technique discussed on A list Apart, which effectively changes the layout depending on what viewport size the website is being displayed on. The article shows a good example with screenshots. In theory this looks like the perfect solution, however it’s tricky and laborious.

Personally, I think it comes down to the website and its target audience. It doesn’t make sense for every website to have a dedicated mobile equivalent. And if there is one, it should not necessarily replicate all the content of the main site–it should just provide simple, immediate access to the information people need most.

The first option isn’t actually as bad as it sounds. A lot of mobile devices have adopted the Opera Mini philosophy, where you can dip in and out of ‘overview mode’–a zoomed out view of the page–and ‘reading mode’ where you dip into the content to actually read it. Not as good a dedicated site, but better than a whole lot of scrolling in two dimensions.

The one thing you shouldn’t do is actively exclude people. Of course approaching building web sites in a web standards way means all the building blocks are there, and we do everything possible to give everybody the best possible experience by default, short of providing dedicated mobile sites or dedicated styles for different viewport sizes.

By maintaining your focus on inclusion, not exclusion, your site will still be readable by a very wide audience.

Posted 02 May 2008 by Iwein Dekoninck