How to Code Pixel-Perfect Emails

By on September 6, 2019


Image courtesy of Pexels

Emails have been around for a long time, but it has changed a lot in the past few years. From plain text messages, they have come a long way and evolved into highly personalized and targeted messaging with supremely interactive designs. While getting these advanced emails in your inbox sounds exciting, coding a pixel-perfect email including all the latest trends and following all the best practices can be a daunting task.

It is the digital age and the customers of today seek for utterly relevant and promising offerings from brands. Be it a simple banner ad or a product altogether, they look for what meets their demands the most and gives them the most value. Hence, to keep the customers glued to their brand, businesses need to ensure their marketing activities are flawless and can draw maximum engagement. Businesses using email marketing to attract customers and project their offers need to make sure they do it the right way. And it all starts with designing and coding the emails right.

So, if you are an email marketer wondering why your emails are not yielding the desired results, you might want to check your email coding practices. Here is a guide to craft pixel-perfect emails for developers new to email.

Know your users’ email clients

The first and foremost thing you need to keep in mind while coding emails is knowing where your audience is and what email clients they use. Email subscribers use various email clients and hence it is necessary that you test your emails across all major email clients and ensure it renders well. If most of your subscribers use Outlook, keep the coding considerations for Outlook in mind. Make a list of the email clients you must test for, every time you send emails.

Use tables for layout

Before creating your emails, you must decide what kind of layout you want to use. Single column and two-column layouts work best for HTML emails. Single column emails consist of a header, a body with content, and a footer. These emails render and display well on mobile devices and small screens. On the other hand, two-column emails have a wider body section.

To ensure the content fits well in the layout, use HTML tables and divide the email space into rows and columns. HTML table layout will render well, irrespective of the email client and device. Use ‘td’ tags to control and adjust the table’s display. Use different table tags to display the header, centre columns (single or two-column) and the footer. This approach will make sure the content and images in your email are displayed and rendered well.

Add inline CSS styles

Use CSS for styling your emails. Once your layout is in place, code your emails using inline styles such as ‘table’, ‘p’, ‘a’, ‘td’, ‘h’, etc. Declare the CSS ‘style’ tag in the HTML body tag instead of the head tag. Use the font styles and heading styles in the ‘td’ tag, next to the content and ignore putting them in the ‘p’ or ‘a’ tags. Set the width of your email table to 98-100%. The best practice is to keep the CSS in the head as well as inline.

Do not ignore Lotus Notes and Outlook 2007

Lotus Notes, Outlook 2007 and Google mail have less support for CSS and they come with their own coding challenges. While coding for Lotus Notes and Outlook 2007, avoid using the ‘style’ declaration in the ‘head’ tag. Notes might delete the ‘style’ tags. Therefore, include inline styles within the ‘table’, ‘p’, ‘td’, ‘a’ tags. Lotus Notes also converts images into their proprietary formats. Hence, the best practice is to use links to images stored on a remote web server instead of images. For both these email clients, keep your emails left-aligned, as centre aligned usually do not work.

Make your emails responsive

According to a report from Adestra, 61.9% of all emails are opened on mobile phones. It is, therefore, inevitable to design emails for mobile devices and tablets. Make sure you code responsive emails that can easily fit to any screen size and platform. An easy way to do this is to use the CSS @media definition to alter the table ‘td’ cell sizes and email font sizes. Place the @media tag right below the body tag and mention the screen width and font size for the respective device or screen size. Defining the @media CSS in your email code for all major devices and screen sizes will scale and display your emails perfectly, when rendered.

Avoid relying on images

Email clients block images by default and at the users’ end, ask for permission to display the image. Most users by choice or chance never enable images in emails. Hence, you need to be mindful while including images in your emails. Avoid using them in the first place, and if you really need to use, avoid adding any key information in the image. The key message that you wish to convey to your users must be in simple text. Images should be added to only enhance the look and aesthetics of your email. Moreover, when you include images, make sure you include an alt-text without fail. Describe the image in the alt-text so that even if the image does not get displayed, the message is still conveyed via text.

Keep your email file size under 100kb

Your emails pass through various spam filters before it reaches your subscriber. And, spam filters restrict and delete bulky emails. It is, therefore, necessary to keep your emails light and under 100kb file size. Moreover, Gmail clips emails that are longer and over 102kb. Hence, keep your emails short and crisp and avoid using bulky media files and attachments. If your content is too much, try keeping only a part of it in the email and add the remaining information in a detailed landing page and link it in the email. Remove any unnecessary styles or code to ensure the email reaches the end user.

Include pre-header text

A pre-header text is a snippet displayed after the email subject line when viewed in the inbox. This text is like a sneak-peak into what is inside the email. This text can also be an extension of the email subject line to entice the users to open the email. Crafting a good pre-text can make a huge difference in the email open rates. Avoid using hard-code default pre-header text. Make sure you customize your pre-header in the HTML code it for each email.

Avoid complex HTML/CSS

Email clients do not support Flash and JavaScript in emails. Hence do not use these or complex CSS or HTML. Codes such as CSS3 and HTML5 have limited or no support for various email clients. Hence, make sure you keep your code simple and test it thoroughly before hitting the send button.

Test thoroughly

The most important part of coding an email is testing it rigorously. Each and every line of your email code needs to be tested thoroughly on multiple platforms, devices, email clients and screen sizes. Testing is an inevitable part of your email marketing campaign, and hence you need to invest and focus more on this area. Ensure the email code renders well in all possible conditions before you blast the email to all your subscriber lists.

Wrapping Up

Given that all the above-mentioned guidelines are followed, your emails are sure to render in your subscribers’ inbox without glitches. Build a basic code following all these mandates and you will be able to reuse the code for all your future emails. This way, you will be able to code more efficiently and effectively.

About Chris Donald

Chris Donald is the Director of InboxGroup, A professional email marketing agency that specializes in providing result-driven email marketing services. He has worked directly with Fortune 500 companies, retail giants, nonprofits, SMBs and government bodies in all facets of their email marketing services email audit and marketing automation programs for almost 2 decades. He enjoys sharing his distinctive thoughts and insights into email marketing best practices at his blog.
Close

Like what you're reading?

Like us on Twitter, Facebook or Google+ for more!