Wow!
I just came back from my accountant’s office where I had to show him how to move on from the 640 x 480 monitor resolution world of large fonts and horizontal scroll bars. What year is this? Well okay maybe it was 800 x 600.
Whatever.
For someone like myself who runs at screen resolutions in the order of 1440 x 900, anything smaller than 1024 x 768 is, well too big.
This prompted me to make today’s design tip about browsers, and how you need to consider this if you’re going to be building your own website. Even after being involved with multimedia and the Internet for over 10 years, not only is cross-browser compatibility an important factor when designing websites, you also need to be sure to design to the most common monitor resolutions.
Web Design Tip
If you are designing your own website, just because you might have a large monitor and a relatively high resolution, not all of the people viewing your site may have similar monitors or resolutions. And while you can’t please everyone, you should at least make the width of your design something that will not require horizontal scroll bars when viewed at a common screen resolution.
The W3Schools website provided the following browser display statistics since January 2000:
Display Resolution
The current trend is that most computers are using a screen size of 1024×768 pixels or more:
| Date | Higher | 1024×768 | 800×600 | 640×480 | Unknown |
|---|---|---|---|---|---|
| January 2009 | 57% | 36% | 4% | 0% | 3% |
| January 2008 | 38% | 48% | 8% | 0% | 6% |
| January 2007 | 26% | 54% | 14% | 0% | 6% |
| January 2006 | 17% | 57% | 20% | 0% | 6% |
| January 2005 | 12% | 53% | 30% | 0% | 5% |
| January 2004 | 10% | 47% | 37% | 1% | 5% |
| January 2003 | 6% | 40% | 47% | 2% | 5% |
| January 2002 | 6% | 34% | 52% | 3% | 5% |
| January 2001 | 5% | 29% | 55% | 6% | 5% |
| January 2000 | 4% | 25% | 56% | 11% | 4% |
Being mindful of this trend, remember that 43% of users (according to the W3Schools stats) view web pages at resolutions of 1024×768 or lower. The lesson here is that just because you might be included among the 57% who use a higher resolution, when designing your website, don’t design to your standards and make the mistake of excluding at least the 36% who use resolutions of 1024×768.
Because there is such a small percentage of users below this, I think it would be safe to not worry about them. Most newer systems come set for the most common resolution.
A good rule of thumb if you typically run at a higher resolution than the most common 1024 x 768 is to reduce your monitor resolution to 1024 x 768. That way you won’t be likely to put in hours of design work only to find out that your beautiful design is too wide for common viewing and viewers need to scroll left or right to view your site.
Above of the Fold
Borrowed from area of newspaper design, in terms of website design, above the fold means the area of the screen that users can see without having to use the vertical scroll bar, or scroll down.
Unlike their horizontal counterparts, vertical scroll bars are more common and accepted.
What items or content should you consider to include above the fold? In her book, Web Design in a Nutshell: A Desktop Quick Reference
Web Design Tip
- Name of the site
- Primary marketing message or call to action
- Some indication of what the site is about
- Navigation to other parts of the site
- Any other information that is crucial for visitors to the site
While not an exhaustive list it does give some indication of what to include.
Keeping these two things in mind, screen resolution and what to include above the fold, will result in a solid foundation for the rest of your website design and development.
No related posts.
Related posts brought to you by Yet Another Related Posts Plugin.
{ 1 comment… read it below or add one }
I love the tips. Thanks for sharing these guidelines and basics.