Responsive email design... in brief!

For those of you spring chickens who have never known life without email on your phone, believe it or not, there was a time when the thought of reading emails on a mobile was just a figment of Maggie Philbin's vivid imagination on Tomorrow's World...  No? *ahem* ... me neither!

In the last decade, technology has raced ahead and we now take for granted that we can communicate on multiple levels whilst on the move, including the ability to carry our email inbox in our pocket. Checking and sending email from our phones has become second nature.

What we face now is the challenge of making sure that not only do our emails look good in any application and browser, and on the widest of monitors - but are they also legible and engaging on smaller screens? .... or just plain broken?

Rest assured "just plain broken" isn't a worry when an email is created using a template made by the NewZapp design team, but that doesn't mean to say we shouldn't keep striving for improvements and giving you the tools to make the best impression with your subscribers.

How do regular emails look on mobile?

Earlier in the year we blogged on the topic of Mobile email design and rendering, so in conjunction with that, let's have a look at where we are with mobiles and how they handle regular email marketing made with desktop screens principally in mind.

Whilst it's true to say that some mobile phones have been fairly kind to email designs in the past (eg. Apple devices!) others haven't been quite so generous in their willingness to display your email attractively on their little screens, so the email designers turned to responsive email code (media queries and other CSS snippets) to take emails on mobile up a notch.

To explain further let's take a look at a regular, nothing fancy (no responsive settings), email layout. Here you can see it as it would appear for example in Outlook 2010:

A regular email viewed in Outlook 2010 on a desktop screen

When this email is opened on an iOS (Apple) device, in its own default mail application, the device looks for the widest part of the layout and zooms out until it's happy that the whole email can sit comfortably in the screen width available. 

The same email viewed on an iOS device (iPhone)

So although it's not doing anything clever like rearranging content or increasing font sizes to make reading easier, spacing out buttons and links for fat fingers etc, it is doing its best to show you the whole email with only up and down scrolling needed, and not side-to-side. You can then zoom in if any area is too small to read/click/tap.

The same email viewed on an a typical Android phone

An android device on the other hand is more likely to zoom into the top left of your email. Whilst you might judge that this is handy for legibility, it doesn't give a great first impression. The likelihood is that you would at first zoom out from here (pinch the screen) for a better understanding of the whole message, before zooming in again to read the text.

What effect does it have receiving a responsive email?

In the very broadest terms, a responsive email will literally respond according to the screen size it's being viewed on, by arranging itself in a different way. So when we design and then code the template that you are going to use to create your emails, we can make sure we factor in the following  types of qualities to happen automatically:

  • An header image that switches to a more compact style
  • Text size that increases for clarity
  • Content re-arranges itself into a single column
  • Buttons sit wider apart
  • Some aspects can be completely hidden from the mobile version (usually for a simpler less cluttered layout)

This email was made with a responsive editable template - so that our marketing team can re-use the structure over and over again with each month's newsletter content and it's the type of structure that's proving popular with other NewZapp users.


If you'd like to know more about how responsive design could help your own email marketing, just give us a call or contact me if you'd like to try an unbranded responsive template in your NewZapp account.