The Need for Web Standards

Tell Me I'm Dreaming

I had a disturbing dream the other night - Microsoft creates a web browser that actually adheres to web standards. Much to my surprise, it wasn't a dream; Internet Explorer supporting web standards is finally a reality.

Among the many things Internet Explorer did not support before, here is a list of the ones that have special meaning to me as a web developer:

• min-height
• :hover on all elements
• alpha-transparent PNGs
• proper box model

Standards are Good

Min-height allows me to make sure content blocks always stay at a minimum height. This is to prevent the undesirable look of uneven columns that don't line up at the bottom. This typically happens when the main content column is much shorter than the other columns. It looks unprofessional when you have a long menu column and a much shorter content column, especially if the background graphic doesn't line up at the bottom. Maybe it's just me but I like it when things line up neatly.

Hover on all elements means no more javascript hacks to get CSS menus working properly. This is a godsend because CSS menus, when combined with list elements, are lightweight and easy to maintain. Who needs those fancy animated menus anyways? Menus should be instantly accessible, without needless animations that don't really serve any purpose.

Alpha-transparent PNGs can be a huge time-saver. This is especially true when your design consists of shadows and transparent gradients. For example, typically you would have to matte the background color ( or much worse, a background texture ) to the transparent image you are cutting out. Well now that IE officially supports full alpha-blended PNGs, you can simply switch off any background layers in Photoshop and save your images as is, complete with drop shadows and everything. You never have to worry about background matting again.

Caution must be taken when using lots of alpha-transparent PNGs, as they result in much bigger file sizes than their brethren.

Another really cool advantage with alpha-transparent PNGs is where menus are concerned. Nicer looking menus usually have gradient or textured backgrounds. Traditionally, menu text is merged with the background it is situated on. This made it somewhat laborious and inflexible whenever you wanted to edit or create new items. Using transparent PNGs, all you need to save is the text of the menu item on a transparent background. This can be placed over any background with a seamless effect. Any time you need to make an edit to your spiffy graphic-based menu, all you need to edit is the text itself and save the PNG. Very cool!

At long last, IE finally supports the proper box model. The box model is simply a web construct that determines how the dimensions of containers are determined by the browser. The correct box model states that the full width of a container is equal to the width + padding + margin. IE's model stated that full width = width - padding - margin. I remember struggling with this many times, until I finally realized that STRICT mode temporarily solves the problem.

You still would have to test your site in the major browsers just to make sure your padding and margins look the same across the board.

Now that IE officially supports the correct box model, no more guessing on what to pad and what not to pad. Finally!


The Point of It All

The moral of this story is that standards are always a good thing. As far as web development goes, they are a very good thing. Web standards promote better design, leaner code, and more importantly, a consistent user experience. As a developer you worry more about how to turn an awesome design into a functional site, and less about how to make the design work in non-standards compliant browsers. In the end, time and money is both saved, and users benefit from a more compelling web experience.