with Lorelle and Brent VanFossen

Living in an 800×600 World

My laptop’s motherboard gave up the ghost and had to be shipped out for repair. That left me with two choices: Using Brent’s laptop, or hooking up my new rebuilt server/desktop and borrowing an old monitor from a friend. I went with the latter.

I’ve been living for over two weeks in an 800×600 world and I wanted to tell you about it. Why? Well, mostly because it is important as a web page designer to understand this small screen and low resolution world. And more importantly, because I want to whine. This has been a learning lesson and a pain in the ass arm for the past two weeks.

The Lessons of Living in an 800×600 World

There is a lot to learn when you leave the comfort of your wide screen and high resolution graphics card behind. I learned that eye strain is a choice. Yes, with the lower resolution text gets BIGGER. So it was much easier to read. I didn’t have to squint or enlarge the text size of a single page I viewed. Amazing! I could actually SEE the text on every page.

Unfortunately, only part of most pages were visible per screen so I spent a lot more time scrolling down through pages and pages and pages of what would have been only a few pages with a higher resolution.

I found that on average, I had two, sometimes three, scroll downs to get to “content” on a per page basis compared to what I would scroll down on my high resolution laptop monitor.

My laptop monitor is set for 1024×768 with 32 bit color. The borrowed monitor was locked at 800×600 and 16 bit color, though it would have preferred 256 colors. My graphics card would give me ANYTHING my heart desired, but I was still limited to the constraints of what the monitor was capable of. I choose 24 bit color and the whole monitor went totally screen static wonky until it reversed itself back to 16 bit color automatically when I didn’t “apply” the new setting. I was stuck in an 800×600 world.

For years there has been a myth going around teaching web page designers to put the most important stuff up at the top of the screen. “People will rarely scroll down past the first screen load.” In an 800×600 world, it’s not a myth. It’s a painful MUST. Sure, as screens became larger with better quality resolutions, larger headers could take up more space on a web page since there was more space to be filled. But in an 800×600 world, what may look like a small header height on your high resolution screen, could be two to three page scrolls to pass on the way to the content on an 800×600 screen.

As an example, I spend a lot of time on the WordPress Support Forum as a volunteer. The page layout is the typical “float it in the center” with wasted empty space on the sides. Viewed at a high resolution like on my laptop at 1024×768 at 32 bit resolution, I see the header, the post title, the ads, and the start of the question.

On the 800×600 screen, it was two scrolls to get to the question. Scroll past the header and then another page length of scroll past the ads. I finally got FireFox’s Ad Blocker extension so I could get rid of the ads but it still was a scroll and a half to get to the question.

800x600 view of the WordPress Support page
800x600 view of the second scrolled page down on the WordPress Support page

It took two scrolls to get to the post content on the WordPress Site at 800×600.

1024x768 view of the WordPress Support page

When the WordPress Support page is viewed at 1024×768, you see the header, title, ads, and the start of the first paragraph of the post.

Checking against my own site, I can easily see the first two post excerpts on my front page with the laptop’s higher resolution. With the 800×600 screen, I see the top of the first post and sidebar, which is still enough to lead someone into the page. If the header was any taller, then they would have to scroll down farther to see even the first article excerpt.

800x600 view of Taking Your Camera on the Road front page
1024x768 view of Taking Your Camera on the Road front page

The image on top is the view of our website at 800×600. The view on the bottom is our website at 1024×768.

Web pages with a fixed width and positioning were especially cumbersome to view at 800×600. Only a corner or part of the page’s width was viewable at a time. I’d have to move down to the bottom scroll bar and scroll vertically to see the other side of the page. Made reading these pages painful as I would scroll back and forth from left to right to finish a sentence.

800x600 view of Mozilla Development Grease Monkey site - with horizontal and vertical scroll bars to see the whole page

The Mozilla Development Grease Monkey site fit only into a corner of the screen at a time. I had to scroll right and left as well as up and down in my 800×600 screen world.

My right arm now has mouse elbow and shoulder. I worked harder with the mouse over the past two weeks than I had in the past 10 years. I had to move all over the page to view it, scrolling down through screens to get to the content, scrolling left and right to “see” the whole page. Luckily, I have a three-way mouse wheel which allowed me to scroll down as well as from side to side, but it was still cumbersome and painful on the arm, wrist, and fingers. I was doing a few website reviews for WordPress as part of my volunteer efforts. In my 800×600 world, it’s impossible to review a web page when you can’t even see the whole thing. I had to stop doing the reviews, it was just too much work to view the page.

Reality, living in an 800×600 world on the Internet sucks. It’s hard work and a struggle to get access to information when web page designers design for huge screens and forget to take the smaller screens into consideration. Luckily, there are still site designers and developers who remember those still in the 800×600 world. I have a new appreciation for them and their web design skills. For those who have forgotten about a good majority of users….I hope you are reading this. Remember, we’re still out there, and we still need attention, at least for the next few years. Then most of us will have died or our computers and monitors will have died. Whichever comes first.

