Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Email 101: HTML + CSS Basics


Published on

In this webinar, Litmus’ email designer, Kevin Mandeville, takes a look at the mobile email landscape, as well as what responsive design is and why it’s important. He covers where responsive design is supported and provide plenty of helpful resources and tools along the way.

Responsive Email 101: HTML + CSS Basics

  1. 1. litmus Responsive Email 101:HTML & CSS Basics
  2. 2. What is responsive email? litmus
  3. 3. Responsive email Email that responds to the subscriber’s environment based on screen size and email client.
  4. 4. #Respons ‣ Resize content: make images fit, make text larger ‣ Hide content on mobile ‣ Stack columns ‣ Move a two-column design to a one-column design Responsive
  5. 5. Fluid Full width of a single viewport/breakpoint Adaptive Fixed widths at multiple viewports/breakpoints Responsive Fluid widths at multiple viewports/breakpoints
  6. 6. DOWNLOAD FREE Go responsive with our free, pre-tested templates!
  7. 7. Why is responsive email important? litmus
  8. 8. 70% 60% 50% 40% 30% 20% 10% Mobile Desktop Webmail 47% 30% 23% Environment growth litmus
  9. 9. 47% Environment growth 70% 60% 50% 40% 30% 20% 10% Mobile litmus
  10. 10. Mobile: Smartphones (iPhone, Android) and tablets Desktop: Installed email programs (Outlook, Apple Mail) Webmail: Email accessed through a web browser (Gmail,, Yahoo!) 25% 22% 53% Mobile Desktop Webmail Source: Litmus Email Analytics Adjusted environment market share litmus
  11. 11. TAKE A LOOK Check out statistics and rankings of the email client market.
  12. 12. Email environment trends are constantly changing. LEARN MORE In four years alone, smartphones and tablet open rates have increase by 500%. Learn more and stay ahead of the game.
  13. 13. MOBILE EMAIL +512%since 2011
  14. 14. Create a great experience for your mobile subscribers.
  15. 15. +15 in unique clicks for responsive emails +30 click rate for first link in responsive emails READ MORE Responsive emails drive results…
  16. 16. Delete it Unsubscribe View on computer Don't know Read anyway 0 25 50 75 100 80.3% 30.2% 13.5% 3.8% 6.3% If you get a mobile email that doesn’t look good, what do you do?
  17. 17. email receipt requested from An ATM transaction!
  18. 18. Mobile emails don’t always render consistently across devices. RUN A QUICK TEST Preview your emails across various devices before every send to ensure they look great in every inbox.
  19. 19. Where is responsive email supported? litmus
  20. 20. Responsive email is not supported everywhere.
  21. 21. of email client market share supports responsive email
  22. 22. You can’t say “responsive email works on an iPhone.” It depends. For example, responsive email is supported on the native iOS Mail app, but not Inbox by Gmail iOS app. Device ≠ App
  23. 23. Responsive email works on an app-by-app basis.
  24. 24. Gmail does not support responsive email.
  25. 25. Media query support in mobile email apps iPhone / iPad: Email app yes Android 2.1: Email app no Android 2.2: Email app yes Android 2.3: Email app yes Android 4.0, 4.1, 4.2: Email app yes Android 4.3, 4.4: Email app sometimes Kindle Fire yes Yahoo! (iOS + Android) no Mailbox (iOS) no Gmail (iOS + Android) no Inbox by Gmail (iOS + Android) no BlackBerry Z10 yes Windows Phone 7 no Windows Phone 7.5 yes Windows Phone 8 sometimes
  26. 26. Be confident your HTML + CSS are supported across inboxes. START TESTING Email clients often drop support for HTML and CSS without notice. Guarantee your emails look great— everywhere, every time.
  27. 27. How to code a responsive email litmus
  28. 28. Uses media queries to detect screen size and alter content + layout ‣ More than a “line of code” ‣ Set of conditional statement that enables specific styles ‣ If the screen size is x, then display y ‣ If the screen size is x, then increase headline size to y ‣ If screen size is x, then show image at 100% ‣ Media queries aren’t supported everywhere Responsive email design
  29. 29. <table width=“600” class=“responsive-table”> Add a class to the HTML element you want to style for mobile
  30. 30. @media In the CSS, add an @media query
  31. 31. @media screen Define the @media query type as screen
  32. 32. @media screen and (max-width: 600px) { */Insert styles here*/ } Define the @media query condition
  33. 33. @media screen and (max-width: 600px) { width: 100% !important; }table[class=“responsive-table”] { } Insert all styles within the @media query
  34. 34. table[class=“responsive-image”] { width:100% !important; } Attribute selectors as a Yahoo workaround table[class=“responsive-image”] { width:100% !important; } !important overrides inline styles
  35. 35. <meta name="viewport" content="width=device-width, initial-scale=1"> <meta> tag for responsive email <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta> tag for Windows Phone
  36. 36. GET RESULTS See how your responsive emails look in various inboxes.
  37. 37. Tools + Resources litmus
  38. 38. LEARN MORE Get more advice on how to design responsive emails. How to Guide to Responsive Email Design
  39. 39. Build and compare immediately. TRY BUILDER Litmus Builder
  40. 40. Read about new email trends and tips. GET INVOLVED Litmus Community
  41. 41. Litmus Scope Check your emails directly in various email clients. SCOPE IT OUT
  42. 42. Other great resources… For sending campaigns... For email templates… For more responsive design resources… To learn about CSS support… Mail Chimp Responsive Email Design Campaign Monitor