Top Banner
Coding a Responsive HTML Email Lydia Roberts Consultant/Web Designer HighRoad Solution
34

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

Mar 26, 2015

Download

Documents

Connor Griffin
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Coding a Responsive HTML Email Lydia Roberts Consultant/Web Designer HighRoad Solution.

Coding a Responsive HTML Email

Lydia RobertsConsultant/Web DesignerHighRoad Solution

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

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.

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

The Goal

Non-responsive Responsive

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

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 »

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

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.

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

Best Practices

• 13px minimum font size

• Touch-friendly buttonsApple 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

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

Case Study: Redesign for Responsive

Left:

A typical, non-responsive layout

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

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

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

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

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

Final Results

Desktop View Mobile View

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

Views: Desktop and Mobile

One version of HTML, two different views

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

Before you code...

• Design your email

• Define what should happen in the mobile view

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

Define Mobile View

• Reduce width from 600px to 300px

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

Define Mobile View

• Full-width images need to be scaled down for 300px width

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

Define Mobile View

• Columns should stack on top of one another

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

Define Mobile View

• Footer links should stack on top of one another

• Hide dividers between links

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

Target Cells with ID's

• ID can only be used once

• Use for unique elements

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

Target Cells with Classes

• Classes can be repeated throughout email

• Use for similar elements

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

Use spacer gifs to force widths

• Apply an ID or Class so width of image can be changed for mobile view

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

Hiding Elements

• Eliminate unwanted spacing by adding class=”hide” to table cells

• Define class inside media query

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

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 */

}

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

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;}

}

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

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;}

}

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

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;}

}

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

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;}

}

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

Media Query

• Stack columns and make them full width

@media (max-width: 480px) {

...table[class=”column”] { width:100% !important; display:block !important;}

}

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

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;}

}

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

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;}

}

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

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;

}

}

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

Voila!

• Mobile view will be displayed based on screen size set in media query

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

Testing & Troubleshooting

• Resize browser window to test

• Other tools: CyberCrab or Firefox Responsive Design View

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

Testing & Troubleshooting

• Use built-in code tools in Chrome & Firefox

• Screenshot testing of major email clients & devices with Litmus

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

Congratulations!

Before After

[ iPhone5 ]

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

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