It is common mistake for novice web designers to create a website and only test the website at 1 screen resolution and in 1 web browser. The problem is, there are still some Internet users that use 15” monitors, or use a browser which is different from Internet Explorer. Thus, if you’re not testing your website to ensure that it appears correctly at different screen resolutions and in different web browsers, you may be neglecting a small portion of your potential customers. Sure, maybe only 10% of your customers may not be able to view your website as you’ve planned, but constructing a website that is accessible to everyone is so easy that it would be a huge mistake to neglect that 10%.
Screen Resolutions
Screen resolution refers to the number of pixels that span a particular space. If you are running 1024 x 768 resolution, 1024 pixels can fit horizontally across the page. When designing a website, it’s not so much the number of vertical pixels that should concern you, but rather the number of horizontal pixels. You need to ensure that the user does not have to scroll to the right in order to view your whole web page. As a quick rule of thumb, I usually design my websites to span 768 pixels across. Yes, that means that I would be neglecting those ancient computer users that use 600 x 480 resolution. But, by accommodating those users you would not be utilizing very much of the screen, and it wouldn’t appeal to all your other users that make use of higher resolutions. Here are some statistics regarding screen resolutions for Internet users:
- 800 x 600: 14% of Internet Users
- 1024 X 768: 60% of Internet Users
- 1280 x 1024: 26% of Internet Users
Another idea, as opposed to using absolute definitions for the screen width, you could also employ relative screen width. The problem with optimizing your website to be 768 pixels wide is that your website may look empty to those viewers using 1280 x 1024 resolution. To do this, just create a table with its width set to 100%. Your web page should adjust automatically to the user’s screen width. Just remember not to add too much content in there or else the page will not adjust properly to users with lower resolutions.
Test Your Website
In order to ensure that your website will appear correctly you should view it using different screen resolutions on your own monitor. Here’s how you can do this:
1) Right click on the desktop and click “Properties”br> 2) Click on the “Settings” tab
3) Move the slider through all the different resolutions and hit “OK”br> 4) Open up your website and see if there is any scrolling required
Ensure Browser Compatibility
If you’re coding your website with an editor, you should be aware that there may be slight differences in the website’s appearance depending on the brand of browser you are using. Over 70% of Internet users surf the web with Internet Explorer, but you should check to make sure your site looks consistent in Firefox, Netscape, and Opera. Also, if you have access to a Mac, it would be a good idea to work through the different resolutions, and then you’d have most all your bases covered.
Usability And Accessibility
Website accessibility refers to the ease of use for all types of Internet users, regardless of the type or age of equipment and software they are using. When you start to consider accessibility over a flashy appearance that may only please some surfers, you should increase visitor satisfaction and in turn, increase your bottom line. If you just assume that everyone has a massive monitor and running high resolutions, you could be shutting out a good number of your potential customers. It’s just smart business.
Paul Coulter owns and operates a custom web design company in Windsor, Ontario, Canada. If you would like to read more web design articles or contact Paul, visit his business's website: Cost Effective Web Design, Windsor ON
