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 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-responsiveResponsive

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 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 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 – 480px is an iPhone 4 flipped sideways Define styles inside the 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 (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 – (max-width: 480px) {... img[id=bodywidth] { width:261px !important; }

24 Media Query Resize header and footer images Separate selectors with (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 (max-width: 480px) {... td[class=hide], span[class=hide] { display:none !important; }

26 Media Query Stack columns and make them full (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 (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 (max-width: 480px) {... td[id=footerlinks] a { display:block !important; margin-bottom:6px !important; }

29 Completed 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! Before After [ iPhone5 ]

34 Resources Anatomy of a Perfect Mobile 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

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

Similar presentations

Ads by Google