HTML Email Design Guidelines

Owned by Former user (Deleted)
Last updated: Apr 29, 2014
4 min read

Email Layout Guidelines  (pdf)

When designing your own template, please keep the following specifications in mind:

  • Designed HTML email templates should not be wider than 700 pixels. Many email programs are unable to display wider templates properly.
  • Use basic HTML 4.0 when customizing your own email message. The following are discouraged: scripting, embeds, frames/iframes, image maps, and attachments (i.e. no important content in images only).
  • Table layout is heavily preferred over using Cascading Style Sheets, which some email clients ignore.  Nested tables and advanced formatting such as colspans and rowspans can also be used, but using a stacked table structure is recommended. This type of structure is more stable across all email programs. Please test your template by sending it to yourself (using as many different email accounts and email programs as possible) before sending to actual recipients.

Email Formatting

  • Inline style tags can be used to format text, however, using regular HTML font formatting is recommended for guaranteed universal acceptance. External style sheets are prohibited by nearly all email programs. Using inline style tags in the header of your HTML template is also prohibited by most email programs, as HTML emails have no HEAD or BODY tags.
  • JavaScript is prohibited. Most email programs will not accept it.
  • Forms are not recommended, but can be used if the mailing doesn't include recipients using AOL®, Hotmail®, MSN®, or people who use MS Outlook® 2007. If absolutely necessary, the form should be very basic and not employ JavaScript.
  • Use absolute paths for images. Images should be 72dpi. Define both height and width to prevent distortion of your image. Do not put important content in images only.
  • Flash or other plug-ins should not be used within an email template. If plug-ins are required for your email campaign, consider directing the user to a hosted landing page to view the plug-in content.
  • When designing plain text emails, wrap the text after 65 characters so that it renders well in text-only devices such as PDA's, BlackBerries®, phones, etc.

Email Content

  • All featured creative like banners, navigation bars and content that has a high priority should appear near the top of your email so that it will be displayed in preview panes, such as in many versions of MS Outlook®. The average measurement for this area extends down to approximately 300 pixels from the top of the email.
  • Featured content should also appear "Above-the-Fold" when using a web-based email program, like Gmail™ and Yahoo!®, so the recipient will not have to scroll down to read more content. The average measurement for this "Above-the-Fold" area is approximately 420 pixels in height starting from the top of the email.
  • The entire template design should be encased in a 1-pixel border. This will "seal-off" the template and present it as a unified design element to the user.
  • Consider adding more organic shapes into your template design. Email creative is usually displayed through applications which have very rigid, box-like layouts. Adding images with people, or designing with curves will make your template visually appealing to attract the recipient's interest.
  • Make sure that the featured content in your email exists in HTML text, not only images. Most email clients do not display images by default, so the user won't be able to see any content that's in an image unless they take action to turn on the images.
  • In order to comply with the CAN-SPAM Act, an unsubscribe link must be available within your email message. eMail Networks will automatically add the required unsubscribe link to your email message before it is sent to your recipients. Be aware that it will be added to the bottom of your template. If you wish to preview your message with the unsubscribe link included, send a test email message to your email account prior to sending it to your contact lists.

Trouble Shooting email problems

  • If you notice strange spacing in Outlook with images, and you use a spacer pixel, make sure the spacer pixel is 10x10 and transparent.  Outlook will only space a 1pixel image 64 pixels over.
  • If images are being resized to their original size in Outlook, you'll need to save the image with less than 96 dpi resolution or save the image file itself with the dimensions you would like to see in your email message.
  • If "Sliced" pictures are showing incorrectly in gmail or other free email clients (with excess padding) use style="font-size: 0;" in your table or <center>
  • Also, make sure to use <img src="#" style="display:block;"> in your images if you continue to have that problem with gmail or other free email clients
  • Also, Outlook 2013 requires that you add a line-height to the table cell containing the image if the height of the image is small.  For example, <td style="display block; line-height:10px;"><img ... style="display:block; height:10px;"></td>
  • To remove the "dark blue" border that you see surrounding a hyperlinked image, set the image border="0" to hide it
  • If background colors are not appearing properly in some email clients, check to make sure that there are no extra spaces in a bgcolor="#000000" tag or use the syntax: style="background:#000000;"

Email rendering issues and fixes for Outlook Web App (OWA)

  • If extra padding is still added to the bottom on images in Outlook Web App, add this style to the top of the body:
 <style type="text/css">/* FIX FOR OWA */         
.bdyItmPrt IMG {display:block; !important}
.bdyItmPrt table IMG {display:block; !important}
.bdyItmPrt {  font-size: 0; word-wrap: break-word; }</style>

Text resizing issues on mobile (iOS) devices

  • If text is being resized on iPhones or iPads, add this style to the header of the email to prevent iOS from resizing the text
<style type="text/css">
	body {
    	-webkit-text-size-adjust: 100%;
    	-ms-text-size-adjust:none;
	}
</style>