Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations

Presentation on theme: "Coding a Responsive HTML Email Lydia Roberts Consultant/Web Designer HighRoad Solution."— Presentation transcript:

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 email has a layout that changes configuration based on what size screen it is viewed on.

3 The Goal Non-responsiveResponsive

4 How Does it Work? HTML (content) and CSS (style) are the foundation of any website or email. A new version of CSS – CSS3 – gives us the @media query rule. It's what makes responsive design possible! Support for @media: 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 email 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 email 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 – 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 – Subtract the two spacers on the left and right from 300px – 300-26-13=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 email clients & devices with Litmus

33 Congratulations! Before After [ iPhone5 ]

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

Download ppt "Coding a Responsive HTML Email Lydia Roberts Consultant/Web Designer HighRoad Solution."

Similar presentations

Ads by Google