Home arrow Design Usability arrow Browsers as Test Platforms
DESIGN USABILITY

Browsers as Test Platforms


In this article we will take a look at browsers from a developer’s point of view. When developing for the Web, it is inevitable that we need to debug and test our work. How easy or how hard is it to find the problems causing errors, and how easy is it to replicate certain environment changes? Once we identify the steps we need to take to test properly, we will see if there is a chance to extend the browser to make these steps a lot easier.

Author Info:
By: Chris Heilmann
Rating: 5 stars5 stars5 stars5 stars5 stars / 8
December 08, 2004
TABLE OF CONTENTS:
  1. · Browsers as Test Platforms
  2. · Microsoft Internet Explorer 6
  3. · Mozilla Firefox 1.0
  4. · Opera 7.5
  5. · Summary
  6. · Browser wishlist

print this article
SEARCH DEVARTICLES

Browsers as Test Platforms
(Page 1 of 6 )


Support files available here.


Meet the cast

The development environment is an PC running Windows XP, in this case a IBM Thinkpad T40 with 1GB of Ram and a Centrino 1300MHz processor.

We will take a look at Microsoft Internet Explorer 6, Mozilla Firefox 1.0 preview release and Opera 7.50.

For testing, we will use a website template (http://icant.co.uk/forreview/browsertests/dummypage.html) with some HTML errors and a Javascript error.

What we want to test is:

  • Why is the Javascript not working (i.e. why is the menu not collapsing)?
  • Why is the site not being displayed correctly?
  • Why does the form not get sent off?
  • How does the design behave with different font sizes?
  • How does the page work without CSS, or Javascript or images?

Debugging the HTML

We will check how comfortable the source view is in the browser, and if it provides us with extra tools to check the HTML structure.

Debugging the Javascript

We will test how easy it is to trace back Javascript errors. Does the browser tell us the error?  How easy is it to see the error messages?

Debugging the CSS

When using CSS seriously, we need to avoid Quirksmode at all costs. Quirksmode is a feature that was added into modern browsers to ensure backward compatibility. It forces the current version of the browser to render pages in the same way as its predecessor. This makes it nearly impossible to predict the outcome, and forces us to keep developing for the past rather than for the future. We can force browsers to render websites properly - in standards mode – by giving them the correct DOCTYPE (see Quirksmode, http://gutfeldt.ch/matthias/articles/doctypeswitch.html.) To see what went wrong with our CSS, we need to find out whether the browser renders in quirksmode or not.

Testing the accessibility of our page

To test how accessible our page is, we can take a quick look to see how it renders without CSS, Javascript or any of them. Furthermore, we want to resize the font of the browser to check if that breaks our design.


blog comments powered by Disqus
DESIGN USABILITY ARTICLES

- Responsive Web Design: More Than Just a Buzz...
- Add New Website Features to Please Users
- Gzip Components in Action
- Configuring Gzip Components
- Gzip Components
- Create Great JavaScript and CSS Menus Simply
- Design Principles that Shape a Web Site
- Creating Aqua Style Images
- Easy as A,B,C – dynamic A to Z indexes
- EasyChart: a Usability Teaching Tool to Demo...
- Building Friendly Pop-up Windows
- Back to School: Design Usability
- Using HTML_QuickForm To Manage Web Forms, Pa...
- Using HTML_QuickForm To Manage Web Forms, Pa...
- More Website Knick Knack

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials