Responsive Email Design Guide and Tutorials from Campaign Monitor

Reference - Responsive / Added on August 17, 2012 / Add to favorites

Responsive Email Design is a guide on how to design and code mobile-friendly email campaigns. Now that mobile email usage exceeds desktop and webmail, providing a great small screen experience is essential.
Responsive Email Design

Homepage: http://www.campaignmonitor.com/guides/mobile/
  • paulodef

    Hello,
    An idea for how to make an element appear ONLY in mobiles e-mail clients?

    I tried:
    @media only screen and (min-device-width: 350px) {
    .element {display: none !important;
    }
    }

    But many e-mail clients don’t support “display-none”…

  • http://twitter.com/Tutseekr Tutseekr

    Some people have said double rules can work on some troublesome email platforms, such as Microsoft products:

    http://stackoverflow.com/a/13292829

    Or just putting width: 0px; height: 0px; background: none transparent; may do the trick. Not if email clients do not yet support responsiveness in designs, like the whole concept of @media queries… But as a workaround for this problem, it may still be a viable option.

© 2013 All Rights Reserved