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.
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 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
Case Study:
Redesign for Responsive
Left:
A typical, nonresponsive 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
@media (max-width: 480px) {
...
td[id=”header”] img,
td[id=”footer”] img {
width:100% !important;
height:auto !important;
}
• Separate selectors
with commas
}
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
@media (max-width: 480px) {
...
td[id=”social”] {
text-align:left !important;
padding-top:20px
!important;
}
• Give some space
above icons
}
Media Query
• Stack footer links
@media (max-width: 480px) {
• Give a bit of space
beneath each link
...
td[id=”footerlinks”] a {
display:block !important;
margin-bottom:6px
!important;
}
}
Completed Media Query
@media (max-width: 480px) {
table[class="column"] {
table[class="table"] {
width:100% !important;
width:300px !important;
display: block !important;
}
}
td[id="header"] img, td[id="footer"] img {
td[id="social"] {
width:100% !important;
text-align:left !important;
height:auto !important;
padding-top:20px !important;
}
}
td[class="hide"], span[class="hide"] {
td[id="footerlinks"] a {
display:none !important;
display:block !important;
}
margin-bottom:6px !important;
img[id="bodywidth"] {
width:261px !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
[ iPhone5 ]
After
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