Presentation is loading. Please wait.

Presentation is loading. Please wait.

Coding a Responsive HTML

Similar presentations

Presentation on theme: "Coding a Responsive HTML"— 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 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

Download ppt "Coding a Responsive HTML"

Similar presentations

Ads by Google