Grow your CSS skills. Land your dream job.

“Real World” Web Design Still Needs to Accomodate 800×600

Published by Chris Coyier

Check out the statistics for the screen resolutions of all you hip kids who read CSS-Tricks:

csstricksresolutions.gif

On this site, 800x600 doesn't even make the top ten. Knowing that, I designed this site to make use of that extra pixel space. Right now it's at 980 pixels. At first I went a full 1024, but that was causing horizontal scrolling problems because it wasn't taking into account the 13-15 pixels that get taken by the vertical scroll bar. Doh!

CSS-Tricks isn't exactly a "real world" website though. It is targeted at an audience that is a bit more tech savvy. In all likelihood, the tech savvy have bigger monitors. Fortunately, I don't need to guess. My Google Analytics tell me exactly what screen resolutions you are using. CSS-Tricks isn't the only site I track, either. I have about 25 sites that I track ranging from the other Creative Suite Help network sites to some eCommerce sites that I track from clients.

One of these eCommerce sites is a site that sells baseball field equipment. The target audience is maintenance personnel from city parks, schools, and stadiums. No offense to them whatsoever, but these people are not tech savvy. They are using the the CRT monitor that has been on their desk from the early 1990's. More power to them, I say. I am here to accommodate. Guess what resolutions many of those old monitors are? 800x600 baby. Check out the stats from that site:

ecommerse-resolutions.gif

On this site 800x600 comes in a healthy third place. If I were to make a design for this site that was 980 pixels wide, it would lead to a very frustrating experience for visitors having to horizontally scroll around as well as vertically scroll. Especially since on this particular site, the "cart" is on the right hand side! That would be annoying indeed. This site needs to be as easy as possible for users to navigate. After all, I am trying to get them to actually spend money here. People don't spend money on frustrating websites, they will find an easier one. The internet is a big place and it is extremely easy to lose customers for dumb little reasons.

The bottom line: know your audience.

In my opinion there are really only three options:

  • Optimize for 800x600
  • Optimize for 1024x768
  • Go fluid-width (or go with resizeable content like Flash)

CSS is all about accessibility. Wouldn't it be a shame to go to all the trouble of making a really nice an accessible website and then have it be too big to fit on a visitors monitor?

Comments

  1. WC
    Permalink to comment#

    So, for the 13.5% (and shrinking) of your customers that can’t afford a better monitor, you redesign your whole site to have huge borders on the other 86.5% of the customers’ screens?

    I disagree. Those 13% are well used to scrolling by now, and they’ll complain a little but know the real fault is their own for not having a bigger/better screen.

    Design the e-commerce site to be easy to navigate and easy on the eyes, using the space well.

  2. Permalink to comment#

    It is very possible to design a site that doesn’t have off-screen content at 800px wide, but looks great on monitors of all sizes. Quick example, check out the site for Coda. The site looks great on my 1600 pixels, and all the content fits in 800.

    It is a good point that the percentage of people at that resolution is shrinking, but for now it is still essential to think about. Part of being “easy to navigate” is not having any off-screen content.

    If the example site was too large for 800 (it’s not, thank god), and I were to lose half the customers who have a 800×600 monitor, that would be a 6.5% loss of sales, which is unacceptable. Especially for something to easy to think about from the beginning.

  3. Permalink to comment#

    Interesting comparison.

    What I really dislike about the fluid width solution, that it does not obey so many usability rules, most of all paragraph width. For example in google mail or in most wikis you get (on a 1024 up monitor) so long text-lines that you cannot scan the text anymore properly. This reduces reading speed enormously.

    There should be some other option for designing in the space between 800 and 1024 however not fluid ;)

  4. Permalink to comment#

    @ Chris: I dont know, taking coda as in example is difficult, for they are selling one product which means very little content and focus on one subject: selling coda…

  5. Permalink to comment#

    Ok you’re right, maybe not the best example, but my point is to use repeated graphics or textures or something to spice up the look of a page for people with higher resolutions. Here is an example of a texture that I think works pretty well.

    The real holy grail would be a fluid width site with min-width of about 780 and a max-width of about 1000. Maybe I’ll work on that.

  6. Permalink to comment#

    Yeah, nice page. And you are right about spicing up the look of the age for high resolutions. The point is, I don’t see a lot of sites/apps that really need that space. Meaning: I don’t see a scenario where the user benefits from 1600 pixels in width.

    And you are definitely right about the holy grail. I’ve put some thinking and experimenting into figuring out a solution for fluidity between 780 and 960 px, however I think it’s quite hard to accomplish…

    Would love to see a solution ;)

    p.s.: really love the “subscription to comments”. nice feature. Did you implement it yourself?

  7. Permalink to comment#

    Nah I didn’t implement it myself, it’s just a WordPress plugin called… “Subscribe to Comments“. I really like it. I like what it does, and that if is “off” by default, because it really can be annoying if you comment on some blog, forget to turn that off, and come back to a huge inbox full of other peoples comments on some post you’ve long forgotten about. It even is smart enough to tell a visitor that they are already subscribed if in fact that is the case, that’s a nice touch.

  8. Right on Chris, you have wrapped it up in one post!
    Design for your audience!!
    13.5% is a lot of viewers when you are talking about 1000 viewers, which means that if its designed for 1024×800, 135 people will have a bad experience in viewing the website.

    Now thats crap designing!
    some more on this topic:

    http://germworks.net/blog/2007/06/04/what-screen-size-to-use-in-web-design/

  9. btw agree with you totally about the subscribe to comments, I know it helps me follow my previous comments and usually comment again, which is what we all want.

    http://germworks.net/blog/2007/04/23/comment-notify-on-blogs-are-a-must/

  10. Fred Boulton
    Permalink to comment#

    In reply to WC’s comment, there are many reasons why people don’t have a larger monitor and many reasons why some people stick to 800 x 600. Accessibility is one factor. I don’t need to wear glasses looking at my 800 x 600 17″ monitor, whereas I do at 1024 x 768. My 17″ monitor is excellent and I don’t need to replace it for anything larger.

    Can any Web site owner afford to have 13.5% of people not seeing the whole page? I for one tend to read the main content, as on this page, and don’t scroll across to see what’s on the RHS. Who can afford to have that happen? I tend to do this on many Web sites where the designer assumes too much and doesn’t build for all users.

    Don’t assume that the majority of users are like you, and don’t assume that all 800 x 600 users are going to scroll to look at the RHS, design for as many users as possible

    My 2 cents.

  11. Good to see you again Fred!

  12. Chris Ponsano
    Permalink to comment#

    Great article and posts. At our company, we have lots of older monitors and I have to provide a smooth experience for all users. I just found your site, but I think I’ll visit your site often.

    Chris

  13. The percentage of visitors who uses such a resolution greatly varies depending on country and topic of the site. It seems very hard or almost impossible to predict would it be worth spending time to optimise for such an audience or not. I think that in most cases the optimisation for 320×240 would be much more useful than “sacrificing” that users of old hardware.

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".