Web design 101: What the audience seesTeaching Online Journ

Web design 101: What the audience seesTeaching Online Journalism
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:

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:

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:

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.

Author: Mindy
Read more...