According to recent results over 60% of all emails are opened on a mobile device, and this number continues to climb. In another year, email opens for mobile email clients may surpass their desktop counterparts. But emails, like webpages, aren’t always designed with such a small screen in mind, so when you check your email on a smartphone it can be a frustrating exercise in scrolling and zooming.
With the right code and design in place (see guidelines below), your email can be responsive, just like your website, and make the user experience for your clients better. A responsive website or newsletter has a layout that “responds” and changes configuration based on what size screen it is being viewed on vs. sending out multiple versions of the same email.
Below is an example of a non-responsive email viewed on an iphone [left] alongside it’s responsive counterpart [right]. Notice how the responsive version fits the screen so that the text is readable without zooming in, and the text flows around existing images.
Guidelines for a successful, responsive email / enewsletter:
- CSS media queries.
- Single column layout.
- Key information and call to action at the top of the email.
- Keep content as concise as possible. Use teasers with “read more” links instead of lengthy articles. Studies show that people scan instead of reading emails, so lengthy paragraphs without any calls to action are not ideal.
- 13px font size minimum.
- Touch-friendly buttons. Apple recommends a minimum target area of 44×44 pixels. Leave space around buttons and text links for easier tapping. And, use descriptive links in your email instead of “click here” – as your readers scan your email the links will catch their eye.
- High contrast colors (dark text on a white background) for better readability on smaller devices which often have battery-saving dim settings.
- Test your email in many different email clients and different devices. At Evolv, we use a testing software to do this for you.
Responsive eNewsletter Design & Development Package $1000
- 1 hour email strategy consultation
- Template limited to 3 custom design sections & 1-column only (additional columns cost extra)
- 2 rounds of design revisions
- Responsive development (mobile/tablet-friendly)
- Screenshot testing of most popular email clients only (we do not support Gmail App, Lotus Notes 6.5-7, and Outlook 2007 or Outlook 2010 (120dpi))
- Template uploaded to MailChimp email service with editable & repeatable areas setup. Any other email service used may cost additional due to differences in installation or editable options.
- Enewsletter Training for editing template limited to 1-hour inhouse/webinar training.
- Phone/email support (until Trainig) & ongoing access to our enewsletter & blog of resources
If you want to learn about responsive options for your website too, please read our post on Responsive, Mobile Friendly Website Options »