Steps to take to avoid HTML email rendering issues

It would be nice to avoid these HTML email rendering issues forever but that’s not going to happen anytime soon. There are steps we can take when building HTML email templates to ensure we don’t break any HTML tables which leads to these rendering issues. By following the steps below you will minimize the chance of you experiencing these rendering issues.

Step 1).

Developers are always screaming about this one. “Keep your code tidy” we can do this by indenting our code and stacking it neatly so we can maintain our work in the future or others can use our templates etc. I like to indent my code with 4 spaces, you can set your indent to as many spaces as you wish and all decent text editors will have a feature to adjust this.

Sometimes we may get lost in the HTML or we have been sent an old HTML email template (to fix) where the HTML is not indented correctly which will make it quite hard to maintain or fix rendering issues. We can use an online tool to indent our code correctly allowing you to pick how many spaces you want your code indented by this online tool :- http://www.freeformatter.com/html-formatter.html

Once your the badly formatted HTML code has been put through the HTML formatter tool above you will be able to scan through the HTML alot quicker and spot any errors alot quicker!

Step 2).

After the development of your template it’s good practice to run your HTML code through the W3C validator. Yes this can be used for email too, alot of the errors we can ignore but this validator will pick up miss placed tr & td’s and so on. You can access the W3C Validator at :- https://validator.w3.org Simply paste your HTML code and click validate.

Step 3).

Creating a check list will certainly cut back on your testing time and will allow you to avoid the most common HTML email rendering issues you may face. We can tick check list’s off as we go and then refer back to it when it comes to QA time. I like to use Asana or Google Spreadsheets for my checklists.

Step 4).

In a fast passed agency environment it’s probably worth taking a good look at the brands your working with a creating master templates for each. These master templates can contain things like a style guide, master HTML, (which includes a range of panels you use for the particular brand on a regular basic. You can even go one step further a separate these panels into there own files naming them correctly so there easy to scan for) images folder, master layered PSD, Brand checklist and so on.

The reasoning behind having a master template for your brands is that the whole team can use this and learn it with ease, all panels have been fully tested so will make for easy copying and pasting between templates. It’s just generally a great idea and works well for teams that don’t have a strong understanding of HTML.

Step 5).

I like to use the Brackets coding editor by Adobe for the main reason of having Live Reload built in and ready to go. Other coding editor’s allow this to but require you to install plugins to use such a feature. Live reload will automatically listen for changes to your HTML file and update them in the browser in real time. This certainly speeds up development time by being able to see your code come to life in real time.

Another added extra i like to put in place when developing a HTML email template is to highlight ALL tables and tds using the border CSS property. By doing this it will allow us to see the table structures we are creating, this also comes in handy when trying to solve HTML rendering issues within a template.

Add the following code to your style tag :

Please Note : Be sure to remove the above CSS when you template is ready for send, keeping this in and setting the px to 0 will still show the outlines in a few selected email clients so make sure you remove this before sending. This might be one for the checklist if you choose to use this!


Glenn Smith





© 2017, All Rights Reserved - Glenn Smith