C Christian W Web P Programming

We test the appearance of all web pages with the most popular browsers (latest versions in all cases) based on this information.  Currently we test:

• Apple Safari
• Google Chrome
• Microsoft Internet Explorer versions 6, 7 and 8
• Mozilla Firefox version 3
• Opera

We will test your web page with alternate browsers upon request.

Why: 

For example: 

What we do: 

• 800 pixels wide:  all of our web pages are designed to display properly on all web browsers when using an 800-pixel-wide display at standard text size.  This ensures that the maximum number of users can view your web site comfortably.  Designing for an alternate minimum width or text size incurs no extra charge.
• 1600 pixels wide:  every single one of our web pages are tested for proper layout on all web browsers using a 1600-pixel-wide display at standard text size.  This ensures that users will be able to view your web site comfortably regardless of the display hardware they are using.

Check it out! 

• If you’re using a larger than standard browser text size, restore your browser to standard (medium) text size.
• Maximize your browser window (make it fill the whole screen) and scroll through the page.  Looks good, right?
• Next, go back to the top and reduce your browser window width until the title barely fits.  (The margin should be equal on both sides of the title.)  This title is designed to use the full width of an 800-pixel-wide display, so now your browser window is 800 pixels wide.
• Scroll through the page again.  Looks the same, doesn’t it?
• Now, don’t resize your browser window yet.  We’re going to look at a popular web site that is designed for wider displays.  Just hit the Backspace key when you’re ready to return to this site.  Here we go.  Notice how the very important “Add to Shopping Cart” button (off to the right) isn’t visible!  You want visitors to your web site to see everything on your web page!

How: 

Why: 

Check it out!

• Maximize your browser window (make it fill the whole screen) and scroll through the page.  Looks good, right?
• Next, enlarge your browser text size.
  • Internet Explorer:  From the browser menu choose
    View > Text Size > Largest
  • Firefox:  From the browser menu
    View > Zoom > Zoom Text Only
    should be checked.  Then, choose
    View > Zoom > Reset
    Finally, hold down the Ctrl key and press the + (plus) key three times.
  • Others:  Restore to standard (100%) zoom and then hold down the Ctrl key and press the + (plus) key three times.
• Now scroll through the page again.  If you have a narrow (800-pixel-wide) display, the title will run off the right and the menus will “wrap”, but otherwise everything is still exactly where it should be, and in any case everything is visible and everything is accessible.  Just as important:  if you do have a wider display, everything will appear exactly as it should.
• Now we’re going to look at a popular web site (ranked 66 in the world as I type this) that doesn’t handle large text properly, regardless of how wide your display is.  In Firefox and some other browsers, you will have to enlarge your text again at the new web site (you don’t have to do this with Internet Explorer).  This is a “wide” site, but that doesn’t save it from large text.  When you get there, notice how large text causes text and graphics to overlap (and become unreadable) in the left column.  If you return the text size to Medium or Reset while on that page, you’ll notice that the problem disappears. Remember to press the Backspace key when you’re ready to return here.  Here we go!
• What’s particularly disappointing about web sites such as the above is that it causes additional visual problems for the very people who are most likely to use large text:  those who already suffer from visual impairment!  Web pages designed by us do not suffer this serious liability!