Upgrade to Pro — share decks privately, control downloads, hide ads and more …

You're Gonna Love HTML Emails

Dan Denney
April 29, 2016

You're Gonna Love HTML Emails

Presentation for Squares Conf 2016, attempting to make people love this dark art.

Dan Denney

April 29, 2016
Tweet

More Decks by Dan Denney

Other Decks in Design

Transcript

  1. KOALAFI CATIONS 3 years, 3-5 promos monthly, ~40 recurring, ~7M

    total http://static1.squarespace.com/static/5005afd7e4b0a6953320bf3f/t/528cfce6e4b0c1452601a558/1384971527352/4651364311_f505cc3cc3_o.jpg
  2. I AM NOT A MARKETER - Best ROI - Outperforms

    social media - Compliments social media
  3. I’ve learned that people will forget what you said, people

    will forget what you did, but people will never forget how you made them feel. “ ” - Maya Angelou http://www.mayaangelou.com/wp-content/uploads/2015/05/mayaremembered-slider.jpg
  4. We Miss You Life can get busy, we understand. If

    you're ready to continue learning, check out our new content, or even some courses you missed the first time around.
  5. Email’s “Gotcha” 1. Preprocess 2. Build 3. Deploy 4. Client

    Web 1. Preprocess 2. Build 3. Deploy 4. Preprocess 5. Client Email
  6. Email Client Preprocessors - Sneaky disguised horse feathers - People

    talking on their cellphone in the 
 bathroom evil - Evil worse than a dragon - Not cute - Not funny - Not clever
  7. Webmail Decisions Do not support linked CSS. - CSS has

    to be in a <style> tag in the doc
  8. Gmail’s Decision Do not support CSS in a <style> tag.

    - CSS has to be inline - No hover events - No media queries - And more! (of less)
  9. Outlook’s Decision Render HTML and CSS using Microsoft Word -

    No box model - Support for word processor styles only
  10. BEATING THE BAD - Use tables for markup - Apply

    basic layout CSS to <table> - Apply text/spacing styles to <td> - Apply critical CSS inline - Apply enhancement CSS to <style> - Use padding, not margin
  11. THE GOOD - Low-tech - Testable (The A/B kind) -

    Tied to revenue - Personal THE BAD - Low-tech - Minimal standards THE GREAT - The Community - Shared Code - Tools HTML Emails