Coding a Responsive HTML Email Lydia Roberts Consultant/Web Designer HighRoad Solution.
-
Upload
connor-griffin -
Category
Documents
-
view
221 -
download
0
Transcript of Coding a Responsive HTML Email Lydia Roberts Consultant/Web Designer HighRoad Solution.
Coding a Responsive HTML Email
Lydia RobertsConsultant/Web DesignerHighRoad 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.
The Goal
Non-responsive Responsive
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 »
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.
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
Case Study: Redesign for Responsive
Left:
A typical, non-responsive layout
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
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
Final Results
Desktop View Mobile View
Views: Desktop and Mobile
One version of HTML, two different views
Before you code...
• Design your email
• Define what should happen in the mobile view
Define Mobile View
• Reduce width from 600px to 300px
Define Mobile View
• Full-width images need to be scaled down for 300px width
Define Mobile View
• Columns should stack on top of one another
Define Mobile View
• Footer links should stack on top of one another
• Hide dividers between links
Target Cells with ID's
• ID can only be used once
• Use for unique elements
Target Cells with Classes
• Classes can be repeated throughout email
• Use for similar elements
Use spacer gifs to force widths
• Apply an ID or Class so width of image can be changed for mobile view
Hiding Elements
• Eliminate unwanted spacing by adding class=”hide” to table cells
• Define class inside media query
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 */
}
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;}
}
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;}
}
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;}
}
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;}
}
Media Query
• Stack columns and make them full width
@media (max-width: 480px) {
...table[class=”column”] { width:100% !important; display:block !important;}
}
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;}
}
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;}
}
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;
}
}
Voila!
• Mobile view will be displayed based on screen size set in media query
Testing & Troubleshooting
• Resize browser window to test
• Other tools: CyberCrab or Firefox Responsive Design View
Testing & Troubleshooting
• Use built-in code tools in Chrome & Firefox
• Screenshot testing of major email clients & devices with Litmus
Congratulations!
Before After
[ iPhone5 ]
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