A large email service provider recently found that almost 20% of the emails they sent were viewed on mobile. As mobile internet use grows and grows, you may be thinking about doing a mobile version of your emails. That seems like a good idea, but then you realize that you’re going to need to make your messages look good on iPhone and Android devices. And what about Blackberries? And then you start to think about tablets. Suddenly, things have become very complicated.

Thankfully, a new approach can help save you from these headaches: responsive design. A responsive email uses one base of code that displays differently on different-sized screens. This magic is enabled by a new feature of CSS3 called “media queries”. Media queries check the screen size and modify the styling code appropriately. So, on a larger screen, you might have a three-column layout; on a slightly smaller screen, like a tablet, a two-column layout; and on a phone, a one-column layout. You might have an image on a large screen, which becomes smaller on a medium screen, and disappears on phone. If you want an example of a responsive site, go to www.impactdialing.com on your computer; then, slowly resize the screen by clicking and dragging the lower right corner, and watch how the site changes as your browser window gets narrower and narrower.

Ready to jump into the world of responsive email design? htmlemailboilerplate.com is a great place to get started – it contains all of the basic code needed to build a responsive email template. If you’re looking for a responsive designer, mediaqueri.es showcases responsively-designed sites and is a good starting point to find someone who can help design your email templates (or your website, for that matter!).

Michael Kaiser-Nyman is the CEO and founder of Impact Dialing, an easy to use hosted predictive dialer for small businesses, call centers, and political campaigns.

Related Articles:


    Subscribe now to MarketingInProgress.com by email or RSS feed.

    You’ll automatically be notified whenever something new is posted.


    This article was originally posted at http://www.marketinginprogress.com.

    Post Footer automatically generated by Add Post Footer Plugin for wordpress.

    Tagged with:  

    2 Responses to “How to Incorporate Responsive Design for Email Marketing”

    1. [...] Cuando se estudia el diseño web de la página que queremos lanzar para móviles es posible adaptar las dimensiones a los diferentes dimensiones que ofrecen los terminales, sin embargo el correo electrónico no ofrece esta posibilidad de adaptabilidad. Por lo que la única solución para una campaña de email amigable es decantarnos por la responsive web. [...]

    Leave a Reply