design tips
You are here: Design Tips » Testing and Validation
tip#11
Testing and Validation
Testing for display problems and/ or software compatibility issues could be the most important phase of a design project. In order to do it right you will need both up-to-date and vintage versions of the most commonly used browsers for Windows, Mac and Linux. (Mac OSX supports a virtual PC, but there is no Mac simulator for Windows as of the date this article was written). Get the standalone versions without email client and extras or choose "Custom install" when prompted. De-select everything but the browser itself. It will take up less space on your hard drive.
Evolt.org has the largest browser archive on the Web. To get multiple versions of Internet Explorer running side by side, you will have to do this). Schools and public library computers often have out of date software.
If you can't install a text-based browser, Delorie.com has an online Lynx Viewer. I don't recommend using the other simulators though. They are not very accurate. It's better to have the real thing.
Test your pages on different screen resolutions. At one time, the most popular size was 800x600. 1024x768 and *much* higher are showing up more often these days, and I've noticed more Sites being coded specifically for an extra-large screen area. A trend toward people buying big monitors, I guess. The "bigger is better" philosophy. Bear in mind, the default screen resolution for Windows is 640x480. Mac is even smaller. The average width of a PDA (handheld browser) screen is just over 200 pixels. Worse still, WebTV has no mechanism for horizontal scrolling! Seniors and new computer users are often unaware that they can change their screen resolution or even resize the text in their browser. And although most new LCD monitors come with software that sets the optimal native resolution for the monitor, the monitor works fine without inserting the CD-ROM. So what is the solution? Before you start banging your head against the wall, there are several things you, as a sane and conscientious designer can do:
- Avoid fixed widths and absolute units for font size
- Create fluid CSS layouts rather than stuffing everyting in a (non-semantic) table.
- Avoid using graphic dividers. Style the
hrtag or wrap it in adiv - Crop header images or set them as a background for text.
Believe me, getting yourself out of the "absolute control over rendering" mindset will make things much easier for you, your client and visitors to the Site.
Keep your code valid and semantic. Adhering stictly to Web Standards does help to avert weird display and usability problems.
Hand-coding ensures maximum control over the markup. You do not want a WYSIWYG editor inserting (invalid) gobbleygook on your behalf! There are no shortcuts if you're serious about becoming a Web designer. You have to learn HTML and CSS, and use a plain text editor. Don't ever attempt to edit an HTML page in a word processor (i.e., Microsoft Word). Just opening and resaving it—without you making a single change, will mangle the code so badly, so thoroughly, so completely, you will have a heck of a time fixing it without a backup copy. Be sure and tell your clients this if they plan on updating the Site themselves.
The article on my Home page covers all this and serves as a good introduction to Web Standards. You will also find a list of validation tools and some excellent tutorial Sites on the Links page. Feel free to contact me for a consultation or training for your inhouse design team.
- Top |
- « Tips Index |
- «« Home
Copyright © 2003-2009, 111Design.ca
![[111Design.ca]](images/cityheader7.gif)
![Get Thunderbird now! [Reclaim your inbox - Get Thunderbird now!]](images/firefox/thunderbird-reclaim.png)
![[Top]](images/arup1.gif)