Responsive Design for Email

1,496 views

Published on

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.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,496
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive Design for Email

  1. 1. Some email client’s message lists willdisplay the first lines of text of the emailafter the subject line, even if it is hiddenin the mobile view.
  2. 2. Yahoo Mail will render the mobile stylesunless attribute selectors are used.By placing an ID on the <body> we can targetour elements in the style list using the attributeselector: body[id=yahoo].
  3. 3. Apply the inline mso fix to each of thetable columns to avoid Oulook desktopfrom adding unwanted borders.<table style="border-collapse:collapse;mso-table-lspace:0pt; mso-table-rspace:0pt; border:none;">
  4. 4. <style>@media screen and (max-width: 480px),screen and (max-device-width: 480px){mobile only styles}</style>The max-width property is used forbrowser testing of responsive code.
  5. 5. body[id=yahoo] .mobile320 {width:320px !important;margin:0px;padding:0px;}Use the !important keyword in yourmobile CSS declarations to overrideany in-line CSS used for the desktopversion.
  6. 6. body[id=yahoo] .mobileoff { display:none;}
  7. 7. body[id=yahoo] td#hero img {width:320px !important;height:107px !important;}For fluid size images, use a 100% widthand a height set to “auto”. This willallow the dimensions to changeproportionality.
  8. 8. body[id=yahoo] td#headline {padding:5px 9px 9px 9px !important;font-size:24px !important;line-height:28px !important;text-align:left !important;}
  9. 9. body[id=yahoo] td#intro {font-size:16px !important;line-height:20px !important;padding:5px 9px 9px 9px !important;}16px is the recommended minimumfont size for legible viewing on a mobiledevice.
  10. 10. body[id=yahoo] td.columns {padding:0px 0px 10px 0px !important;}body[id=yahoo] table.column {width:320px !important;}
  11. 11. 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;}
  12. 12. 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;}
  13. 13. 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;}

×