Web development tools I use at Hippo
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
The web developer toolbar is one of the first Firefox extensions I add. It offers quick access to options you can also find in the preferences of the browser like clearing the browser cache, disable CSS or scripts. Disabling CSS and scripts are sometimes necessary to check if the site is still usable for someone who uses a text browser, read speaker or a (mobile) browser with less features, requirements for Dutch governmental websites. One example are the related dropdowns I made for the thematic search in the website for the national budget. If JavaScript is enabled you see the sub category after choosing the main category. Without JavaScript you see one dropdown with <optgroup/> to (visually) separate the categories.
Other handy features are shortcuts to validate the current page for correctness of HTML, CSS or even feeds.
Firebug
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.
Yslow
Yslow on top of Firebug gives you performance tips of the page you’re working on like “CSS first, then scripts”, “Minimize CSS and scripts”, “Use a Content Delivery Network” or “Use expires headers”. You may start with a JavaScript framework (JQuery, Prototype) and one or two scripts. After a few months you discover that there are more than 10 different uncompressed script files on one page. Each of those files need a request, optional check if they can be cached and a response. Yslow will warn you about these things.
YUI compressor
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).
WAVE
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.
Multiple 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.