Designing an email template requires imaginative coding skills. When building a web page, you can use CSS, HTML5, Javascript, and a myriad of other languages that can be used to create fancy layouts and graphics. When designing email templates, however, you have to take a step back to the proverbial stone age of coding, where basic font and style tags reign supreme, Javascript might as well not exist, and embedding things like videos or forms is risky. However, we’re here to help! In this post we arm you with knowledge about what really works and what doesn’t in HTML email design.

So why is email template coding different from the rest? Well, for starters, there’s not an established standard for rendering email code, so various email programs (like Gmail, Yahoo! or Outlook) can and will render the same HTML code differently. Sometimes the changes are subtle, like the text spacing will be off; other times the changes are quite drastic, where an image or an entire section is moved around or partly cut off. Keep in mind that most email programs use an outsourced HTML rendering engine, because building and maintaining their own would be extremely time-consuming and not cost-effective.

What can you do to ensure your email design is preserved? First, if you’re not super comfortable with HTML code, you should stick with a graphical, aka WYSIWYG (what you see is what you get), editor for designing your templates. As enticing as it may be, don’t attempt to design your email using a program like Dreamweaver, because it generally uses a lot of external CSS (it was designed for creating web pages after all). This brings us to the first bit of advice:

Use in-line styles

In-line styling is a must when it comes to designing HTML emails. Of course, adding external CSS is way more efficient and time-saving, but since there’s such limited support for that in the different email programs, styling your elements in-line is the best way ensure that your intended design will display correctly. If you want to see what types of CSS are currently supported in the popular email programs, take a look at the Email Standards Project website, as they have a comprehensive list of which CSS (Cascading Style Sheets) properties work reliably and which ones don’t. Bottom-line though – code your emails like you would an old webpage from the ’90s. This means using basic HTML tags and in-line styling.

Create tables

This may not be as obvious, but a basic HTML table layout is the best way to structure your email template. Div layouts typically rely on CSS and a few other attributes that don’t have great support by most email programs, so stick with tables – it may be more cumbersome, but it’s much more reliable. The width for your main table should be no larger than 600 pixels, just so your recipients won’t have to scroll right and left to view the entire email. Don’t set the height, as the content inside will determine that automatically. Also, try not to get too fancy with nesting tables within tables. Having one large table and a couple smaller tables within it is okay; however, too many nested tables may cause your email structure to look a bit… wonky …in certain email programs. Of course, you should test your templates in several different programs to make sure it looks consistent. If you don’t have, or don’t want, to manage multiple email accounts, you can also use online email testing services such as Litmus or Email on Acid.

Avoid embedding videos and forms

Many people want to feature videos in emails, add forms or include an embedded Facebook ‘Like’ button. Sadly, most email programs won’t be able to play the videos or read forms properly. Videos require plug-ins that email programs don’t support, and forms require running scripts that could interfere with the programs’ own scripts. The best thing to do is simply include a link to where the video or form is hosted online. For videos, take a screenshot of the video and upload that as a JPEG image, then link to the video page. It may not be the solution you want, but it’s the best way to ensure that the recipients can see what you want them to see.

Keep it simple

This point cannot be stressed enough. Email design is not always easy, but if you stick with a basic table layout and pretend that you’re designing an older web page, you should have a much greater degree of success. Try to maintain a higher text-to-image ratio, because email programs look for that and you don’t want your email to end up in spam due to too many images. They also look at the overall HTML character count, so try to limit the template to a few articles, and don’t throw in a bunch of span tags or spaces that just add unnecessary characters.

If you want a nice overview of email HTML Dos and Don’ts, check out this help article or our HTML for email guide. If you have any of your own tips for coding email templates, share away in the comments!

© 2013 – 2018, Contributing Author. All rights reserved.