HTML email design and usability

HTML Email Design & Usability UPA of Iowa Keith Kmett, Frontend Engineer Two Rivers Marketing – http://www.tworiversmarketing.com @kkmett | [email_address]

What is an HTML email? There are two types of emails: plain-text and HTML email. HTML emails include graphics and formatting, while plain-text are just that. HTML emails should be sent in multipart/alternative MIME format; this includes an HTML version, and a plain-text fallback for email clients with HTML turned off or that lack HTML capabilities. This means that when writing and designing an HTML email, you still need a plain-text version as well. Fortunately, most of the popular email service providers will create a plain-text alternative from your HTML content.

HTML email design best practices Design constraints Messaging HTML code/CSS Testing Usability Email Service Providers (ESP)

Design constraints Call-to-action and main content should above the fold, 500px from the top, including the header. Header should be no more than 100px tall. Layout should be formatted to 600px wide. Design should have a 60% copy, 40% image ratio. Colors should reflect client branding and brand standards. Do not underline copy -- underlining is used for hyperlinks only. Use bold and/or italics. Hyperlinks All hyperlinks need consistent, distinct formatting – use a brand safe color and underline all hyperlinks Hyperlinks should be incorporated into the copy: Avoid the use of "click here". When possible, use copy instead of URL hyperlink For example: Instead of http://www.mybrand.com/promo use a phrase such as " Be the first to see our new product! " and make the phrase a hyperlink. Indicate document sizes when linking to documents, such as "Product Brochure (326 kb)"

Design Constraints continued… Include a hyperlink for an online version. Provide an unsubscribe hyperlink and/or preferences which may include email frequency. Also include a physical address. Establish design consistencies so recipients gain familiarity of design (if necessary) and help development efficiencies for client email campaigns (templates). Create design with a white background color. Most webmail and email clients use a WHITE background color to display messages. Often webmail clients ignore or remove the <BODY> tag, which is why background colors often do not work. Avoid using background images defined on the <BODY> tag or other areas.

Messaging Message should be self-explanatory even if images/graphics do not appear. Copy needs to create sense of urgency. The email should be easy to read with a clear call-to-action. Use bullet points and headlines that are easy to scan. Make sure that the copy has a proper tone of voice: To the point, but not condescending. Avoid using clichés or asking rhetorical questions. Do not overload the copy with keywords, search engine optimization is irrelevant.

Messaging continued… Subject Line Focus on the first 50 characters, but the subject line can be longer – keep short if possible. Test messaging – test subject lines as well as how offers are positioned and/or communicated. Be cognizant of shortened appearance or cutting off of subject lines. Be aware of possible words and phrases that can be caught by SPAM filters. Some clients want their name in the subject; make sure it is used in relevant context according to their brand standards. Latest trend of SPAM filters is to flag any emails with a “!” in the subject line or copy. "FROM" Address Mass email must always be “FROM" an authenticated client email address or verified automated email service. Do NOT use a personal or company email for mass emails unless you want that address to be black-listed.

HTML code/CSS Recommend using Visual Studio (VS), Dreamweaver or Notepad to develop code. Be sure to clean up code format in VS instead of relying on Dreamweaver formatting. VS removes random spaces that Dreamweaver generates. Do NOT use Microsoft Word to create HTML email.

HTML code/CSS continued… Remove any unnecessary code such as: DOCTYPE All Meta tags <META> Base tag <BASE> Link tag <LINK> Script tags <SCRIPT>/<SCRIPT> Title tag <TITLE></TITLE> Applet tag <APPLET></APPLET> Frameset tag <FRAMESET></FRAMESET> Frame tag <FRAME> IFrame tag <IFRAME></IFRAME> Comments <!-->

HTML code/CSS continued… To prevent layout problems use the <BR> tag instead of the <P> tag so it renders the same in all email clients. Only use tables for layout, DIV layouts are not supported. Be careful of too many nested tables – try not to nest more than 5 tables deep. Use inline CSS tags. For example: <td style="font-family:Arial, sans-serif; font-size:12px; color:#000000;"> Avoid use span or font tags. Do not use shorthand CSS, type out all Hex codes and use defined elements such as background-color vs. background. File size, base on 56K speed connection Target file size, including images should be less than 200 kilobytes.

HTML code/CSS continued… Image/File Documents Hosting Make sure that all your images are hosted online and accessible. Use absolute URL paths, image and file paths should always point to the hosted source. When possible, place the images in the same directory as the .html file. Graphics must have width and height attributes defined Use Alternate and Title tags on all images Do NOT use JavaScript, DHTML, Flash or SilverLight.

Testing http:// litmusapp.com / Focus on Outlook 2003/2007/2010, Yahoo, Gmail, Hotmail, Apple Mail and Lotus Notes. (In order of importance) Make sure to do a SPAM analysis on the content. Ensure that creative subtleties are intact across multiple platforms.

Reputable ESPs Constant contact Campaign Monitor  Recommended for small to medium size businesses. Mail Chimp Responsys (Enterprise) Exact Target (Enterprise)

HTML email design and usability

More Related Content

What's hot (20)

Similar to HTML email design and usability (20)

Recently uploaded (20)

HTML email design and usability