Dos and Don’ts of HTML Emails
Do: use a table layout
Using tables for the layout of the template allows the email to display correctly in all email clients. Even though the table layout can be called a bit outdated, it is the main way of creating emails.
Do: use one-column template
The simplest layout to implement with CSS is the single column layout. The email blocks will be placed sequentially under each other.
Nowadays, many people use this kind of layout as it looks great on all devices and screens, especially on mobile. It also makes it easier to read even a very long email, which allows you to make the layout more flexible.
Do: styles right in the code, not in separate blocks
There is support for styles in <head>, but there are email clients that still do not. Thus, it is much better to stick with inline CSS. The difference is that inline CSS is the styles that are written in the style attribute for tags, while inline CSS is a separate tag in the <head> of the email.
Do: media queries
With media queries, you can create a responsive layout. They allow you to view your email design with customized fonts, images, and backgrounds from mobile devices. This layout adjusts to the screen resolution and browser window, changing the email width, images, and text sizes if necessary.
Media queries limit the layout’s width, and when this value is reached, a different design is applied. Media query styles can also “rewrite” existing styles for different devices and hide information that should not be displayed on those devices. To do this, add !important to the desired selector, and then your style will take precedence when displayed.
Do: optimize for Retina screens
Now more and more people are using devices with high pixel density displays: iPhones, MacBooks, iPads, etc. To make all images look clear on these screens, you have to optimize the pictures for them. Use images that are twice the size of the layout.
One of the easiest ways is to prepare the original image in 2X size and split them in half in the editor. For example, to show a 200x300 px photo on a screen with a higher pixel density, you need to upload a 400x600 px photo and resize it using CSS attributes or HTML.
Do: absolute addresses
When working with images in email, you must use absolute addresses. Then, all the images will be displayed correctly in the inboxes. This means that you need to write the fully qualified domain address, directory, file name, and extension. Keep in mind that if the address does not contain a server or protocol name, then this is a relative address.
Do: correct character encoding
The character encoder helps ensure that special characters do not appear as squares, diamond characters with question marks inside, or just question marks.
Do: adaptability
Email marketing is one of the most effective promo channels. With the popularity of mobile devices, many designers and developers have started making emails for mobile displays as well. This is why the single-column layouts we wrote about above are recommended for modern email design.
Do: comments in code
We highly recommend leaving comments in your code. Firstly, the comment left can always be helpful and work as a hint. Secondly, this way you can temporarily disable the code if it is inconvenient to delete it and then restore it. If the template will need to be suddenly edited in the future, which happens quite often, so it will be clear what kind of block it is.
Do: testing
When it comes to email layouts, testing is a must. There are still no clear HTML standards for email. It would be best to make sure that the email looks as intended to all email clients and on all devices.
Code validation
Before you start testing the layout, you need to be sure that the code is valid and does not contain unclosed tags, because this can be the cause of your email breakage. To do this, you can use the Brackets editor with the HTMLHint extension, which will immediately report it by specifying the code line number and the problem tag in case of an error. You can also use Markup Validation Service that checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc.
After you are convinced of the “cleanliness” and correctness of your code, you can start testing your HTML email template.
Automated testing
You can test the layout using special services that emulate the work of different email clients. For example, we can highlight services such as Litmus and Emailonacid.
Manual testing
Your email can be sent to a pre-prepared test list of addresses of various email providers. Don’t forget to check the web and mobile versions on different devices and in different email clients.
If everything works well, then the email newsletter can be sent to your potential clients with a clear conscience and pride for the work done!
You can read more about email campaign management in our blog.
Don’t: images with different clickable areas
Many email clients do not recognize one image that leads to different URLs (Image maps). To get it right, cut your images into several separate images, and link each to the desired web page.
Don’t: Designer fonts
Fancy fonts will not display correctly in many email clients. Typically, you can use standard fonts. But it’s better to define a fallback font if your email client does not recognize your chosen one (resources such as What The Font ?, FontShop, etc. may help with that.)
Don’t: Heavy & Complex CSS / HTML
We advise you to forget about JavaScript, Flash, HTML5, and CSS3 — the extended code is not yet combined with the layout of the email.
Don’t forget about the weight of the emails as well. The size of your mail template should not exceed 102KB. This is the point where Gmail can crop emails.
Conclusion
The email layout is associated with certain rules and constant testing. We have outlined the most common bans and requirements for HTML email coding, so now you’re a few steps closer to starting creating HTML email templates. This knowledge can and should be used for your email marketing strategy.
Still have questions and concerns? Don’t hesitate to contact us for professional assistance and services.
EmailSoldiers can help you with:
- CRM marketing
- Email newsletter design and layout
- Content marketing
- Email marketing for e-commerce
- Lead generation
