Email newsletters allow to embrace wide range of potential clients and communicate effectively with them. However, plain text is not always pleasant and easy to read, so most of the emails contain various graphic elements.
HTML make-up for emails is interesting, though quite difficult job. All the content has to be displayed properly on all kinds of devices and mail clients. To help you with this we’ll check all the HTML modifications to adapt your email newsletter to all devices’ screens.
Basics to code HTML email
Wide range of mail clients like desktop products like AOL, Thunderbird or web-services like Yahoo!, Gmail cause lots of difficulties for making-up emails. Besides there are lots of mobile mail applications. All of them render the HTML code differently and the quality of your message depends on usage of cross-browser and cross-platform compatibility.
Moreover, people use different mobile devices to manage their correspondence, so you have to make sure the email is not only compatible with all clients, but is also responsive and rendered properly on all screens.
So if you’re going to code emails, you have to keep up with a couple of rules. Firstly, you have to use HTML tables for better control over the make-up of the mail. Even if you’ve got used to CSS in the web, try to avoid it, as far as it may not work properly on all the variety if software. Secondly, use the inline CSS for better managing all the mail elements (like fonts, colors, backgrounds, etc.). You may use any of the inliner services, like CSS Inliner Tool, Ink: Email CSS Inliner, CSS inliner, etc.
You may upload the ready make-ups of the emails from Campaign Monitor or MailChimp to see how the HTML tables and inline CSS are used in them. While working with them you’ll notice some peculiarities, like CSS styles are determined after tag (and not between tags); CSS shortenings are not used (every value is written separately - font-size, font-color, etc.); div and span are rarely used (HTML tables are used instead), etc.
Step 1. Using HTML tables for making-up
Though web is way more progressive, email clients are not always rendering CSS properly. So to be sure your content will be displayed the way you need, it’s necessary to come back to tables that’ll allow you to structure content.
The first step for creating a make-up is choosing the template. The best variants for news, events notifications are one and two column templates, as far as they allow to put needed content into the relatively small container. Besides, one column mails are displayed nicely on small screen devices.
One column template usually consists of:
Header, containing the logo, navigation links to the parent site (for branding and acknowledgement users with the site design), etc.
Inner links, leading to the certain parts of the message.
Footer in the bottom of the mail, containing the links from the navigation in the header and small information on how to unsubscribe from the newsletter.
In two column emails there are also header and footer, but one of the columns is smaller. It consists of the links for more information and the navigation elements. And the bigger column contains the content itself. Usually emails promoting goods or services are created in such a way. They have a couple of main offers, big image background with explanations and some links.
One will have to do a good job to make this template look good on small screens.
No matter what email design you’re going to use, note, that the most important information has to be displayed at the top of it. Users will see it first after opening the message.
Here is how you may use tables for HTML messages:
- For two column templates one has to create a table for heading, a table for the central columns (or one column) with content and a table for footer. All of them have to be united into one table, a container. This approach is good for displaying images in different cells. Simple table with
tdlines for heading (withcolspan="2"in case it’s two column design), content and footer will be displayed properly on all the software (except the Lotus Notes). - Inside the table and
tdtags one may use attributes that help to control the table’s displaying. You may setborder="0",align="left"(right or center),cellpadding="0", etc. These attributes mostly help the old mail software to display the content in an appropriate form. - You may set the table border to be displayed with the
border="1"parameter. It’ll be helpful to set the content alignment properly. Just before sending you may set it back toborder="0".
Don’t hurry to say it’s too old fashioned. Sometimes, it’s the only way to achieve satisfactory results on wide range of sofrware and devices.
Step 2. Add CSS styles
Though many of the mail clients aren’t good at CSS support, it doesn’t mean you don’t have to use it. Just pay attention to these recommendations.
Firstly, use the inline styles for CSS, like . You may use table, td, p, a with style attribute.
Secondly, don’t use CSS style in HTML tag head. Put the style right after body tag. However, Google looks for any style tags and deletes them.
It’s better to set 98% width for the parent container table as far as some mail clients (like Yahoo) need 1% cushion from every side to display the message properly. You may also set the width to 95%-90% to be sure all the side elements of your mail will be displayed. Of course, the tables inside the container have to be 100% wide.
Add the information about the font style of the certain container in the nearest td tag.
Use span instead of div to add different elements.
In case you load and look at the code of mail templates, you’ll see that the parent table is considered to be the body tag.
Step 3. Testing and best solutions
The next step is testing of the email on different services. Here you may find difficulties and mistakes that’ll have to be fixed.
Firstly you may test the mail in IE and Firefox browsers. If the message is displayed properly in them, most probably there will be no problems in clients like Outlook, Yahoo, Gmail, etc. In case you may test it in IE6 it’ll show you the way Outlook 2003 will render it. You have also to test it in Safari (check it for iPhone and iPad).
After the browser tests, you may send it to the test mail addresses with the newsletter service. Use the popular mail services (or those from the clients’ list).
In case the issue with spaces between the columns appear, you have to adjust the cellpadding and cellspasing table attributes. In case that doesn’t help, you may use margin and padding CSS attributes.
If the td cell is closed right after the img tag the issue with the image alignment may appear. Just close the td tag on the same line after the img.
Avoid using JavaScript, as far as most email clients don’t support it.
In case the image is divided into parts and is placed into different table cells, make sure you’ve tested it in different clients. You may also consider the variant that the the image may be the background for a new table that contains the lines and columns of the table with image parts.
It’s better to use background attribute instead of CSS for the background images.
Save the images from the emails in a separate folder. Don’t delete them soon after the email was sent - sometimes users open them after weeks or months since they’ve received the email.
Use alt, height and width attributes for images. This will help while working with Gmail. Also the email won’t mess up if the images are not allowed.
You better use target="_blank" attribute for the links. It’s more convenient for users to open the link in a new tab, instead in their mail client.
Also, don’t use images bigger that the mail. It increases the chances your mail will be placed to the spam folder.
After that you also have to check that the email displays well in case the images are disabled. In case you have white text over an image, set the dark background, so that the text would be still readable even without images.
Also, check, whether the correct information (name instead of simple email address) is displayed in the sender field. Look at the theme field and make some corrections, if needed. Check the contact information, links and unsubscribe details in footer. Many mail sending services allow you to check the message appearance in different clients to test it before sending.
Step 4. Making-up for Gmail, Outlook 2007 and Lotus Notes
Gmail, Outlook 2007 and Lotus Notes are the real challenges for email creators. Gmail works properly with any quality of the HTML and CSS in the mails, and deletes the CSS styles between any other tags. Also CSS support in Outlook 2007 is worse than in the previous versions.
However, in case you handle all these difficulties, most probably your email will be displayed properly in other popular systems. And here are some tips for you.
- Set the background color for the
tdcell using thebgcolorattribute. - You may use
paddingto set the borders of a cell (marginwon’t work for this purpose). - In case you need to display the border of the
tdcell, remember, that Gmail displays the border of thedivcell, and not thetdone. - When you need to put a light link over a dark background, it’s better to define the font color in
tdcell and other style to it. - If fonts inside
aandpare of different size, putaintop. - To be sure the email will be displayed good in Lotus Notes, you have to follow the rule: the simpler the code, the better will be the result. Use these recommendations to enlarge the previous lists.
- Use absolute URL for the images that are saved on a web server.
- Inner links with anchors (almost) never work in Notes.
- Avoid usage of
colspanin HTML table, as far as Notes (especially the early versions) can work only with the most simple tables templates. - Set the
tdcells width, as far as Notes doesn’t align the cells according to the bigger one but uses the set value from the code. - Center align most probably won’t work in Notes, use the templates with left align.
Besides, Campaign Monitor has the list of CSS support for popular mobile, web and desktop mail clients.
Stage 5. Make-up for smartphones and tablets
Lots of people wiew HTML letters on their phones or tablets instead of desktops or web clients. And this means you have to adapt the tables to display properly on mobile devices.
You may use @media for td cells width and font size settings in HTML tables.
Here you may see the example of the style to display one column table on smartphone.
You have to put it right after the body tag, after class="email" in the table definition and class="email-content" in td cells. When this mail will be opened on the phone or in the browser with the width less than 480 px, this style will be applied.
To make-up two column templates, you have to put every column of the content into a separate column. Then for every HTML table you have to use the inline CSS for float:left; and HTML align="left" to align all the content in a column to the left. Also, you have to add class="email" definition to the table description and class="email-content" to the td cells.
Final thoughts
Though email marketing is developing, the software still requires simple code elements and structure.
In this post we tried to point out the issues of HTML mails coding. As you may see the best way to be sure in your email is to keep it as simply as possible.
You may find the source article by Tim Slavin on Sipepoint.
Here are also some useful links for you to learn more on the subject.
Campaign Monitor: The Ultimate Guide to CSS
Campaign Monitor: Responsive Email Design
MailChimp: Email Blueprints
MailChimp: Email Marketing Field Guide
Sitepoint: 5 Golden Rules For Mobile Email Design
Crash Course: Building an Email Newsletter
CodeHTMLEmail: HTML Email Code Examples Library
Vero: 26 Email Marketing Tips from the World’s Smartest Companies
SmashingMagazine: What 22 Billion Newsletters Tell Us About Designing For Mobile Email
TheNextWeb: 10 design hacks for responsive emails that don’t suck
