Design your Web Site for What Monitor Size?

divider

There are countless monitor variations to design for. Some monitors are large, some small, some wide, some tall. Some browsers have multiple tabs / menus, some browsers open not full width. What is a web designer to do?

Recommendations

  1. Design your site for your audience. Take a look at your web site statistics and see exactly what your monitor resolutions are. If you don’t have statistics, then use some default assumptions – see below.
  2. Design for the largest percentage. In the stats below, you will see that 800 x 600 is only 1%. Will those people viewing your site have a bad experience?”  Probably. But I want to cater our site to the 97% of other people who have modern monitors.
  3. Design for at least 1024 x 768. When in doubt, set up your web site so that it positions nicely in a 1024 monitor. You can increase this setup in the coming years as a large percentage of people will have 1280 or higher resolution settings.
  4. Design to fit. For a 1024 x 768 monitor, setup the site so that it its no wider than 960 pixels.”  Every browser window has scroll bars and other little edge elements. If you design to exactly 1024, then your design will not fit and the right side parts will be missing, causing the user to scroll left/right to see everything. To avoid this setup the design so that it fits within a 960 pixel wide framework
  5. Design for above the fold. For a 1024 monitor, setup the site so that your key info is not below 575 pixels in height. Same idea as the width. Most users will various menus and tabs that take up the first 200+ pixels on the screen. Put your key ideas, benefits above the fold. In our screen shots below, with minimal extra navigation bars the elements must fit above 575 pixels. For every additional navigation bar in Firefox or IE, you need to reduce your information to get above the fold.

Browser Statistics from W3 Schools – January 2010

  • 76% – Higher than 1024 x 768
  • 20% – 1024 x 768 pixels
  • 1% – 800 x 600 pixels
  • 3% – Unknown

Cool Examples – Click Each to See the Browser Screen
The thumbnails are not accurate as WordPress is zooming to the center of the image.

 

 

 

 

 


5 Responses to Design your Web Site for What Monitor Size?

  1. Chris Pierre
    8:40 pm on March 26th, 2010

    I usually design for the standard 1024 x 768 pixels.

  2. Joe Dyer
    3:13 pm on May 9th, 2010

    Very good advice it is so eaysy for a new web site to be lost in the vast world of the web.
    I also think it is important to target your local area rarther than the whole world.
    Getting the nunber one spot for the word Law would be very difficult however getting number one spot for Criminal Lawyers Your_Town is a far easier task and should result in better quality visitors to your site

  3. Matt
    6:09 am on May 13th, 2010

    Good advice. There is no "quick fix" for any of these questions; anyone who tells you otherwise is a liar. Google uses thousands of undisclosed algorithms to ascertain your Search Ranking; only some of them are known. Those that are known are:

    – Inbound links to your site from QUALITY, RELEVANT external sites (reciprocal links don't count like they did in the past; likewise getting as many links as possible from poor quality, irrelevant sites doesn't help.)
    – Having an .XML site map submitted to the search engines, allowing them to crawl your site and list it properly.
    – Optimised HTML including proper CSS, relevant image names and ALT tags, etc.
    – Keyword density; the relative amount of occurrences of your keyword compared to other regular words on your site.

    Among others.

    Hard word, research, and sound marketing and development are the only answers – quick fixes almost never work.

    Matt

  4. Ernie
    9:27 am on May 15th, 2010

    A bit has changed since this was posted in 2004. Social media plays a bigger part as do blogs. And reciprocal links aren't worth much if anything nowadays.

  5. bruce k
    12:34 pm on April 1st, 2011

    I was just in Fry’s electronics, a huge computer retailier, and every single PC laptop I saw has a screen that was only about 800 pixels in the vertical direction.

    Combine that with the explosion in smartphones and tablets and the useful screens are a rather small size … like 640×480, 800×600, 1024×800 for screens of useful interaction.

    What I don’t understand is that it has been 30 or more years since we had graphical screens with mice and whatnot … why is there not a standard way to scale a screen independent of monitor size? This cannot be that hard.

    It just seems like anything that gets out there is useful at first, and then get so overly complexified over time that it locks people out of being able to doing anything with it and when they do in order to be effective they have to do it ALL THE TIME or they forget it and go out of date.

    This is insane.

Leave a Reply

Your email address will not be published. Required fields are marked *

*