Although a regular email template looks and feels just like a web page, turning a Photoshop design file into a living HTML newsletter template can sometimes be a very daunting and confusing task for web developers. Not only does it require a superior level of coding expertise, but it also requires that you follow a few standard email coding rules that are quite different from modern web development standards. If you’re planning on coding a PSD mockup, sticking to these best practices will ensure your email newsletter template renders beautifully across all today’s most popular email clients and mobile devices.
Let’s get started!
Take a Mobile-First Approach:
Given that more than half of all emails are now opened on mobile and tablet devices, optimizing your email newsletter for mobile users is a necessity. To avoid disappointing your mobile users, you have to embrace a special “mobile-first” approach that focuses first on building an email for small screen devices and then scaling it up to render well on larger screen devices. Beginning with a mobile-first approach ensures that the newsletter will deliver an optimal viewing experience across all devices and email clients.
When it comes to coding an email layout, there are two approaches commonly used: one is responsive design and another is hybrid or spongy coding. While the first technique gives you complete control over the display of content across devices, spongy coding is great for email clients that don’t support media queries or embedded styles. However, since most email clients including Gmail (mobile and desktop) now support media queries, we highly recommend you use “responsive design technique with a mobile-first approach” to code your emails.
Use HTML Tables for Layout:
Even though divs, margins, and floats are preferred methods to structure the layout of a web page, coding an HTML email completely rules out this golden concept of modern web development. In the case of emails, using lots of tables and table cells is considered the most suitable and trusted way to achieve a consistent layout. The main reason for using tables to structure the layout of an email template is to provide users readability and clarity across all inboxes, regardless of what screen size or device is being used.
Since most email clients still don’t support plain CSS layouts, it would be better to utilize nested tables which means putting one table inside another. This will help you avoid coding for CSS margins and padding that are inconsistently supported across email clients. Although tables might feel outdated or unfamiliar to you when being used to structure an email layout, the fact is that they are the only surefire way to get multicolumn layouts functioning well across all mobile and desktop email clients.
Use CSS with Utmost Care:
CSS is a must for both web pages and emails, but using it in an HTML email template can sometimes be tricky for developers. While coding for a newsletter, you must make optimum use of CSS or your template can become clumsy and awkward. There are a few guidelines you must follow when writing CSS for an email:
- Bring Your Styles Inline: Since many email clients strip some of the CSS out of the <body> and <head> tags of email templates and most email clients do not support external style sheets, using optimized inline CSS is the only and best option to style the distinct elements in the tables. However, Media queries are an exception to this rule as they contain classes and are always written as top-line CSS.
- Always Avoid Shorthand CSS: When coding an email, write each CSS property separately instead of using the shorthand CSS format. Particularly avoid using three-digit hex codes as some email clients don’t even react to them. For example, use #000000 for black, not #000.
- Use Animated GIFs Instead of CSS3 Animations: Avoid using JavaScript, Flash, CSS3 Animations and other complex CSS/HTML because they are completely unsupported in most email clients. To incorporate animations into your email template, take advantage of light-weight animated GIFs.
- Make fine use of !important: While you’re often advised to avoid !important in web development, using this declaration can prove invaluable when you’re coding an email. You can utilize !important to override the styles of an email client as well as implement it in your media queries to replace default styles with your preferred ones.
Pay Special Attention to the Use of Images:
Images and visuals are undoubtedly the keys to a visually compelling email design, but using them excessively or improperly can turn your template into an unpleasant, cumbersome experience for readers. Like CSS, you have to be very careful about the use of images in email templates. There are several crucial considerations to deal with when it comes to using images in Email:
- Image Format: Avoid using PNGs in your HTML email templates as they are not supported by most of email clients. For best results, we recommend you stick to either JPGs or GIFs. Also, don’t forget to specify your images’ height and width attributes, otherwise, they won’t render well on some email clients.
- Don’t Use Image Maps: While coding your email template, if you ever need to use a single image for multiple locations, do not use image maps because they are not well supported everywhere. Instead, take the long road: slice all your images, put each slice in its own table cell, and then link each slice separately. This ensures that each link will work and download images perfectly.
- Make Your Images Retina Ready: Many devices today are equipped with very high DPI displays, like Retina and Super AMOLED, which have more physical pixels than their CSS dimensions. To make your email template look extra crisp on such devices, use images twice as large as your standard images. This will prevent any issues when scaling your email design on high DPI devices.
- Add Alt Attributes: Don’t assume that your images will always appear. Whereas some email clients block images by default, there are also users who change their settings to block images in order to reduce their data usage. Be prepared for such scenarios and add descriptive alt tags to all your images. This will give your readers an idea of what a particular image is about in case it fails to load for some reason.
- Avoid CSS Background Images: Since many email clients can’t handle the CSS background-image property or backgrounds set using CSS, you should always use a relevant solid background color as fallback such that the text is fully readable. As a basic rule of thumb, don’t rely on images alone to convey your message or deliver important information. In case you’re having a hard time coding your background images, try using this handy background image generator by Campaign Monitor.
- Always Use Absolute Addresses for Images: You may use relative image references for testing purposes, but when your email template is ready to launch, using absolute image paths is an absolute must to prevent image load failures.
Overcome Typography Challenges:
When you’re coding an email template, there are a couple of things you should keep in mind to ensure your text renders well across a range of popular email clients. Let’s have a look at them.
- Use Email Safe Fonts: Most fancy fonts, including Google fonts, are not widely supported in email so it is recommended that you stick to the fonts that are supported universally, like Arial, Georgia, Helvetica, Times New Roman, and Helvetica. In case you want to use custom web fonts, don’t forget to use fallback fonts.
- Encode Special Characters: Different email service providers use different kinds of encoding, which cause special characters like the copyright symbol, quotation marks, apostrophes and ampersand to appear as a black square or a diamond. To avoid this issue, convert any special character to HTML code before implementation.
Bonus Tips
Keep the File Size under 100KB: There may be several reasons to keep the final file size under this limit, but the foremost ones are not being caught by various spam filters and preventing some email clients, like Gmail, from clipping your emails. To keep your email lightweight, consider minimizing your code, removing redundant or unused styles, and optimizing your images using tools like Kraken and FILEminimizer.
Don’t Forget to Include Pre-header Text: A pre-header is the short summary text that is displayed after the subject of an email in many clients. Easy to code, this text plays a vital role in grabbing readers’ attention and improving open rates. Insert pre-header text into your template – just make sure not to hard code it.
Test before You Send: This is the last but mandatory step! Test your coded HTML email template thoroughly against different desktop, mobile, and web-based email clients to make sure it looks great and functions well everywhere. To test the compatibility of your newsletter against different popular email clients quickly, try these five most popular newsletter testing tools.
