The Modern Marketing Blog covers the latest in marketing strategy, technology, and innovation.

Responsive Emails Explained

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:

  • 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.

Thanks for reading, and let me know if you have any questions
or would like any clarifications!

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.