According to statistics, 43% of users prefer checking their inboxes on mobile devices these days. In light of this trend, it’s crucial for email clients to be both desktop and mobile-friendly. That means their design should be adapted to fit various screen sizes.
There are numerous email clients nowadays, including Eudora, Outlook, AOL, Thunderbird, Lotus Notes, Yahoo!, Hotmail, Google Mail, and many more. Each of these applications displays the same email in its own way, with its own pros and cons.
Emailing is one of the most effective digital marketing and advertising tools. It also facilitates client-service-owner communication in a particularly efficient way.
Emails generally fit into one of the following types:
Notifications. These emails are triggered when an action occurs, such as signing up for a service (email address confirmations, welcome emails), changing a password or other personal information, subscribing to a mailout, or getting system notifications (error or website maintenance alerts);
Mailouts/newsletters. These emails provide users with updates about the service or product and may also include leaflets, catalogues, promotions, greetings, event invitations, etc.;
Bills/order confirmations. These emails confirm orders and/or include invoice details for the customer.
It’s important to take into account all the peculiarities of email layouts (including responsive ones) when designing email templates. Below are some rules to help you design the most effective emails.
Email structure: basic requirements to keep in mind when designing an email
As a rule, an email’s structure contains the following elements: a header, the body, and a footer.
The header includes the company, service, or product’s logo and some navigation links from the original web page that resemble the website. These links can also be relocated to the footer of the email if they are not relevant at the top. It’s best to place only the most important elements into the header to improve the customer’s experience. Duplicating the entire main menu of the website is unnecessary, unless the menu is very basic.
The body of the email contains the information you want to convey, such as the information required for any notification or alert (welcoming new users, confirming detail changes, or providing details about system maintenance, etc.), links to full content posts (preview of new blog articles or white papers for mailouts), bill details (overview of an order confirmation or invoice), etc.
The email content should be neat and concise while still being informative. Avoid cumbersome emails by quickly conveying the most important information, providing links to additional details for those interested. Images or tables with data should be kept to a minimum and should only be used if they are particularly relevant.
The footer should comprise of copyright information, further instructions (e.g. how to unsubscribe from further emails), contact details (including social media profiles), and additional relevant links (which sometimes may be identical to those in the header).
Most emails fall under two possible formats. They are either single-column or multi-column. The two-column variant is the most common multi-column format and is widely used in newsletters or mailouts. If you choose to use this format for content arrangement, we recommend that you don’t use left or right justification of text, like in the picture below, as this can be cumbersome for the reader.
Other things to know about email formatting
Email clients only allow the use of standard (safe) fonts such as Arial, Arial Black, Gadget, Georgia, MS Sans Serif, Geneva, MS Serif, New York, Tahoma, Times New Roman, Verdana, Times, Trebuchet MS, Helvetica, etc. Most of these fonts are set as defaults on the vast majority of modern devices. We recommend not using any custom font sets for your emails. Although they may look unique, it is very likely that non-standard fonts are not supported by the customer’s email client and your email will therefore be unreadable. The font size of the main content should not exceed 14px.
Your email template width should be 600px. Elements that extend past the borders of the template are not allowed to be used. It is important to remember that your email’s content should be displayed correctly on a 600px-wide template, as well as on a template of lower width.
Most email services will not support multimedia, such as audio or video files. This type of content will be blocked so it’s best to avoid using this element during the template design stage. It is good practice to substitute multimedia for a link to the media source. As well, the use of visual effects such as shadow, text transparency, or images that create frames around an element are not allowed.
Email layouts: technical requirements and recommendations
Let’s take a closer look at the technical rules to follow when designing the layout of your emails.
Email template structure and encoding
The table layout property should be the only one used in your email templates. Your templates should contain the same structure as any HTML page (DOCTYPE, head, body, etc.). Some email clients delete DOCTYPE, head, and style from the email, but, regardless, you shouldn’t omit DOCTYPE, head, etc. in a template.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
</html>The best choice is to use utf-8 encoding. We can use table, tr, td, img, span, a HTML tags here. For work with text, b, i, br can be used. Keep in mind that Gmail deletes class attributes and id from the email elements so it is best to avoid using colspan and rowspan attributes in tables. If you want to use tables in your templates, you must mention cellspacing="0", cellpadding="0", and border="0".
The following link provides an example of the body of an email template.
Inline CSS
Your email layout should not use external style sheets.
<link rel="stylesheet" type="text/css" href="/email.css">Instead, CSS-styles should be described below the body tag.
<style type="text/css"></style>While setting styles in the style block, write -webkit-text-size-adjust:none for the main block. This will help to eliminate the problem of font size increase on iOS devices. Some email services delete style blocks from emails. As a rule, media queries are added instead and the main styles should be specified as style attributes to the tags, e.g. <style=”color: #000000;”>
Colors can only be set in HEX. Currently, not all email clients accept RGB, as well as a number of CSS properties. For example, do not use border-image, box-shadow, text-shadow, border-radius, and others [3].
Links, telephone numbers, and email addresses
Links should always have a target="_blank" attribute and don’t forget to add rel="noopener noreferrer" or rel="noopener" [4]. Below you’ll find how to insert telephone numbers and email addresses into an email.
<a href="tel:09999999" value="+3809999999" target="_blank"
style="">+3809999999</a>
<a href="mailto:exemple@gmail.com" target="_blank"
style="">exemple@gmail.com</a>You should always set the styles you want to use for the text of the links (color, font). Otherwise, default styles will be used.
Fonts
Custom fonts can be used by utilizing the rule of @font-face, but not all email clients support this feature [3]. Therefore, you should use a font from the standard (safe) list. When declaring style for the text, it is best to avoid using a font shorthand format such as 12px/16px Arial. It is better to divide this into the following rules: font-family, font-size, and line-height.
Media queries
You may use media queries in emails, but note that not all email clients support them [5]. You should always make sure that the email layout is displayed correctly without media queries.
In the case of a single-column format for text, you probably don’t need to use media queries. However, when it comes to multi-column layouts, you should stick to the following principles:
- Do not use table elements
align=”left”,align=”right”to split text into several columns. - The block that you need to arrange into two columns should be wrapped in span (including styles for different resolutions).
Even if the media queries do not work, having this structure will allow the blocks to rearrange themselves one by one and will place them in the middle. The following link provides a block example.
Javascript and multimedia
Javascript and multimedia are unsupported. All email clients block or delete this script so don’t bother with trying to include it in your email templates.
Images
For any graphical images, you must specify an absolute path. It is also important to optimize images (don’t just specify a URL to the original image). Images should always be uploaded at maximum speed and you should avoid using single-pixel images. Don’t forget to specify alt for images as well.
If you must use a background for an email, you should set the following code to the cell:
bgcolor="#000000" background="url_img" style="background-image: url('url_img')"Other CSS properties and email standards
More details about supported CSS properties can be found on the email standards and Campaign Monitor websites. A number of services like Campaign Monitor, MailChimp, emailpatterns, and Antwort provide different plans for email templates.
Frameworks which can make the email layout process easier also exist. Some of these can be found via Foundation for Emails, MJML, Email framework, and Cerberus.
Testing your emails
The last thing to ensure you include as part of the email templating process is testing. You can either manually test your templates or you can automate testing.
Manual testing is extremely time-consuming and takes a lot of effort. There are countless aspects of your emails that needing testing and, to ensure proper testing across platforms, you’ll need multiple existing accounts for everything from Gmail to Yandex to Rambler to Mail and much more. You’ll also need to have Outlook and other email clients installed.
Automated testing makes the testing process much faster. Some services (Puts Mail, Litmus, Campaign Monitor) test your email and provide reports in the form of screenshots to help you find issues.
It is also critical that you carry out spam tests, in addition to testing how your email is displayed on the various services, to make sure that your emails will get past any spam filters. Litmus allows you to see how an email is displayed on different Internet browsers. It will also analyse your code and run a spam test. However, this service is not free.
We hope you’ve found this article useful! If you have any further questions about email templating or want to inquire about what our expert team can do for you, please don’t hesitate to contact us.
Useful links
1. Mail Services Usage Statistics
2. Statistics of opened emails, using mobile devices
3. CSS Support Guide for Email Clients from Campaign Monitor
4. Target=”_blank” — the most underestimated vulnerability ever
