responsive design for email
Post on 17-May-2015
998 Views
Preview:
DESCRIPTION
TRANSCRIPT
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;
}
top related