Earlier this week a customer with its own development department asked us which tools we use for measuring quality and performance of websites. In this blogpost I'll describe some of the tools I use to check the HTML and CSS. I know there are more tools available and it's not a complete list of the tools I use, but I'll cover my most frequently used.
The quality of the HTML and CSS starts at the design phase. Most of the HTML and CSS I see have already been designed, my task is to make the static designs dynamic with content from a Hippo Repository. This doesn’t mean I have no opinion at all about the quality of the design. As more people of my age I started making websites as a teenager when frames had just been introduced, Netscape was a faster alternative for Mosaic, tables were necessary for markup and the font tag was accepted. Later CSS was introduced but browsers (IE) had no problem making a webpage out of the tagsoup from Frontpage or Geocities, the horror. Modern professional designers make a clear distinction between HTML and CSS, use HTML elements what they are meant for and think of performance. Some of the tools will guide you towards correct and efficient usage of HTML and CSS.
Web developer toolbar
Other handy features are shortcuts to validate the current page for correctness of HTML, CSS or even feeds.
Firebug is a very handy tool to see the interpreted source of the webpage. This may be different from the HTML response from the server due to DOM manipulation by scripts or the use of tagsoup instead of valid (X)HTML. It also allows you to manipulate the HTML or CSS to quickly see the effect of changing the styling. It can also show you the requests the browser did for the current page, how long they took, and if they were successful.
If you end up writing large CSS and script files, it’s better to compress or minimize them. For you as developer they’re easier to read when you use indentation and variables have sensible names like postalCode, addressAndHouseNumer. For the browser all the whitespace is a waste of bandwith and the variables in scripts may also be called a and b. The YUI compressor can minimize CSS and scripts. If you want it can also “obfuscate” the variables which saves bandwith and as side effect make them harder to reuse (not something you’d want as open source developer).
With WAVE I don’t mean the chaotic, IRC style collaboration tool of a company that makes money with online advertisements. WAVE is a Firefox extension for checking accessibility of your HTML. It shows you if there are missing labels for form fields, empty or missing alt attributes for images, if there are not too many similar alt texts and if the headers are correct.
Different Internet Explorer versions
Like most of my colleagues I use Mozilla Firefox as default browser. The many useful extensions make it a pleasure to use, despite the occasional memory leak. Most visitors of our customers’ website use different browsers, mainly Microsoft Internet Explorer. For me it’s a very important reason to keep using Windows instead of switching to Ubuntu on my company laptop. If something works or looks good in modern browsers like Firefox or Chrome it doesn’t mean MSIE will behave in the same way. IE8 is a big improvement by supporting more standards than IE7 and by offering development tools that contain functionality I know from the Firefox web developer toolbar and Firebug. With IE8 you can also switch to IE7 rendering but there’s still a minor browser we have to support, the antique IE6. For a quick view of how it may render I use MultipleIEs, but if I really want to see native IE6, I have a virtual machine installed. Microsoft offers virtual machines with different Internet Explorers and Windows versions.