<%
strTitle = "640 x 480 Isn't Dead Just Yet"
strMetaDescription = "Designing for any resolution in particular can be tough.  But should we cut any users?  And what are the reasons for not cutting out those users?  A list of reasons why addressing lower resolutions can have a higher overall impact."
strMetaKeywords = "640 480 screen resolution printing bookmarks design accessibility window size screen size monitor liquid type legibility readability"
%>

<% SUB Content %>
<p class="pull">
<a href="http://evolt.org" target="_new" title="evolt.org site"><img src="/adrian/images/evolt_logo.gif" height="50" width="134" alt="evolt.org"/></a>
This article was originally posted on <a href="http://evolt.org" target="_new" title="evolt.org site">evolt.org</a>, an online resource for web developers, maintained by web developers. I have granted evolt.org the right to use <a href="http://www.evolt.org/article/640_x_480_Isn_t_Dead_Just_Yet/22/275/index.html" target="_new" title="Link to original article on evolt.org">this article on their web site</a>, and they are the only entity with the right to reproduce it.
</p>

<p class="date">
July 19, 1999
</p>

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

<p>
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 640x480 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.
</p>

<h2>Readability</h2>

<p>
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.
</p>

<p>
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 &#8212; setting the fonts of your site to painfully small at
640x480 to get all your information on screen at 640x480. 
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 <em>occasional</em> 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.
</p>

<p>
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.
</p>

<ul>
<li><a href="http://www.useit.com/alertbox/9710a.html" target="_new" title="Alertbox article">How Users Read on the Web</a><span class="PrintOnly"> [http://www.useit.com/alertbox/9710a.html]</span>, October 1, 1997.</li>
<li><a href="http://www.useit.com/alertbox/9703b.html" target="_new" title="Alertbox article">Be Succinct! (Writing for the Web)</a><span class="PrintOnly"> [http://www.useit.com/alertbox/9703b.html]</span>, March 15, 1997.</li>
<li><a href="http://www.useit.com/alertbox/9712a.html" target="_new" title="Alertbox article">Changes in Web Usability Since 1994</a><span class="PrintOnly"> [http://www.useit.com/alertbox/9712a.html]</span>, December 1, 1997.</li>
</ul>

<h2>Images</h2>

<p>
If you are scaling your images up to take advantage of all
the space available in a larger-than-640x480 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.
</p>

<p>
Another interesting, though somewhat out-of-date with regard to future technology
trends, Jakob Nielson article is
<a href="http://www.useit.com/alertbox/9703a.html" target="_new" title="Alertbox article">The Need for Speed</a><span class="PrintOnly"> [http://www.useit.com/alertbox/9703a.html]</span> (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.
</p>

<h2>Printing</h2>

<p>
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.
</p>

<p>
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.
</p>

<h2>Design</h2>

<p>
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.
</p>

<h2>Compatibility</h2>

<p>
Some folks just don't know that the factory default of 640x480 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 640x480 world as well,
which with current trends, may not be that far off.
</p>

<h2>Statistics</h2>

<p>
You've made it this far, now here's some data to back up my arguments.  Let's take
the <a href="http://www.cc.gatech.edu/gvu/user_surveys/survey-1998-10/graphs/technology/q128.htm" title="GVU Monitor Resolution Results" target="_new">10th GVU WWW User Survey from October 1998</a><span class="PrintOnly"> [http://www.cc.gatech.edu/gvu/user_surveys/survey-1998-10/graphs/technology/q128.htm]</span>
(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:
</p>

<table class="data" cellpadding="0" cellspacing="0" border="0">
 <tr>
  <td>640x480</td>
  <td class="right">11.6%</td>
 </tr>
 <tr>
  <td>800x600:</td>
  <td class="right">30.7%</td>
 </tr>
 <tr>
  <td>1024x768:</td>
  <td class="right">27.7%</td>
 </tr>
 <tr>
  <td>1152x900:</td>
  <td class="right">4.2%</td>
 </tr>
 <tr>
  <td>1280x1024:</td>
  <td class="right">8.7%</td>
 </tr>
 <tr>
  <td>Other:</td>
  <td class="right">3.0%</td>
 </tr>
 <tr>
  <td>Don't Know:&nbsp;</td>
  <td class="right">14.0%</td>
 </tr>
</table>

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

<p>
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 640x480 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:
</p>

<table class="data" cellpadding="0" cellspacing="0" border="0">
 <tr>
  <td>&lt; 1 Year at 640x480:</td>
  <td class="right">17.9%</td>
  <td rowspan="2">} 24.6%</td>
 </tr>
 <tr>
  <td>&lt; 1 Year that don't know:</td>
  <td class="right">37.5%</td>
 </tr>
 <tr>
  <td>1-3 Years at 640x480:</td>
  <td class="right">13.7%</td>
  <td rowspan="2">} 16.5%</td>
 </tr>
 <tr>
  <td>1-3 Years that don't know:</td>
  <td class="right">20.3%</td>
 </tr>
 <tr>
  <td>&gt; 4 Years at 640x480:</td>
  <td class="right">9.6%</td>
  <td rowspan="2">} 10.3%</td>
 </tr>
 <tr>
  <td>&gt; 4 Years that don't know:</td>
  <td class="right">7.3%</td>
 </tr>
</table>

<p>
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.
</p>

<p>
Another place to grab some statistics is at
<a href="http://www.thecounter.com/stats/May/" title="TheCounter.com statistics" target="_new">TheCounter.com</a><span class="PrintOnly"> [http://www.thecounter.com/stats/May/]</span>,
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:
</p>

<table class="data" cellpadding="0" cellspacing="0" border="0">
 <tr>
  <td>800x600:</td>
  <td class="right">53%</td>
 </tr>
 <tr>
  <td>1024x768:</td>
  <td class="right">22%</td>
 </tr>
 <tr>
  <td>640x480:</td>
  <td class="right">15%</td>
 </tr>
 <tr>
  <td>Unknown:</td>
  <td class="right">2%</td>
 </tr>
 <tr>
  <td>1152x864:</td>
  <td class="right">2%</td>
 </tr>
 <tr>
  <td>1280x1024:</td>
  <td class="right">2%</td>
 </tr>
 <tr>
  <td>1600x1200:</td>
  <td class="right">0%</td>
 </tr>
</table>


<p>
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.
</p>

<h2>Anecdotal</h2>

<p>
Who here surfs at full screen anyway?
</p>
<% END SUB %>
<!--#include file ="../includes/template.asp"-->