You may have heard the term "responsive email" floating
about recently, and for a good reason - people are increasingly using phones and tablets to check email. Most emails are designed
for the desktop computer, and even on the smaller side, those designs tend to be more
than 600 pixels wide. When the email renders on a phone, it is generally scaled
down to at least half of it's original size, if not more. It can be hard to see
the details in images, the text is small, and there's a good chance that text
resizing has broken the email format. This is where responsive email steps in,
allowing the sender to simplify the message and make it easier to see on a
small screen.
On a mobile screen, the fold line is drastically higher than it is on a desktop. Responsive emails can hide non-essential parts of a message that a mobile user doesn't need to see to get the point of a message (fig 1). It can also rearrange the message; instead of having a sidebar next to the hero, the sidebar can move below the hero (fig 2). The exact opposite of that is also possible: it can take message elements that are stacked in the desktop version and flow them to be side by side (fig 3). It can resize and recolor text (fig 4), hide non-essential portions of an email (images, text fragments, and whole table structures), change the background image, change the background color, and even change the formatting of a message (fig 5), which is different than moving elements between rows.
However, there are some limitations with responsive emails:
On a mobile screen, the fold line is drastically higher than it is on a desktop. Responsive emails can hide non-essential parts of a message that a mobile user doesn't need to see to get the point of a message (fig 1). It can also rearrange the message; instead of having a sidebar next to the hero, the sidebar can move below the hero (fig 2). The exact opposite of that is also possible: it can take message elements that are stacked in the desktop version and flow them to be side by side (fig 3). It can resize and recolor text (fig 4), hide non-essential portions of an email (images, text fragments, and whole table structures), change the background image, change the background color, and even change the formatting of a message (fig 5), which is different than moving elements between rows.
However, there are some limitations with responsive emails:
- Responsive emails only work in the iPhone native mail app and the Android native mail app.
- In a mobile browser (i.e. not in the mail app), the email will appear as it does on a desktop browser, because the majority of email clients strip out the styling, or because the styles were hidden from the client.
- In proprietary email apps (Gmail app, Y! app, etc), the responsive email renders as it would in the desktop browser - which is to say, the 'regular' email design.
- If styling is not properly hidden from the Yahoo! Mail platform, these emails will work in ALL Yahoo! Mail, even when you would prefer to be showing your regular email (desktop), as opposed to your mobile email.
- In the desktop version of a responsive email, you cannot have a text, hidden, mobile-only message and expect it to
show up only on mobiles (although you could do this with images). The desktop message will hide in a lot of places, but there are some places
it won't, and there's no way to tell what platform
someone will be using to check email.
From: Barnes & Noble
From: Hollister
From: Sephora 
From: FreePeople.com
From: Eddie Bauer
From: Neiman Marcus
From: FreePeople.com
From: Hollister
From: The Land of Nod
From: FreePeople.com