It's hard to get a handle on what the majority of users have
their resolutions set at. There are statistics sites, server
stats and polls -- most of these report that 800 x 600 is the
resolution that people are using. Then again, others report
that 1024 x 768 is the most popular resolution. As a designer,
do you create a site using the maximum space available to you,
or do you create something that looks pleasing to users of all
resolutions?
It's important to keep in mind that just because people have
hardware that supports hi-res imaging doesn't also mean they
are going to have the device set high. Elderly users may have
20" monitors that are set at 640 x 480 because they have
trouble reading the text at higher resolutions. I have a 19"
monitor which will support a maximum of 1280 x 1024. Most of
the time when I'm designing a site, I have it set at 800 x 600
simply because I know this is what most of my audience is using.
It always makes me shake my head when I'm surfing at 800 x
600 and come across a website with a scrollbar running horizontally
at the bottom of the screen. It's a common mistake made by new
web developers who either feel the world is using the same (higher)
resolution that they are, don't know there's a difference between
screen resolutions, or worst of all, simply don't care. I've
also fielded calls from clients who looked at their website
on someone else's computer, then panicked that something was
"wrong" because it displayed differently.
Before we go any further, let's look at the differences between
resolutions for this site.
With this site, we wanted to take advantage of using more of
the screen area -- our job was making sure that while the people
with larger screens may see more screen area, people surfing
at 640 x 480 and with WebTV, a resolution of just 544 x 372,
would be able to see everything they needed to see -- in other
words, the site needed to degrade gracefully.
Site
at 800 x 600: At 800 x 600, users see the site as it
was designed. The site fills the entire width of the screen
with no whitespace.
The
same site at 640 x 480: At 640 x 480, the site is still
usable. While some of the graphics to the right aren't visible
without scrolling, Everything necessary to navigating the site
is provided in the area of the screen that the users can see.
The
same site at 1024 x 768: At 1024 x 768, the user is
seeing even more of the vertical area of the site on the screen
at the same time. At this resolution, there is a white area
on each side that content never appears in. This was a choice
on our part, as we were optimizing the site for 800 x 600 and
did not want users at what is still considered a "common"
resolution to have to deal with a horizontal scroll bar if content
was put in the white area.
At 544 x 372, it's worth considering what WebTV users will
see. WebTV (now also known as MSN TV) is interesting in that
it will compress the screen to fit within a width of 544 pixels,
and if elements don't fit, often they just aren't shown at all.
Also note that an enlarged text size will appear with WebTV
-- no matter what size text you specify, WebTV will override
it with their default.
Do I design for 1024 x 768? Yes and no. If a client specifically
requests it, we do -- but I never put any information in the
far right area that is crucial to navigating the site. If they
do not specify, we design to 800 x 600.
Nobody likes the dreaded horizontal scrollbar. Even more importantly,
most of them are not going to scroll over to the right to see
what it is you've hidden over there. If you are going to design
for any resolution higher than 640 x 480, keep this in mind.
Additionally, nobody wants to be told how large their screen
should be. "Best viewed at 1024 x 768" is just a euphemism
for "I was too lazy to consider how all of my audience
might view the site and designed it for my monitor." I
assure you, no users are going to change their screen resolution
just for you. Most of them don't know how, don't want to, or
don't even know what that terminology means.
Another scenario which more people are taking advantage of
is multiple browser windows. Both Netscaoe and Opera allow several
windows tiled within the main browser window. Internet Explorer
and Netscape both feature a sidebar on the left side of the
screen that will eat into available screen area if the user
has it on.
I saw a website recently which had all of the content right-justified,
and the developer appeared to have built the site at 1280 x
1024. Even at 800 x 600, I had to scroll almost two screens
to the right to see any content! The site had a messageboard,
and users were being very vocal about the poor design. The developer
was responding vehemently to their posts, clinging tight to
his notion that what he had done was "an artistic effect."
No, it wasn't. The users recognized this -- why didn't the developer?
So many developers fail to look at their own work the way a
user will, or better yet, sit down with some users and get their
opinions on the site -- their honest opinions.
Besides, the web isn't entirely about art. It's about presenting
information in a way that can be seen and utilized by the majority
of your users. If it happens to be presented attractively on
top of that, you've done very well.
Summary:
* Consider all screen resolutions when designing your sites,
not just the one you happen to use.
* Sites that take advantage of extra screen space must degrade
gracefully for users with lower resolution.
* Above all else, usability of your content should be your main
focus.
Webmaster's Corner is written biweekly by Jill
Cataldo, Senior Web Developer for NewRamp.com. She has been
working in web development since 1996. Articles are copyright
©2005 NewRamp and may not be reproduced without permission.
Visit the
Webmaster's Corner Articles Archive
NewRamp.com offers web
hosting with a strong focus on technical support. We are
here for you!
