Web design 101: What the audience sees

A colleague from another university recently polled a Listserv about how students should test their online page designs. Here are some concrete data from this blog, from the FeedBurner statistics from Aug. 1-30, 2007.

First, the common screen resolutions used by real people:

FeedBurner chart: Screen resolutions

You can see that although the screen resolutions larger than 1024 x 768 add up to more people (4,512 vs. 3,524), the single most common resolution in use (among people who read this blog, that is) is 1024 x 768. You can also see that the number of people viewing the site at the old standard, 800 x 600, is quite small.

Conclusion: It is sensible to design this blog to look good at a resolution of 1024 x 768, and to test it at some higher resolutions to make sure it doesn’t become unusable.

We must also consider which Web browsers the people are using:

Percentage of people using each browser

You can see that although IE 7 is gaining, IE 6 cannot be ignored. Given that the two IE browsers have some very visible differences in the way they handle CSS (most notably, margins), you must test your pages in both of these (get the multiple IE version installer). As for anyone who tells you it’s okay NOT to test in Firefox — obviously, you can’t believe anything that ignoramus says about Web design today, can you? (Note: Firefox 1.5 has been superseded by Firefox 2.0.)

Conclusions: Web pages must be tested in at least three browsers: Firefox, IE 6 and IE 7. Pages for this blog should also be tested in Safari, although that may not hold true for all sites (see below).

Now let’s consider the operating system:

FeedBurner chart: Operating systems

You can see that visitors to this blog stack up counter to the common wisdom about Mac vs. Windows. Financial analysts say the installed base for Mac OS X is 22 million people (March 2007). Microsoft says the installed base for Windows (all versions, no matter how old) will reach 1 billion in the next year (July 2007). But among visitors to this blog, there are 7,268 on Windows and 3,595 on Mac OS — a 2:1 ratio. If one-third of my readers are using a Mac, then I had better test my pages on the Mac OS.

Conclusion: Every site must be thoroughly tested on Windows, even if pages are designed on a Mac. While many sites might not warrant testing on a Mac (if designed on Windows), some sites — such as this one — have a significant number of Mac-based visitors.

You’ve got to look at your site statistics to determine the best practice for testing your pages on multiple platforms. You also need to be aware that Internet use is continuously changing. Not that long ago, IE was the dominant browser by a wide margin. But today, anyone who says “Most people use IE” is way behind the times!

So how should students (and professionals) test their online page designs? The first step is to ignore what might be written in a book or on some Web site. The second step is either to go straight to your own server logs — or, in the classroom, to use general stats that are up-to-date (see, for example, W3schools’ OS Statistics, Browser Statistics and Display Statistics). Third, use what you find in the stats to determine what you must do to ensure that your site’s visitors are seeing what you want them to see — and not an unusable mess.

Note that Eric Meyer (a great guru of CSS) says generic browser stats are worse than useless — you need to look at YOUR OWN site’s stats to make intelligent choices about testing and accommodation for design.

Update (Sept. 4): As a rule of thumb, I recommend that the opening page of a site be designed to look good within these dimensions: 1,000 pixels (width) by 550 pixels (height). See an example.

9 Comments on “Web design 101: What the audience sees

  1. Interesting that you used Feedburner stats for this. Wouldn’t that just show you the subset of viewers who came in via the feed (which may be a majority in your case)? Do they differ from your sitemeter stats? Are the graphs just easier to copy for this purpose? I’m a big fan of Google Analytics for this stuff, as you know, but I use several such tools in various places. Do we cover using/interpreting this stuff in any classes? Or is that too geeky?

    I’m just too full of questions this morning.

  2. 1. The graphics for FeedBurner stats are nice-looking.

    2. I have more than 900 FeedBurner visitors a day, compared with about 300 on Site Meter.

    3. I like Google Analytics very much! But I didn’t look at their charts for this.

    I thought the FeedBurner charts illustrated well the three factors I wanted to discuss.

    Mainly, I wanted to get across the point that it’s easy to PROVE that people are looking at your site in a lot of different configurations (my students sometimes seem reluctant to believe that); therefore, you MUST test in different configurations!

  3. I have no data on this at all, but even with big screens, I wonder whether “preferred browser-window size” isn’t still somewhere in the 750-1000 range.

    Personal-habits bias: Even on an iBook, I often have a text-editor open or a second browser window overlapping enough to click back and forth. Maybe it’s because my first computer was an Osborne with a five-inch screen.

    Also… Designers tend to get the coolest big monitors and I suspect your readership is skewed in that direction. Any similar stats for a less design-oriented page — maybe a local news site or university home page?

  4. I’ll share some numbers from Google Analytics for the past month on the UF J-School site:
    1024×768 – 40.87%
    1280×800 – 19.34%
    1280×1024 – 14.19%
    800×600 – 4.84%
    1440×900 – 4.72%

  5. Thanks, Craig. And note that we do NOT expect all 1280-and-up users to “maximize” their Web browser.

    I do expect most 1024 users to maximize, because otherwise, a LOT of sites are cut off on the right-hand edge.

    And a final note: You might find a lot of 800 x 600 users in some countries outside North America. You might find that government and school users in some countries are still using 800 x 600. So make sure you check your own server logs.

  6. Pingback: Teaching Online Journalism » Multimedia packages: Music journalism

  7. Pingback: How the audience sees your Web site « J-Scranton

  8. Pingback: Teaching Online Journalism » Multimedia package: Fat kids

  9. Pingback: Web design: Catching up from Thursday « Journalists’ Toolkit

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.