HTML How-To: Why Comments aren't Just for Commentary

Mark Bundle | Campaign Manager

You’ve spent hours putting together your latest html masterpiece, certain that it’s going to boost sales/generate an amazing ROI/drive people to your site by the bucket load. Go you!

So now you’re ready to test your email in the wide outdoors to make sure it looks fantastic no matter where it lands. Whether you’re using Contour’s inbuilt rendering tool or another option, when the results are out, it’s a catastrophe! It’s looking very strange in all sorts of different ways. The main culprit probably being Outlook.

When I say probably, I mean mostly in Outlook! Much like Raymond, nobody really loves Outlook…

Enter the hero of the piece…

You’ll find plenty of guides across the internet that will show you how to deal with the various little quirks of the different email rendering engines, such as here and even from one of our own here. Many of these issues can be fixed with a piece of HTML functionality. It’s often ignored, and certainly underappreciated, please welcome, the humble <!---Comment -->.

Comments are generally used to annotate a piece of html code, letting subsequent users know where a section opens and closes, why a piece of code is being used, or just to ensure that there will be some consistency throughout the file.

However, the chances are that if you are familiar with html email design, then you will have seen this more than once:

 <!--[if (gte mso 9)|(IE)]>Your Code Here<![endif]-->

This conditional comment allows fixes for specific versions of Outlook, without the active code being affected in other mail clients such as Yahoo or Gmail. This is because it is a comment designed to be read and acted on by a machine, not just a human.

Other factors impacting design…

Other things to bear in mind when making sure that you email appears as you want:

  • Am I using elements which an email client doesn’t support (i.e. background images in Outlook since 2007)?

  • Does the look of my email rely on media queries (which don’t work in Gmail)?

  • Have I included graceful fall back options for my email (such as static images with play symbols where an embedded video won’t play)?

  • Am I using web safe fonts to ensure consistency across all email clients?

  • Is my plain text version up to scratch in case this is delivered?

Summary

HTML emails are like glass, incredibly fragile and easy to break. Using comments and other available coding fixes, you can toughen your emails up and make them look exactly as you want, wherever your subscribers want to receive them.

Don’t let your amazing email down, makes sure it’s looking its best wherever it goes.

Share:

RedEyeUK @RedEye UK