Testing For 800×600 Views

The past couple of years has seen a trend in developing “float in the middle” fixed width page designs in an attempt to control the designer’s designs and user’s view. This is reinforced by the belief that people are uncomfortable viewing any text longer than a newspaper column or paperback book width. By forcing a page into a specific pixel width instead of using the more elastic and fluid percentages, viewers with smaller or lower resolution screens work harder to view these pages than they should have to.

Understanding how the various monitors and graphic cards display a page was part of the test I did a couple years ago called Page Views – Views of a Web Page Under Different Conditions. I took one page from our site with a photograph in it and then ran it through a variety of tests, each one tackling a different perspective or view of the same web page. I tested it for color blindness, screen size, screen resolutions, browsers, and even screen readers. While not a complete test, it helped to really put the design through its paces to see if it would work when exposed to the world. I recommend that every website designer do the same thing with their pages. It’s a really good test. For students learning about web page design, it should be a requirement.

Firefox offers a neat tool in their Web Developers Add-on that allows you to view a page at different screen sizes. This is really handy for testing a page on your high resolution screen. But I learned an important lesson about this tool: It doesn’t tell the whole story.

Resizing a window is not like actually viewing the page at that resolution. Many 800×600 screens and graphics cards will not go beyond 8 or 16 bit color. Many are set for 256 colors. The higher the color and screen resolution, the smaller the pixels. The lesser, the larger. On a high resolution screen, resizing the window doesn’t change the resolution. Changing the resolution and screen size does!

You can use that tool or other online tools which will give you a “representation” of what your web page might look like, but the best test it to test drive it yourself.

To set your monitor’s screen size and resolution in Windows, right click on an empty area on your Desktop and choose Properties from the right click menu. In the window that pops up, choose Settings. This is where you can change your settings for the display of your screen size and resolution. Experiment with this a few times. When you make a choice, one of two things will happen. Either it will be set to the new screen size and resolution when you hit Apply or it will ask you if you are sure and allow you to back out if you don’t like it.

Set it for 800×600 with a low resolution for a short time to test your site – but also take time to view how other sites look at that resolution. In fact, consider spending a few days, or maybe a week or two in your own 800×600 world and you will develop a whole new appreciation for your monitor screen.

What You Need to Know About 800×600 Users

Here are some statistics you need to know about 800×600 users. Be aware, while the trend is towards better, larger, and higher resolution monitors and graphics cards, the reality is that most users still are using 800x 600.

  • W3 Schools Browser Statistics report “Internet Explorer 6 is the dominating browser, XP is the most popular operating system, and most users are using a display with 800×600 pixels or more, with a color depth of at least 65K colors.”
  • Browser News reports: “Most users have 1024×768 and higher, but a large minority have 800×600. A very small and shrinking number, <1%, have 640x480. These numbers do not include those who browse using web appliances." About color quality: "Most users have 24-bit (or more) displays (16 777 216 or more colours), but a large minority have 16-bit displays (65 536 colours), and a very small and shrinking number, <2%, have 8-bit displays (256 colours)."
  • Designing Web Sites For All Screen Resolutions states “There are more than 40 different screen resolutions. 1024×768 is the most popular resolution used (getting the lions share of around 60%) followed by 1280×1024 and above (around 25%) and 800×600 (around 14%). 98% of users have 800×600 and above resolution, thus, 800×600 can be taken as the minimum resolution the site should fit (other lower resolution are seldom used).”

4 Comments

  • Posted December 27, 2005 at 1:24 | Permalink

    I usually design my web sites in 800 x 600 first to be sure from image resolutions , then i convert it to 1024 x 768 , when the site is very important i usally use DIV with percentage High and width to make it viewable in any resolution.

  • College Web Design
    Posted August 23, 2006 at 13:40 | Permalink

    It’s a bit frustrating, isn’t it? All of the stats out on the web (like w3c) are fine and good, but there are way more people on 800 than we’d like to think. Especially when you’re talking about educational environments and employers who have a lot of people who are middle-aged.

  • Posted January 12, 2007 at 16:32 | Permalink

    I’m one of those 800×600 middle-aged people with eyesight that isn’t what it used to be. At home I tend to use 1024 x 768 but at work I stick to 800×600 which drives our IT people batty. But I need to be able to see at the end of the day, not have headaches from trying to read teeeeny text.

    YOu’re right that the scrolling becomes very cumbersome but I have a mousing arm that has developed muscles. As a designer, I find it invaluable to always check my own screen before giving the OK to something a colleague has sent me for review.

  • Posted February 29, 2008 at 12:32 | Permalink

    I’m glad you noticed this problem. The high resolution designers make using my 800×600 Compaq laptop almost useless.

One Trackback

Post a Comment

Your email is kept private. Required fields are marked *

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=""> <strike> <strong>