Responsive Email Newsletter Design: Increase Mobile Readership

Posted by: Christian Vasile, in: Design, on: August 27, 2012 | 0 Comments

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

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.

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.

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.

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.

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.

Editor's Note: Best premium web design resources. Big collection of Web UI Kits and Icons. Professional and pixel perfect User Interface packs for Designers and Web Developers.    Get Your Design Elements Now!

Source: http://designmodo.com/responsive-email/#ixzz24l06G7iY

Source: http://designmodo.com/responsive-email/