Front End Design Conference – Kevin Mandeville – How to Build Kickass Emails

https://twitter.com/KEVINgotbounce
Slides:  http://litmus.com/lp/frontendconf

  • Email “browser” wars are crazy
  • Litmus tracked 550 MILLION email opens in June 2014
  • Apple 45%  – MS 21% – Google 19%
  • 43% is mobile and 25 Desktop – 32 Webmail
  • Email design is not web design
  • Use <table> not <div>
  • or GTFO (Get to fixing outlook)
  • Every piece of content needs its own <td>
  • Only apply styling to <td> (exceptions:  <a>, <img>, <span> & client/mobile-specific styling)
  • Keep your emails modular
  • One-column design works best for email
  • Keep emails to max width of 600px (generally)
  • Never use margin.  Always use padding.
  • Use HTML attributes for styling when possible.
  • 90% of the time, CSS should be inlined
  • Use <b>, not <strong>
  • Use px, not em.
  • Use 6 hex, not 3 hex
  • Use align, not floats
  • iOS needs a special wrapper to overwrite the default blue link styling
  • Responsive email is not supported everywhere.
  • There’s a difference between device support and app support.
  • Attribute selectors are needed to work around Yahoo! Mail
  • Also, Firefox sucks with responsive tables.  Don’t use it.
  • Don’t forget “Images off view”
  • Don’t use one big image for an email
  • 43% of users view email with images off.  Even after Gmail started displaying images by default.
  • Never forget ALT text.  Feel free to be playful with them.  OR be creative (see image)
  • Set images to display: block; so they don’t have extra spacing
  • Gmail caches images now.  Be wary of compressing your images.
  • Don’t use images for buttons in emails.  Use “bulletproof buttons” – See http://buttons.cm/
  • Use preheater text for better open rates.  You can hide it using CSS but make sure you have it.
  • Wrap web fonts in @media tag
  • Stack native font first
  • The best way to beat email is to figure out how to target individual email clients
  • Gmail does not render classes or ids in the of email
  • We can use inline styles to target Gmail
  • Outlook 2000-2003 use Internet Explorer 6 or 7 as it’s rendering engine
  • Outlook 2007-2013 uses Microsoft Word
  • Use [if mso] for MS Word CSS targetting.  Also can use conditionals and version numbers in credentials.
  • Outlook sucks at math
  • Gmail can’t read.  Outlook can’t add.
  • You can use media queries to show different pre-header text
  • ~65% of devs use Dreamweaver to build emails
  • Use static site generators to better organize your email sections
  • Email creation process : https://github.com/dandenney/emayll
  • SASS in EMail:  Zenith https://github.com/Omgitsonlyalex/ZenithFramework
  • Use Grunt!!