Embed Size (px)
DESCRIPTION
This presentation by John Brandt, Agency Channel Manager for BlueHornet, and Chad Farran, author of our most downloaded whitepaper "Responsive Design for Mobile Rendering", focuses on the tactical side of coding a responsive email such as: • The basics of responsive design using @media query • Effective uses of responsive design, like scaling content and images • Key issues to consider when coding a responsive email At the end of the presentation, you can view the on-demand webinar, including Chad's live Q&A.
Citation preview
Some email client’s message lists will display the first lines of text of the email after the subject line, even if it is hidden in the mobile view.
Yahoo Mail will render the mobile styles unless attribute selectors are used.
By placing an ID on the <body> we can target our elements in the style list using the attribute selector: body[id=yahoo].
Apply the inline mso fix to each of the table columns to avoid Oulook desktop from adding unwanted borders.
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:none;">
<style>
@media screen and (max-width: 480px),
screen and (max-device-width: 480px)
{mobile only styles}
</style>
The max-width property is used for browser testing of responsive code.
body[id=yahoo] .mobile320 {
width:320px !important;
margin:0px;
padding:0px;
}
Use the !important keyword in your mobile CSS declarations to override any in-line CSS used for the desktop version.
body[id=yahoo] .mobileoff { display:none;
}
body[id=yahoo] td#hero img {
width:320px !important;
height:107px !important;
}
For fluid size images, use a 100% width and a height set to “auto”. This will allow the dimensions to change proportionality.
body[id=yahoo] td#headline {
padding:5px 9px 9px 9px !important;
font-size:24px !important;
line-height:28px !important;
text-align:left !important;
}
body[id=yahoo] td#intro {
font-size:16px !important;
line-height:20px !important;
padding:5px 9px 9px 9px !important;
}
16px is the recommended minimum font size for legible viewing on a mobile device.
body[id=yahoo] td.columns {
padding:0px 0px 10px 0px !important;
}
body[id=yahoo] table.column {
width:320px !important;
}
body[id=yahoo] td.imgholder {
text-align:center !important;
padding:10px !important;
}
body[id=yahoo] td.subhead {
padding:5px 10px !important;
}
body[id=yahoo] td.subtext {
font-size:16px !important;
padding:5px 10px 10px 10px !important;
line-height:22px !important;
}
body[id=yahoo] table.button{
width:300px !important;
margin:0px auto !important;
}
body[id=yahoo] table.button td{
font-weight:bold !important;
font-size:15px !important;
padding:10px !important;
}
body[id=yahoo] td#bottom-nav{
padding:0px !important;
}
body[id=yahoo] a.bottom-nav-button {
display:block;
font-size: 16px !important;
line-height: 16px;
padding: 8px 5px;
margin: 5px 0px;
border: 1px solid #dfe0e1;
text-align: center;
color:#333 !important;
background:#ffffff;
}
