Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Optimizing HTML Email for Mobile | WDYK

12,854 views

Published on

The uptake of mobile devices has been phenomenal. With the growth of email as a communication medium not showing any signs of slowing up either, we've found that 1 in 5 email newsletters are being opened on a mobile device. As a result, the optimization of HTML email for mobile email clients is no longer a 'nice to have', but necessary.

In 5 minutes, find out how HTML email designers can apply practical techniques to dramatically improve the readability and usability of their messages.

Presented by Ros Hodgekiss at Web Directions' 'What do you know?', 1 September, 2011

Published in: Technology, Business
  • Be the first to comment

Optimizing HTML Email for Mobile | WDYK

  1. MOBILE EMAIL IN 5 MINS
  2. MOBILE EMAIL IN 5 MINS
  3. FITTING LOADS OF AWESOME MOBILE EMAIL IN 5 MINS ON A SMALL SCREEN
  4. EMAIL IS NOT DEAD 70 mobile email users in the US
  5. WTF?
  6. MOBILE CSS IS NOT SO HARD
  7. RESPONSIVE WEB DESIGNRESPONSIVE EMAIL DESIGN?
  8. MEDIA QUERIES yes, they work in email!
  9. <style type=”text/css”>...@media only screen and (max-device-width: 480px) { /* CSS for display on mobile devices */}...</style>
  10. ADAPTING EMAIL FOR MOBILE DEVICES
  11. hide content adjust layout ADAPTING EMAIL FOR MOBILE DEVICESresize images control font-size
  12. <style type=”text/css”>...@media only screen and (max-device-width: 480px) { span[class=date] { display: none; } table[class=table] { width: 300px; } img[class=hero] { width: 100px; } p { -webkit-text-size-adjust:none; }}...</style>
  13. <style type=”text/css”>...@media only screen and (max-device-width: 480px) { span[class=date] { display: none; } table[class=table] { width: 300px; } img[class=hero] { width: 100px; } p { -webkit-text-size-adjust:none; }}...</style>
  14. “THE EMAILS ARE TOO DAMN LONG!”
  15. @media only screen and (max-device-width: 480px) { ... a[class="mobileshow"], a[class="mobilehide"] { display: block !important; } div[class="article"] { display: none; } a.mobileshow:hover { visibility: hidden; } .mobileshow:hover + .article { display: inline !important; } ...}<a href="#" class="mobilehide">Hide</a><a href="#" class="mobileshow">Show</a>
  16. WHEN DESIGNING FOR MOBILE DEVICES...
  17. 1 column bigger linksWHEN DESIGNING FOR MOBILE DEVICES...more space concise content
  18. MOBILE IS THE FUTURE OF EMAIL DESIGN
  19. mobile is on the rise media queries MOBILE IS THE FUTURE OF EMAIL DESIGNresponsive layouts less crap
  20. @yarrcat | roshodgekiss.com
  21. DONE! THANK YOU! @yarrcat | roshodgekiss.com

×