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.

1. litmus
Responsive Email
101:HTML & CSS Basics

2. What is responsive email?
litmus

3. Responsive email
Email that responds to the subscriber’s environment
based on screen size and email client.

5. #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

6. Fluid
Full width of a single
viewport/breakpoint
Adaptive
Fixed widths at multiple
viewports/breakpoints
Responsive
Fluid widths at multiple
viewports/breakpoints

7. DOWNLOAD FREE
Go responsive with our free,
pre-tested templates!

8. Why is responsive email
important?
litmus

9. 70%
60%
50%
40%
30%
20%
10%
Mobile Desktop Webmail
47%
30%
23%
Environment growth
litmus

10. 47%
Environment growth
70%
60%
50%
40%
30%
20%
10%
Mobile
litmus

11. Mobile:
Smartphones (iPhone, Android) and tablets
Desktop:
Installed email programs (Outlook, Apple Mail)
Webmail:
Email accessed through a web browser (Gmail,
Outlook.com, Yahoo!)
25%
22%
53%
Mobile Desktop Webmail
Source: Litmus Email Analytics
Adjusted environment market share
litmus

12. TAKE A LOOK
EmailClientMarketShare.com
Check out
statistics and
rankings of the
email client
market.

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

14. MOBILE EMAIL
+512%since 2011

15. Create a great experience
for your mobile
subscribers.

16. +15
in unique clicks for
responsive emails
+30
click rate for first link
in responsive emails
READ MORE
Responsive emails drive results…

17. 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?

18. email receipt
requested from
An ATM
transaction!

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

20. Where is responsive
email supported?
litmus

22. Responsive email is not
supported everywhere.

23. of email client market share supports responsive email

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

25. Responsive email works on
an app-by-app basis.

28. Gmail does not support
responsive email.

29. http://stylecampaign.com/blog/2012/10/responsive-email-support/
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

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

31. How to code a
responsive email
litmus

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

33. <table width=“600” class=“responsive-table”>
Add a class to the HTML element you want to
style for mobile

34. @media
In the CSS, add an @media query

35. @media screen
Define the @media query type as screen

36. @media screen and (max-width: 600px) { */Insert styles here*/ }
Define the @media query condition

37. @media screen and (max-width: 600px) {
width: 100% !important; }table[class=“responsive-table”] {
}
Insert all styles within the @media query

38. table[class=“responsive-image”] {
width:100% !important;
}
Attribute selectors as a Yahoo workaround
table[class=“responsive-image”] {
width:100% !important;
}
!important overrides inline styles

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

40. GET RESULTS
See how your responsive
emails look in various inboxes.

41. Tools + Resources
litmus

42. LEARN MORE
Get more advice on
how to design
responsive emails.
How to Guide to Responsive Email Design

43. Build and
compare
immediately.
TRY BUILDER
Litmus Builder

44. Read about new
email trends and
tips.
GET INVOLVED
Litmus Community

45. Litmus Scope
Check your
emails directly in
various email
clients.
SCOPE IT OUT

46. Other great resources…
For sending campaigns...
For email templates…
For more responsive design
resources…
To learn about CSS support…
StampReady.com
Mail Chimp
Responsive Email
Design
Campaign Monitor