1. Coding a Responsive HTML Email
Lydia Roberts
Consultant/Web Designer HighRoad Solution

2. What is Responsive Design?
An approach to web design that provides an optimal viewing experience across a wide range of devices.
A responsive website or has a layout that changes configuration based on what size screen it is viewed on.

3. The Goal
Non-responsive
Responsive

4. How Does it Work?
HTML (content) and CSS (style) are the foundation of any website or .
A new version of CSS – CSS3 – gives us the @media query rule. It's what makes responsive design possible!
Support
Android 2.2+, iOS, BlackBerry 6+, Microsoft Windows Phone 7.5+
See full list »

5. Best Practices Single Column: Mobile max-width of ~300px
Key Information and CTA at Top
Keep Content Concise: Use teasers instead of lengthy articles. Eliminate table of contents and quick links where possible.

6. Best Practices 13px minimum font size
Touch-friendly buttons Apple recommends minimum target area of 44x44px
High Contrast Colors (i.e., dark text on a white background)
Test, Test, Test across multiple and device platforms, not just your organization's

7. Case Study: Redesign for Responsive
Left:
A typical, non- responsive layout

8. Case Study: Redesign for Responsive
Design is too wide
Header dates hard to read/cut off on narrow screens
CTA at bottom
Can't see links in sidebar, sidebar looks too similar to button
Icons too small to tap

9. Case Study: Redesign for Responsive
Design is 600px wide for desktop
Header is easy to read
CTA at top
Buttons look button-y!
Key info and Details in two columns below CTA
Icons made larger and Share button added

10. Final Results
Desktop View
Mobile View

11. Views: Desktop and Mobile
One version of HTML,
two different views

12. Before you code... Design your email
Define what should happen in the mobile view

13. Define Mobile View
Reduce width from 600px to 300px

14. Define Mobile View
Full-width images need to be scaled down for 300px width

15. Define Mobile View
Columns should stack on top of one another

16. Define Mobile View Footer links should stack on top of one another
Hide dividers between links

17. Target Cells with ID's
ID can only be used once
Use for unique elements

18. Target Cells with Classes
Classes can be repeated throughout
Use for similar elements

19. Use spacer gifs to force widths
Apply an ID or Class so width of image can be changed for mobile view

20. Hiding Elements
Eliminate unwanted spacing by adding class=”hide” to table cells
Define class inside media query

21. Media Query Set the max-width Define styles inside the media query
480px is an iPhone 4 flipped sideways
Define styles inside the media query
@media (max-width: 480px) {
/* styles go here */ }

22. Media Query Define styles using selectors in brackets
Fixes a bug in Yahoo Mail
Use !important after every single rule
Overrides inline styles
@media (max-width: 480px) {
table[class=”table”] {
width:300px !important; }

23. Media Query Resize the spacer gif @media (max-width: 480px) { ...
Subtract the two spacers on the left and right from 300px
=261
@media (max-width: 480px) {
...
img[id=”bodywidth”] {
width:261px !important; }

24. Media Query Resize header and footer images
Separate selectors with commas
@media (max-width: 480px) {
...
td[id=”header”] img,
td[id=”footer”] img {
width:100% !important;
height:auto !important; }

25. Media Query Add a class to hide elements from mobile view
Include span in order to hide dividers in footer links
@media (max-width: 480px) {
...
td[class=”hide”],
span[class=”hide”] {
display:none !important; }

26. Media Query Stack columns and make them full width
@media (max-width: 480px) {
...
table[class=”column”] {
width:100% !important;
display:block !important; }

27. Media Query Align social icons to the left Give some space above icons
@media (max-width: 480px) {
...
td[id=”social”] {
text-align:left !important;
padding-top:20px !important; }

28. Media Query Stack footer links Give a bit of space beneath each link
@media (max-width: 480px) {
...
td[id=”footerlinks”] a {
display:block !important;
margin-bottom:6px !important; }

29. Completed Media Query @media (max-width: 480px) {
table[class="table"] {
width:300px !important; }
td[id="header"] img, td[id="footer"] img {
width:100% !important;
height:auto !important;
td[class="hide"], span[class="hide"] {
display:none !important;
img[id="bodywidth"] {
width:261px !important;
table[class="column"] {
width:100% !important;
display: block !important; }
td[id="social"] {
text-align:left !important;
padding-top:20px !important;
td[id="footerlinks"] a {
display:block !important;
margin-bottom:6px !important;

30. Voila!
Mobile view will be displayed based on screen size set in media query

31. Testing & Troubleshooting
Resize browser window to test
Other tools: CyberCrab or Firefox Responsive Design View

32. Testing & Troubleshooting
Use built-in code tools in Chrome & Firefox
Screenshot testing of major clients & devices with Litmus

33. Congratulations!
After
Before
[ iPhone5 ]

34. Resources Anatomy of a Perfect Mobile Email
ology Boilerplate code, Tips & Tricks, Troubleshooting
Campaign Monitor Guide to Responsive Design
Which devices support media queries?
Mail Chimp Guide to on Mobile Devices
Yahoo! Mail issues queries
Examples of Responsive s by Marketing Land
MORE Examples of Responsive s
Takeaway Design for all Inboxes