HTML email design and usability

HTML Email Design & UsabilityUPA of Iowa

Keith Kmett, Frontend EngineerTwo Rivers Marketing – http://www.tworiversmarketing.com

@kkmett | [email protected]

http://www.tworiversmarketing.com/

mailto:[email protected]

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 <!-->


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


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

http://litmusapp.com/



Usability

• BEFORE

Usability

• AFTER

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

Technology

white background

html email

brand standards

email clients

spam filters

subject line

design

text