Keep It Neat, Keep it Tidy!

If you were to take a look at my desk you'd think to yourself, this man couldn't find a sledgehammer among the piles of paperwork and cups of coffee strewn about my L-shaped glass workstation. However, I know exactly where the hammer is, the pliers and my HTML Tidy. That's right, I said Tidy. How "tidy" is your HTML?

Say you're busy writing some HTML, it's four in the afternoon, you want to sneak out a half hour early, you're pounding through content and know that you have to get it done in 15 minutes so you can QA it for five minutes and then spend 10 more minutes shutting down and slipping out unnoticed. Are you sure that you closed all of your paragraph tags with closing tags? What about your nested styles--are they closed in the right order? Are you indenting correctly?

It never hurts to leverage another set of eyes (or rules in this case), on your HTML. All of us who think of ourselves as good writers know that an editor is invaluable as we sometimes can't see the forest through the trees. Similarly, HTML Tidy is an invaluable program to help clean up small, seemingly unimportant markup styles and layouts that can solve some major rendering problems.

Since no two email clients render HTML the same way, it pays to make your HTML conform to W3C specifications--think of it as the lowest common denominator. A simple program called HTML Tidy helps you make sure that all of your opening tags have the proper closing counterparts. Additionally there are browsers specific bugs that affect how HTML will render.

The following two pieces of code should render identically, but thanks to a bug in certain browsers, the trailing white space will not be trimmed and the heading will render misaligned. You can see this in the 1st example--even though it should render just like example 2 which will have no trailing whitespaces.

In most cases the misalignment would be minimal, but as marketing professionals our job is to take into account the edge case and make it a non-issue. Brand integrity depends on digital communications rendering seamlessly and as uniformly as possible. 

Other features of this simple program include changing certain characters from non-rendering encodings to their coresponding HTML entities. My favorite example of this is the m-dash vs. n-dash scenario. Basic ASCII only has 1 dash and it's a short dash. Word does this lovely thing where if you put two dashes end to end "--" Word will convert the two short dashes into a longer m-dash —. If you were to copy and paste that m-dash you'd find it coming up as an odd character when you send it because its not base ASCII, or it might be represented--in a best case scenario--as a short n-dash, which may look odd. The corresponding proper HTML code to generate an m-dash is — and this often times has to either be done manually or you should be checking your code before going into production with an advanced tool such eDesign Optimizer which leverages the power of HTML Tidy, a W3C developed tool as part of its intelligent QA Process.

So watch your code, close your tags, check your indentation, Tidy it up, keep it clean and hopefully, with some luck, your code will render as you intended with no undue surprises.

Cheers!
Len Shneyder
Director of Partner Relations
& Industry Communications