Responsive Email Newsletter Design: Increase Mobile Readership

We’ve been talking about the concept of Responsive Web Design (RWD) quite a lot lately and we took it even further away with tools for responsive images and others. Soon we will also provide an article covering the subject of Responsive Typography, but until then let’s focus on email newsletters and how we can turn them into responsive layouts, so they can fit the screen of the device they are viewed on.

Why responsive design again?

Many of us read emails from our smartphones – in the car, train or even airplane. We try to do as many things as possible on the go, so we can enjoy some more free time with the family, in the gym or with a hobby.

If you read your emails from a smartphone once, you already know that while this can be a positive experience, it can also turn into a negative one. We’ve experienced small fonts, narrow columns and broken layouts way too many times. But we are in for a change now that Responsive Web Design is on the verge of becoming one of the most important concepts in web design history.

If you are one of the ones who send email newsletters and you are not aware if it, I am informing you that around 20% of the emails sent worldwide are read on a smartphone or tablet (according to a survey from 2011 – almost 16% more than in 2009). Surprisingly or not, approximately 90% of these devices are running iOS.

So each fifth of your potential readers use a portable device when accessing their inbox. Few years ago people were concerned with making these emails look good in Gmail or Outlook. Now that this is sort out, making them look good on portable devices is as important as that and requires immediate attention.

With these portable devices quickly taking over, it is clear that providing a negative reading experience on a small screen will likely cause you to lose some followers, maybe even the majority of them.

Devices to target

Devices to target

You might ask yourself which are the devices you can design for – and I can tell you that, more or less, you can design for all of them. Devices running iOS should be no issue, as they are optimized very well for HTML and CSS. While you might encounter some issues with Android devices, this is also straightening out through regular updates from Google. Basically, there are no limits for you.

The design elements

Before jumping into a bit of coding, we should take a look at some design elements that fit mobiles well and the ones that should be avoided. The same concepts of Responsive Web Design will be used for building responsive email newsletters. In case you don’t know much about Responsive Web Design, this article might not make too much sense for you, so you should go back and read something about the basics of the concept.

The basic idea is that, as usual, we will build two CSS layouts of the same content – one will fit desktop and webmail clients and the other will look good on smaller screen.

In order to make a layout look good on mobile, there are some CSS specifics you will need to take into consideration:

  • Columns – there should never be more than one column, not wider than 500 to 600 pixels.
  • Links and buttons – these should have a minimum target area of 44 x 44 pixels, according to some guidelines provided by Apple. This will ensure you will be able to actually click on links and navigate through.
  • Font size – you will obviously have something to say, so you will use words and letters. Make sure the minimum font size you use is 13 pixels. According to the same American giant, anything smaller will be upscaled and could break the layout.
  • Length – messages displayed on portable devices should normally be very short and concise. The important elements should be in the upper side and scrolling should be reduced as much as possible.
  • Hiding elements – on desktop you can afford to use much more space than on a mobile platform. Therefore it is a smart idea to use a simple CSS property to hide different elements: display: none. If you want an example of something that should be hidden, then social media buttons are those things. While they might be great and useful on desktop, they are cluttering the layout on mobile.

In order to develop a good solution for portable devices, it is a good idea to start mocking up two layouts right from the beginning, one for desktop and one for mobile. Keep in mind that on mobile you have much less space above the fold – and this is the place where all the important elements should be placed, including the CTA button (also called call-to-action button). The recipient should not scroll in order to see it.

Let’s see some coding!

In order to help you off a good start, I will tell you a bit about how to actually start coding such a responsive newsletter design. When we said earlier that we will have two stylesheets, I didn’t mean two different ones. You will only have a stylesheet, but you will use media queries to display the elements different on some devices.

Elements different on some devices

The @media declaration is all about recognizing the screen size. The @media declaration specifies that this stylesheet has to be used only when the screen is narrower than 480 pixels. This value can be accommodated according to which devices you target.

If you want to be ultra-specific you can use the same declaration type for different sizes of screens, like below.

Different sizes of screens

From here on, you just code the same way you always did. It is that easy!

Other tricks

While designing a layout with one column and narrowing it down would be much easier, you can also design one with two columns for desktop use and customize it for mobile by putting the columns on top of each other with the help of CSS.

Another thing you can use is the so-called “progressive disclosure” technique. Wikipedia uses it on mobile devices a lot. It basically means hiding content under specific elements that once tapped will display it. If tapped again, they will hide the content. This ensures that the user doesn’t have to scroll too much in order to reach the content placed at the bottom of the newsletter.

