640 × 480 Isn’t Dead Just Yet

I've always kept a little list going of reasons why I still design for monitors and windows set to 640×480, and a list of reasons why I don't want to design for 640×480 anymore. My reasons for accommodating 640×480 users are still rock-steady in my mind, while the reasons against still don't cut it.

Compiled below is my list of reasons, with caveats, that I maintain for reference whenever I find that client who wants to design only for his or her monitor, forgetting about the wide variety of users out there. I should also qualify this by stating that the real problem with designing outside of the 640×480 box isn't really the 480 height, since most users are accustomed to scrolling down, but the width. Many people never notice the scrollbar on the bottom and those that do resent having to scroll left to right to left to right, etc, just to read your content or navigate your site.

Readability

If you need to use more than 600 pixels for a line of text, you need be aware of readability issues. Keeping lines of text around 30-70 characters offers the best readability for the widest variety of users. This holds true on the web as well as in print, where hundreds of years of printed text has taught professionals that very same lesson.

Go beyond that, and readability begins to suffer. Now, obviously many users may have their fonts set to varying sizes, but usually these different sizes still cause the viewable text to fall into the broad range of 30-70 characters. Avoid the opposite — setting the fonts of your site to painfully small at 640×480 to get all your information on screen at 640×480. This is about quality, not quantity. If you tailor your design so the smallest fonts a user will reasonably select get 70 characters per line, and the largest fonts they might select get 30 characters per line, you are right on target. And don't worry about throwing an occasional image into your content (resulting in, say, rows of 20 character-per-line copy), because that design element helps break up the content for the reader, giving their eye somewhere to rest. Keep in mind the reading styles of people on the web, and their desire to get to information quickly. Unless this broad swath of text is the actual content for which a user has searched, there is probably too much text.

Some readers may be familiar with Jakob Nielson and his Alertbox articles. Some readers may think he is full of it (after all, it's not like his own site is a poster boy for usability), but the articles cited below have been referenced time and again and have withstood more than 2 years of challenges. I think these three articles cover the usability issues I've pointed out above rather nicely in case you should want more detail.

Images

If you are scaling your images up to take advantage of all the space available in a larger-than-640×480 window, your images are most likely too large. Similar images of much smaller sizes, for smaller resolutions, are much smaller in file size as well. Larger images may be too much for a user to download, and may lead to serious congestion and problems displaying other images on the page.

Another interesting, though somewhat out-of-date with regard to future technology trends, Jakob Nielson article is The Need for Speed (March 1, 1997). It covers some of the issues you need to consider when you ask a user to download anything, including any and every page on your site. While not always true, generally when people are given more space in which to design, they will fill it up, abandoning white space for more imagery and copy. Restricting that space can help you create smaller and faster pages, resulting in a better user experience. If it is a special case, like detailed product specifications, give the user a thumbnail view, with the option to download a larger file of specified file size. Also, consider other data formats besides just imagery.

Printing

If your site is an information repository, or even if it is frequented by only a select group of customers, many people have a tendency to print pages out. Just look around your office at the stacks of articles printed from CNN. Whenever possible, people will print out the information to read in a more comfortable and natural fashion. Remember, how you use the site may not be the same way other people use it, so be careful assuming that since you don't need to print it, no one else would either.

A 600px site still fits rather nicely on an 8.5" sheet of paper in portrait. Consider a 72 pixels-per-inch monitor with a 640 pixel wide browser window full of text and images, with say 50 pixels allotted to white space, scrollbars, and window frames. When you do the math, you can see that 590 pixels at 72ppi comes out to 8.2 inches, assuring that the printout and the web site may be identical. Anything larger results in scaling or cropping of your pages, something you may not wish to have happen if it breaks your site identity or causes tables or images to span pages. This also means that, if your site is designed for it, you don't need to offer separate printable pages, which require a set of separate templates, database calls, or even a series of hard-coded HTML files.

Design

There are some basic statements I will make that, while they aren't fact by their very nature, they are still valid points, and ones I give out to clients and co-workers. You shouldn't need all that space. If you need a larger canvas just to fit your white space, then your design is too big. If you need a larger canvas just to show your content, your content is too big and you may need to scale it down. The information overload alone could render the site unusable without some spectacular interface design. Keep in mind people's attention spans on the web are short.

Compatibility

Some folks just don't know that the factory default of 640×480 can be switched, a default that still exists on many computers today, especially low-end business computers. At least you can ensure that those users can still use your site, that you haven't alienated any of them, or confused them by hiding content or navigation off the side of the page. While many users are starting to come online with palmtop computers, set-top boxes, and even surfing cell phones, you can be ready when the technology for those devices finally brings them in to the 640×480 world as well, which with current trends, may not be that far off.

Statistics

You've made it this far, now here's some data to back up my arguments. Let's take the 10th GVU WWW User Survey from October 1998 (the most recent one as of this writing). This is a sampling of web users and, in this specific case, their monitor resolutions. The numbers are as follow:

Screen Resolution % of Users
640×480 11.6%
800×600: 30.7%
1024×768: 27.7%
1152×900: 4.2%
1280×1024: 8.7%
Other: 3.0%
Don't Know: 14.0%

At what resolution shall we assume the Don't Know crowd is running? Let's apply the overall percentages for all other categories to the Don't Know crowd, giving us at least another 1% of users at 640×480. That means that 1 out of very 9 users is running at 640×480 resolution. If we went so far as to assume that the entire Don't Know crowd is running at 640×480, then we would be looking at 1 out of every 4 users at 640×480 resolution.

However, as I said, this is not a truly random sampling. This study is skewed by experienced users, as suggested by the fact that 37% of the respondents claimed to be on the internet for 4-6 years. So let's take a look at users at 640×480 and that don't know based on the number of years of experience they have on the internet, applying the same calculation as above to come up with a rough number:

Years on the Web and Screen Resolution % of Users Combined % of Users
< 1 Year at 640×480: 17.9% } 24.6%
< 1 Year that don't know: 37.5%
1-3 Years at 640×480: 13.7% } 16.5%
1-3 Years that don't know: 20.3%
> 4 Years at 640×480: 9.6% } 10.3%
> 4 Years that don't know: 7.3%

