HTML Email Design Guide
The Complete Email Design Guide
You may know how to create a modern and accessible web site already. You know the rules, latest options, etc.. However, can you really take all that knowledge and use it for email design? The short answer is no. Due to the variety of email clients and limited support of CSS in many email clients there are some very specific rules & dos/don’ts when it comes to email design. This guide will help explain the main points that you should be aware of to ensure your email is displayed properly.
Before we get started…
- Email design is NOT web design
If you care about W3C standards, use the latest in CSS, etc.. you need to forget all of that when approaching email design. Basically you can think as if it is year 2000.
Layout
- 650px or less design width
The general rule for email size is to keep it 650px or less in width. This allows the email to display correctly (overall) in most of the email clients and display configurations. - Simple layouts are best
With email design simple is better. If you try to do a complicated design you will encounter a lot testing and debugging email client issues. If you are looking to complete a more advanced design be ready to use a lot of tables and to set a good amount of time aside for testing. - Use basic HTML tables
To create the overall layout you will need to use standard HTML tables. CSS floating and layout techniques will not render properly across all the email clients. - Be careful with table cell padding
Outlook will take the padding from any cell in a row and apply it to all of the cells in the row. This could result in some visual changes that you do not want. You should try to either apply the same padding for all cells in a row OR place an inner div or table (that has padding) within the cell that you would like to have padding. (More Info) - Avoid using colspans=”” in your tables
Some email clients do not fully support those and others will have display issues for the other cells if you have a colspan.
CSS
- Do not use external stylesheets
They will not work in a lot of the email clients and you should be including all of your CSS using inline CSS within your HTML. - Do not use CSS classes – always use inline CSS
Many email clients do not support CSS classes. Instead of declaring CSS classes you should use inline CSS. An example would be <div style=”color:#cccccc;”>content</div> instead of <div class=”cssclassa”>content</div> - Don’t use CSS shortcuts
CSS allows you to normally set properties in groups. Such as style=”font: 12px, Arial” Instead of grouping such attributes you should set each part individually. Such as style=”font-size:12px; font-family:Arial” - Avoid using CSS float or position options
Some email clients will disregard both the float and position CSS options. Try to use tables instead.
Images & Video
- Use absolute image source URLs
Instead of including an image such as(<img src=”img.gif”>) you must include the absolute URL to the file such as (<img src=”http://site.com/img.gif”>) - Always use alt tags (<img src=”http://site.com/img.gif” alt=”Company ABC”>)
Most email clients disable images by default. So unless you have alt tags your subscribers will only see a blank box. With an alt tag your subscribers will see the text you put in the tag. - Do Not Embed Videos and/or Flash
It is not a good idea to embed videos directly and/or flash into your email. Many email clients will not support such code and many spam & virus detection programs will flag your email as spam/malicious. Instead of embedding your video/flash into your email take a screenshot of what the video of flash player looks like and embed that. When they click on it you can have the video/flash open in their browser. - Animated GIFs are not fully supported
Ask yourself whether you really need an animation in your email. While most email clients support animated GIFs, Outlook 2007 does not. Email clients that do not support animated GIFs will likely show the first frame of your animation sequence. - Be careful with spliced images
If you have a larger image that is spliced and placed into your HTML using table cells or img tags right next to each other you will need to test thoroughly. Some email clients may add extra space between your images and cause your email to look bad. - Avoid using images to help with your layout
Some people use 1 or 2-pixel images to help align items within their layout. Some email clients/filters will think that is a potential read/open tracking image and penalize the email for that. - Test your email with images disabled
Since most email clients show emails with images disabled by default it is very important you check to see how your email looks with images disabled. - Watch your files sizes
Just as with regular web design you want to be aware of image file sizes for your email. Try to keep them low to ensure they will download quickly for your subscribers. - Image Maps
Images should be coded as single images. Avoid images at all cost. These maps based on browser operating system and ESP. Shift causing issues for both users and design team. Try to keep them low to ensure they will download quickly for your subscribers. - Incorrect Format Sample
- usemap=”#Map3″
- <area shape=”rect” coords=”18,257,236,332″ href=”http://www.sampleweb.com/” alt=”sample text”>
- Correct image coding for HTML Images
- <a href http://www.sampleweb.com/”><img src http://www.sampleweb.com/images/sampleimg.jpg” alt=”sample text” style=”display:block” width=”700″ border=”0″></a>
Image specs for your own HTML mailings
If you’re including images in your freestyle HTML mailing, follow these guidelines for email-friendly coding. (If you’re not HTML-savvy, use the drag & drop editor instead.)
Image specifications for email
Image size: Header graphics should be between 600-700 pixels wide, with a proportional height (a general guideline is 100-200 pixels). For images within your mailing’s content, we recommend 480 x 480 pixels or smaller. Keep in mind that the larger the image, the greater the chance an email filter or firewall will block the image. (If you have one large image, we recommend building a slice-and-dice, which involves slicing the image into smaller images and coding them together in an HTML table to create a seamless-looking image.) In addition, some servers will reject or filter an email if the content is too image-heavy so make sure to include a balance of text and images.
For the best experience on a retina display: you’ll want to double the size of your image; for instance, if you have a 640px header graphic, you’d upload a 1280px version.
File type: Save your image as a .jpeg or .gif format before using it in your code.
Color profile: Your images need to be in RGB color values, as opposed to CMYK color values. CMYK color values are for print and won’t render in an online environment.
DPI: Set your images to maximum quality with a resolution of 72dpi.
Image-editing tools
You may have the Adobe Suite for image editing, but if not, here are some helpful (and free) online tools:
Image hosting
Just like images on a webpage, you’ll need to publicly host any images you include in the mailing in order for them to correctly display. Be sure to include the full link – no relative links – when referencing them in your code. Here’s an example of an absolute link:
<img src=”full URL here” alt=”My Image” width=”480″ height=”480″ border=”0″>
By full URL, we mean it must be appended with http:// or https:// rather than just www.
If you’re not able to host images on your own website, you can store them in the Image Library in your account. Or, consider using a free service or nearly-free service like Dropbox or Amazon S3. We offer image hosting as well, limited to 45 days from the last drop date of the creative.
Image maps
An image map is a list of coordinates relating to a specific image, created in order to hyperlink areas of the image to various destinations (as opposed to a normal image link, in which the entire area of the image links to a single destination). For example, a map of the world might have each country hyperlinked to further information about that country. The intention of an image map is to provide an easy way of linking various parts of an image without dividing the image into separate image files.
Backgrounds
- Background images are not fully supported
If you are using a background image keep in mind that some email clients will not show them. If you still wish to use a background image use the HTML background options instead of using CSS to declare a background. - Full body background colors
Many email clients (such as Gmail) do not show a background color that you set for the main body (<body> tag) We suggest if you are setting a background color in the body tag to also have a wrapping div with a background color that surrounds your content. This way even if the body background color is not supported you will have something pretty similar shown.
Miscellaneous
- Do not put anything above the opening <body> tag
Anything you put above the body tag will likely be stripped and not used. - Do not include javascript
It is likely that it would be stripped in most email clients and some spam filters may detect it as malicious code. - Avoid Microsoft Office like the plague
The HTML generated will almost guarantee issues. Additionally, when you copy and paste from Office you will be pasting in their formatting and will likely have design issues.
Helpful Tips:
Because there are a multitude of email clients, there are no Universal Rules. However, there is a general rule of code for html when designing creatives for email versus a website: For HTML email creative please keep the following in mind…
- Only use basic HTML and images. Avoid javascript and forms.
- Use dynamic images for real time content.
- Put all styles and CSS inline in tags. Do not link to separate files or insert styles in header.
- Use full CSS definitions and no shorthand and write each CSS property separately.
- Design and test with images removed.
- Avoid background images. They are not always supported
- Design for a width of 600px or less.
- Stick to web safe fonts
- Use tables to control layout and not floating positions.
- Avoid animated gifs, videos.
- Avoid using PNG files and only JPG and GIFs.
- Avoid image resizing. Images may not display properly. Use images that are sized properly and do not need resizing.
- Do not use images that overlap and require repositioning.
- Avoid using <h1> to <h6> and <p> and use only <td>, or <div> to style text.
- Inline elements (<a href=”#”>, <span>, <strong>, <em>, etc) can’t be turned into block or inline block elements.
- The <OL> and <UL> tags do not work on all email clients. Sometimes the spacing between the bullet and the text is missing, in other cases the bullets are not present at all.
- When you wish to hide an element on desktop you can’t use display: none; as it is not supported by all email clients.
Although we are well versed on Email Creative and Design, we are not a design agency. It is important if you use an Agency to make sure they are coding your creatives for an email that is mobile responsive and not use code that is for a webpage that is mobile responsive.
It is our #1 goal to make sure you have a successful campaign, it all begins with a great creative.