The most common HTML email rendering issues

We’ve all been there! (Email designers & developers that is) Stuck on that one HTML email rendering issue that ends up driving you nuts for the rest of the day/night.  In this post i’m going to cover the most common HTML email rendering issues we email designers & developers face on a regular basis.  By noting this down i hope to help others out who are stuck on a HTML email rendering issue.

Text not rendering at full height

If your text is not rendering at the correct height in a majority of email clients you have probably not set a line-height on your surrounding td.  I always make sure my line-height is set to 6px more than my font-size, this will give a nice amount of spacing between the text making it much easier to read and of course rendering your text correctly in all email clients.

Content not aligning correctly

If your content is not aligning correctly its probably because you haven’t added align=”” to your surrounding td.  Some email clients will display your content all over the place if you don’t set your alignment on your surrounding td.

Yahoo align center

Yahoo usually makes parts or the whole email align to the left. Just put align=”center” on the parent td to fix.

Images not rendering at correct size

If your images are not rendering at the correct size you probably need to set your width and height on the img tag.  Also make sure your surrounding td has no font-size or line-height set as this can cause extra havoc.  It’s important to set some default styling on your img tag.  The following img tag works great providing you add your images correct width and height.

Outlook 2013 is adding extra spacing to my spacers

Crazy i know Outlook(2013) likes to add extra spacing to your spacers to stop this we add the following code between our td’s. This will stop Outlook(2013) from adding extra space to your spacers. This doesn’t happen all the time but a good tip to know should you ever come across it in your tests.

Responsive Gmail Support

Unfortunately Gmail app doesn’t support media queries so is not responsive.  We force this client to display the desktop version using a spacer.gif at the top of the email and tell it to hide on everything that supports media queries.

If you want to support Gmail app responsively you can follow the hybrid method to archive this. You can find an example of the hybrid coding approach over at Action Rockets blog :

 Windows Phone 8 Support

You can get your media queries to work on the Windows Phone by adding the following meta tag to the head tag of your template.

Messaging Clipping

Sometimes your full email might not display in litmus tests. This is due to message clipping, once your email code reaches 100KB+ it will clip your email and only show what it can.

Gmail clips message at 100KB & iOS at 20-20KB (Without WIFI).

Firing blanks in outlook?

Do not add HTML comments in between your style tag, this will stop Outlook clients from rendering your whole template.

When your responsive CSS just wont cut it

Are you having trouble getting a certain panel to display just how you want it to on mobile, sometimes with complex panels its easier to add a mobileOff class to your table and create a mobile block below. This mobile block will display as a whole new block on mobile allowing you to re-create the panel just how you need it to look for mobile. Here is an example of the mobile block.

You will need to include the following CSS in the style tag of your template for this to work.

Sup code

Sometimes we need to display © ® symbols within our copy after certain words. To get this to display slightly above the text we can use the sup code. A simple HTML tag with some in-line CSS to get our symbols to display just how we need them to. Give it a try :

Always use unicode charecters

HTML email clients don’t understand plain typed out symbols such as £ $ * so we need to replace these symbols with unicode. You can grab these unicodes at :

Glenn Smith

© 2017, All Rights Reserved - Glenn Smith