Now in what category do your users fall? The GVU survey also breaks the statistics down by 'Skill Level,' 'Age Group,' 'Gender,' and 'Location.' If you know your users are all experienced, veteran, male, American users, then perhaps this commentary isn't for you. However, for everyone else, this is a matter of know your audience.

Another place to grab some statistics is at TheCounter.com, a free tracking service for web sites. TheCounter.com gets its data by placing an image on a site, and tracking each browser that requests that image. For the month of June 1999 (Tue Jun 1 00:01:03 1999 – Wed Jun 30 23:59:01 1999), with 321,729,388 visitors, their statistics read like this:

Screen Resolution % of Users
800×600: 53%
1024×768: 22%
640×480: 15%
Unknown: 2%
1152×864: 2%
1280×1024: 2%
1600×1200: 0%

There are many other sources through which you may sift to find information, but these two should have given you a basic idea of what you will discover.

Anecdotal

Who here surfs at full screen anyway?

5 Comments

Reply

Surprisingly, this is still relevant after 19 years; as most handheld devices (even flagship smartphones with better than 400 pixels per inch) report their screen resolution as something close to 360×640 pixels. Even Jakob Neilsen’s “The Need For Speed” article is still timely, as anyone using a device with a patchy 3G connection will attest.

Brendon Green; . Permalink
In response to Brendon Green. Reply

Smart watches have pushed that floor even lower. WCAG 2.1 guidelines look at 320px as a minimum supported width without a page falling apart (Success Criterion 1.4.10: Reflow). I would not have predicted either of those 19 years ago.

Reply

Unfortunately, your print stylesheet (as referenced in this article) is currently broken; Firefox wants to use 362 pages (one for each day of the year) to print this article.

Brendon Green; . Permalink
Reply

Sorry, there’s nothing wrong with your stylesheet. I had printed a full-page screenshot of another site that failed to print correctly and, consequently, Firefox still had a 1000% zoom factor set in print properties.

Brendon Green; . Permalink
In response to Brendon Green. Reply

I just updated my print styles a couple weeks ago, so I was filled with panic for a moment.

Leave a Comment or Response

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>