HTML Email Design

Why optimize your emails for mobile devices?

If you send email newsletters, it’s likely that a growing percentage of your subscribers are reading your messages on an iPhone, tablet or similar. Are your emails optimized for mobile devices?

What this means is that getting your email newsletter to display optimally on mobile devices is just as important as ensuring it can be read in long-standing email clients like Outlook and Gmail.

In fact, mobile email client usage is soon set to eclipse both that of webmail and desktop clients, meaning that providing a less-than-optimal reading experience on the small screen may not only inconvenience a few recipients, but eventually the majority. This could lead to diminished response rates, no actions being taken by your recipients or plainly put, no ROI.

Email marketing consists of much more than just an email newsletter.

While most business owners focus on their email newsletter, and invest in a custom, branded ezine template design — they forget about the many other types of email marketing messages they will need to send and then end up scrambling at the last minute to create something in alignment with their overall brand.

When working with our designers, consider having them create branded templates for:

• Default “signature templates” for regular email correspondence
• Solo email blasts
• Special announcements
• Media releases
• Special promotions and offers
• Auto responders and follow up sequences

Once you have a professional email marketing template designed for your business, the next step is to focus on the design and formatting of your content. If your content appears unprofessional, contains broken links or missing images, or doesn’t effectively use margins or spacing, you could be sending email messages no one wants to read! And trust me, no one is going to ask you to resend your newsletter or ezine. They are just going to hit delete.

Quality content formatting increases content consumption, click-throughs, and forwards.

Here are some simple design tips and formatting tips to consider when sending emails to help make your emails easier and more enjoyable to read:

• Newspaper layout rules apply. To make it easier for readers to absorb your information and perceive your email as a faster read, break content up into several 1-3 sentence paragraphs and keep the sentence length to 15 words or less per a line.
• Use bulleted and numbered lists. If your readers are in a hurry, they will scan your through your ezine first to see if anything looks interesting. In many cases they will stop to read bulleted lists. Get them hooked with a simple, quality, interesting list.
• Keep content away from template and email client edges. Not only is it ugly to have your content touching the border of your email template, it also screams, “I don’t know what I’m doing!” Plus, subconsciously your content will be more difficult to read because the text running into the border lines or edges will be visually distracting. It’s just unprofessional looking.
• Use color wisely. Create a color palette for your ezine (based on your brand) and stick to it. Don’t go adding weird colors all willy-nilly just because you can.Use color to guide your readers through your ezine and to call attention to important elements like headlines, sub headlines, and calls to action.
• Add ALT tags (alternate tags) to your images. Alt tags are pieces of HTML attached to an image that describes what the images is. When images are turned off in email clients like Microsoft Outlook, he ALT text will be displayed in place of the image. This is critical especially if your ezine or email blast uses an image header.
• Add HTML titles to your images and links. Each image and link can also be assigned an HTML title. Adding an HTML title adds more scannable content for the email filters and bots, and can help your email marketing messages avoid getting caught in spam filters.
• Beware the “right click to download” warning. Make sure you know what your email looks like when images are turned off. Is important content missing? Can subscribers still tell that it is from you or your company? Consider keeping all information at the very top of your template HTML so even if images are turned off, your template still displays properly and reflects your brand.
• Understand the proper ratio of text to images. Reduce chances of getting caught in spam filters by making sure you have more text than images in your newsletter or broadcast. At First Direct Corp. we strive for a 70/30 split, with 70% (or more) of the content as text, and 30% (or less) of the content as images.
• Use a consistent design and format. Design your template and stick with it. Only slight updates should be done over time to keep your email marketing design current and to refine your layout. Constantly changing your template design will confuse readers and compromise the brand recognition you are building — and brand recognition is one of the keys to achieving high open rates.
• Always include your contact information. It’s the law that your complete contact information, including your mailing address be visible in all of your email marketing communications — especially in email messages that sell products, programs, events, or services. Plus it’s smart to make it easy for your subscribers to be able to contact you.
• Choose your fonts wisely. Remember that every computer is different and has slightly different fonts available. Make sure that the fonts you use are standard fonts available on all machines. If you’re not HTML/tech/font savvy, consider sticking to fonts such as Arial, Courier, Verdana, Times, and Georgia. Just because your machine has the font, doesn’t mean all your email recipients will.
• Make your type big. With more and more high resolution devices hitting the market, it is becoming more important than ever to increase the font size in your communications — and that goes for more than your website. Don’t make your audience squint to read your emails on their phones! Use 16pt. at minimum, but consider going with 18pt or even 20pt.
• Keep it simple. The more complicated your email newsletter design, the more work it is going to be to produce each issue — and the more chances there are for something to go wrong. 

• 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 and HTML4 is your best friend.

Layout

• 650px or less design width
  The general rule for email size is to keep your email container HTML table to 650px or less in width. This allows the email to display correctly (overall) in most of the email clients and display configurations. Not everyone has a high resolution monitor and not everyone is viewing your email in an email client that has a viewing window that is full screen. No not everyone uses Outlook to read their emails.
• 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.

• 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.

• 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.