Ensure That Everyone Can Properly View Your Website


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 youre 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 youve 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, its 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 wouldnt 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 users 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. Heres how you can do this:

1) Right click on the desktop and click Propertiesbr> 2) Click on the Settings tab
3) Move the slider through all the different resolutions and hit OKbr> 4) Open up your website and see if there is any scrolling required

Ensure Browser Compatibility

If youre coding your website with an editor, you should be aware that there may be slight differences in the websites 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 youd 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. Its 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

Close    To Top
  • Prev Article-Web Design:
  • Next Article-Web Design:
  • Now: Tutorial for Web and Software Design > Web Design > Web Development > Web Design Content
    Photoshop Tutorial
     

    Special Effect

      3D Effect
      Photoshop Articles
    Programming Tutorial
     

    C/C++ Tutorial

      Visual Basic
      C# Tutorial
    Database Tutorial
     

    MySQL Tutorial

      MS SQL Tutorial
      Oracle Tutorial
    Geek Tutorial
     

    Blogging Tutorial

      RSS Tutorial
      Podcasting Tutorial
    Graphic Design Tutorial
      Coreldraw Tutorial
      Illustrator Tutorial
      3D Tutorials
    Webmaster Articles
     

    Domain Service

      Web Hosting
      Site Promotion
    Java Tutorial/ Articles
     

    Java Servlets

      JavaEE Tutorial
     

    JavaBeans Tutorial

    XML Tutorial/ Articles
     

    XML Style

      AJAX Tutorial
      XML Mobile
    Flash Tutorial/ Articles
     

    Flash Video

      Action Script
      Flash Articles
    OS Tutorial/ Articles
      Linux Tutorial
      Symbian Tutorial
      MacOS Tutorial
    Personal Tech
      Hardware Tutorial
      Software Tutorial
      Online Auction