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