Posted by Nicole Hambleton / Article, Email and Direct Marketing, Mobile /

Most sites we develop now are responsive, a big contrast from only 12 months ago where most clients still hadn’t heard of the technology. It’s great to see the progression of technology responding to the market place and the demands that changing consumer behaviour has had on digital filtering through to the design and development process. However, now we move to the next step of responsive, the email newsletter.

It is estimated that over 20% of emails are now opened on a mobile device and with mobile trends going the way they are, that figure is likely to rise.

The issue is that viewing a normal email, particularly a well designed marketing newsletter on a phone can sometimes be a disappointing experience unless the newsletter can detect where it’s being read.

eDM campaigns are a frequently implemented form of marketing communication but there is a growing possibility that the message is not finding its audience if responsive criteria are not considered in the design and development phase.

What is responsive email design

Responsive design for email works in much the same way as it does for websites. Using media queries the email can detect what platform it is being viewed on and scale accordingly. This means the content can be easily read and scrolled through on a small device. A two or three column layout will turn into one column, images may be hidden if they are not necessary and fonts adjusted to suit. As the word suggests, it is responsive to the user and their needs.

Using media queries the design will degrade stylishly, leaving only the most essential information for the user. A smaller screen shouldn’t mean squashing content awkwardly together and hoping that people can decipher the intended marketing message within.

Often for email newsletters you will just have the two breaks, desktop client and smartphone client.

Cell width considerations

Mobiles have a much narrower width than would be viewable on your desktop or tablet, to ensure that the site renders correctly on smaller devices the developer would use a media query to set the width of newsletter close to half of that of a normal email newsletter. This means it now fits on the screen without scroll bars, much more fun to read. There should be no horizontal scroll bar, the entire eDM should be viewable by scrolling up and down but not sideways.


On a normal desktop you might have 2 columns but on a mobile device like a smart phone you would be best to restrict the content to one column. This means the user scrolls down to view more information and can view one article at a time. This follows the natural inclination to read down a page.


One of the biggest mistakes we see being made with responsive eDMs is squeezing font sizes down to 7pt or less. The human eye cannot read that size reliably and the last thing you want is people having to zoom to read your article or information. Even some of the big brands have made this mistake and we see it far too often. The idea is to reduce the design to fit the size but still ensure it’s legible without a magnifying glass. A good rule is to stick to 10 – 12pt font and up for headers.

Also when choosing fonts there has to be some flexibility, email newsletters aren’t like websites. All email clients render fonts differently and while everyone wants their newsletter to look like the PSD, on some email clients the font will render differently and this is just down to the software. Where possible it’s best to keep designs / fonts as simple as possible as the wide range of email clients can cause too much design differentiation otherwise.

Don’t hide all images

Not all images will be suitable for mobile content but sometimes it’s the images that make the article or entice the reader to get hooked. By allowing the images to scale with the content you can still offer visual appeal to the email without cramping the page. The image will reflect the same proportions as it did in the larger version. Mobile users are used to scrolling downwards to read information, as long as they don’t have to scroll sideways. Remember thought, a lot of smaller devices are retina enabled, so the images need to be retina images (2x) to ensure quality is not lost.

Remove non-essential information

Focus on what is important, what will incite a response or action from your reader and dismiss the rest for a bigger screen. This means that some content might be better off hidden on mobile devices so they don’t detract from the overall message or relevant content. This may include non-essential buttons, advertising, images which don’t enhance the content or links that will distract the user away from your email.

Ultimately with the growing popularity of mobile devices to read emails, the experience needs to be a planned aspect of the overall online presence. A lot of email marketing campaign software will tell you if the email newsletter is being opened on a mobile. You may or may not be surprised at how many customers open their email on their mobiles now. Most importantly, your clients may be surprised at how many of their customers are mobile savvy.

Design, development and testing

When designing an eDM campaign for the mobile user, both the extra time it takes to design for responsive and then the development and testing has to be taken into consideration. eDMs are by nature quite fiddly, and testing is a big component with over 30 email clients to test. Add responsive to that mix and you can imagine that extra consideration needs to be given to the process to ensure that the outcome is a professional product.

Each design needs to be tested on a variety of desktop email clients including the notorious Outlook email clients to ensure they render correctly. In addition when working with responsive designs you need to test on Android and iOS devices to ensure that they all work seamlessly and if they don’t, designs may need to be tweaked to complement the email client. When we test we prefer to use Litmus to output the email in 30 or more simulated email clients to see if there are any design / development issues that need addressing. Some email clients are less utilised than others and you may decide not to test in them but others need to work. Taking the time to test before the email newsletter is launched will save you the stress of having to field client feedback later as to why someone can’t read their newsletter properly.

If your client is interested in sending out emails to their customers or shareholders or they want to create email marketing campaigns, responsive design can offer a good option for brand continuity and professionalism. Feel free to share elements of this article with your client.