This technique works very well for newsletter emails, where you can display all the news and a short description of each and then, if tapped, each link will show the respective content.

Focus and fluidity

What many people are not aware of is the fact that media queries, which I’ve been using in the examples above, can be quite focused. This means you can both design for landscape and portrait orientations and for as many exact resolutions as you wish.

Focus and fluidity

The code above tells the stylesheet that the screen should have a width of more than 320px, but no more than 480px. To this you can add another rule, and another one, and another one, and so on. You can design for as many devices and screen sizes as you wish.

Media queries can also be used for creating fluid layouts, which basically means you won’t have to be so precise about different screen sizes, but you will define elements in percent of the screen size, narrowing them down according to how wide the screen is. To apply a left margin, you simply use: margin-left: 3%. This will ensure that regardless of how narrow or wide the screen is, the margin will always be 3% of the width.

Optimizing images

Some designers recommend you to resize images at the exact size for the screen you display it on. I, however, would recommend creating a new image for the small sizes. A big image scaled down might not be so useful or visible, so creating an image where you crop corners out would be a solution.

If you design for Apple devices, I would recommend creating an image at the double size of the one you wish to display on, simply because of the Retina displays Apple devices feature. This small trick will make images look sharp and crisp and therefore will improve the user experience.

Optimizing images

Resizing images for fluid layouts should simply be done by using background-size: 100%. However, it seems there are some more advantages to background-size: cover, so do a bit of research and see which one fits you better.

Conclusion

To put and end to this article, I want to tell you about how important it is to actually test the newsletters on as many devices as possible, and not only in resized Safari or Chrome desktop browsers. Portable devices usually interpret different things a whole other way than computers do, so you have to make sure your mobile newsletter version really looks like you wanted it to.

Soon most emails will be read from a portable device rather than from a desktop screen. I am sure you would like to make that content readable and offer a good user experience to those followers reading on the go. If you provide a list with such emails, you should go and research a bit more about RWD for email newsletters and start designing and developing for these portable devices right away.

Christian Vasile is an enthusiastic Romanian web designer currently living in Denmark. You can follow him on Twitter at @christianvasile or visit his web portfolio at christianvasile.com.

Newsletter

7 Comments
  1. Carrie@sizzlepig Aug 28, 9:19 pm

    I agree that we should provide users with different size images per device/browser width, instead of a one-size-fits-all solution – especially to meet art-directed standards. What responsive image solution do you recommend for showing different sizes/crops per device in email?

    Reply
    0
  2. Will Sherwood Aug 29, 6:10 am

    I understand from one of my clients that emais don’t like CSS or java script, but I notice that your first block of coding says “text/css”

    Am I missing something?

    Reply
    0
    • Adrian Aug 29, 8:58 am

      Emails like CSS and javascript. You can insert css in the html page but not in css file.

      Reply
      0
  3. Keith Sep 11, 4:31 pm

    Sure, you can use CSS in emails, but ACTUAL responsive design depends on great CSS support and a DOM that doesn’t suck (MS Outlook). Also, support for the tag that you reference is not widespread: http://stackoverflow.com/questions/225828/can-i-put-a-style-style-tag-within-the-body-of-an-html-file

    Responsive design is great, but trying to get a responsive design to work in all email clients is a pipe dream for the foreseeable future.

    Reply
    +4
  4. Mika Larramo Oct 6, 5:17 pm

    That was a great and informative article. I have created a blog post about your article (and linked to your blog post) on our company’s blog:

    http://www.samlogic.net/blog/2012/10/responsive-email-design-one-newsletter-for-a-smartphone-tablet-laptop-and-desktop-computer/

    I think the information in your blog post may interest our customers.

    Reply
    0
  5. Paul de F. Oct 14, 3:24 pm

    Hello,
    An idea for how to make an element appear ONLY in mobile e-mail clients?

    I tried:
    @media only screen and (min-device-width: 350px) {
    .element {display: none !important;
    }
    }

    But many e-mail clients don’t support “display-none”…

    Reply
    0
  6. Nancy Nov 20, 10:02 pm

    Wonderful article – more responsive email design is very welcome topic!

    On earlier comments – some of the readers will use style sheets but inline-CSS is necessary for many still such as Outlook 07+ etc. Use can use Preflight to auto generate the inline-styles for you. Also for support see Campaign Monitor’s list of support for CSS.

    I’m leary of display:none personally, would rather just design first for mobile in mind and avoid the clutter. After all that stuff downloads anyway displayed or not and impacting download speed.

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters