Get Responsive With Your Emails Or Get Left Behind

Email is going “responsive,” but don’t expect it to start talking back to you just yet.

Even as website development has rapidly evolved over the years, email has stayed notoriously, stubbornly stuck in 1999. Why? Because of the idiosyncratic methods that individual email clients — Gmail, Yahoo!, Outlook, Apple Mail, and so on — use to render emails for viewers.

In plain English: Everyone’s different.

For example, Hotmail inserts gaps between email images, and Yahoo! wants to turn all links blue. For designers, developers, marketers, and end users alike, all the ways in which an email can break can be utterly crazymaking.

And so every precaution must been taken. Emails are still being built in tables, because tables are less likely to get borked during the long journey of preprocessing and protocols before arriving at your inbox. Inline styles are written for every element on top of header styles, because some email clients strip header styles. I could go on, but your eyes are glazing over. The point is, coding emails is not for the faint of heart.

Except now there’s a brand new challenge: responsiveness. Yes, the world is going mobile — and email is going with it. Today, nearly half of email opens are on mobile devices. Since emails are still being developed in inflexible 600-pixel-width tables geared toward desktop viewing — remember, email is still mired in the 20th century — marketing teams are going to have to seriously scramble to make sure their emails can be viewed across all screen sizes.

Which means this infographic from Litmus on how to design a responsive email couldn’t have arrived at a better time.

Responsive emails require CSS3 media queries, which are just about as complicated as they sound. Luckily, the infographic will take you through the process of implementing media queries in various mobile email applications.

Remember, 80% of people delete an email if it doesn’t look good on their mobile device. Now’s the time to ensure yours aren’t among the ones getting trashed.

Note: There’s a lot of detail in the infographic that may be hard to see in the image. To read the full text only, click through to the Litmus blog and scroll down the page to find it.

Source: The How to Guide to Responsive Email Design