overlay Two girls with glasses at computer

Mobile-Optimized and Responsive Design Email Messages

Way back in January, the Econsultancy.com blog predicted that in 2014, “’Responsive email design’ will become known as ‘email design’.”  This prediction gives me hope! Nonprofit organizations are paying attention to email again – realizing that their entire online communication strategy needs to be executed in a mobile-friendly way.  Often overlooked in 2013, email is especially important to consider in 2014 as 50% of all email messages are now opened on mobile devices (Litmus.com).

Going Mobile: It’s A Non-Negotiable

Nonprofits have been steadily making technological strides toward a fully-responsive experience for their visitors and supporters.  Budgets are developed to add responsive functionality to websites and online tools like advocacy and fundraising, and most organizations are somewhere along the mobile path.

These advances are all fabulous – and before we celebrate our cutting edgeness – let us take a moment to remember our good friend Mister Email Message.  Last time we checked, email is the tool we all use to direct our supporters to those snazzy new donation forms.   If your email message is not easy to read (okay, skim) on a phone, will your supporter assume that your action alert is?  Low click thru rates may be directly related to how mobile-friendly your email message is.

Two Ways To Get Your Email In Shape

When you think about improving your supporter’s user experience, it’s always a good idea to start with what you have now.  Send yourself a few test messages and read them on your phone or tablet.  How easy is it for the reader to navigate through the message?  Are images too small to be compelling? Take stock of opportunities for improvement.

Look at your online communication data.  Who is viewing your email messages on their mobile devices and which devices are they using? Are they more likely to take action by clicking on a button or link?  Are they simply interested in reading more about your organization and what’s going on than taking action?

Now it’s time to think about the key differences between a mobile-optimized and a responsive design email message.  Your particular communication needs can influence the direction you may take.  Think about the content of the messages and what action you want the readers to take when deciding which route to use for mobile–friendly email messages.  Here’s the info you need to decide which one you should set up and why.

Mobile-Optimized Email Messages

These are designed to use a maximum of 480 pixels in width (rather than the standard 600 pixels or more for desktop email messages).  Larger fonts (14 pixels) and larger action buttons (45 pixels in width) make your messages fingertip friendly.  Images should include a simple header of about 50-100 pixels in height at the top of the image and the message body should not use an image heavy design.

Use the mobile-optimized approach if:

  • A simple 1 column layout works for your brand and style
  • You need to create and send a message quickly
  • The WYSIWYG will be used in the build of new messages

Responsive Design Email Messages

If the mobile-optimized approach won’t fit your needs, then you can consider using a responsive design that adapts your content for different devices and screen sizes.  This approach allows you to rearrange, constrict or even hide content on smaller screens.  Best of all, fonts and images can be sized differently depending on the screen size used when viewing the message.

Use responsive-design approach if:

  • You need a 2 or 3 column layout
  • Setup and testing time is not a factor
  • HTML/CSS code will be used in the build of new messages

Remember, you only have seconds to grab someone’s attention via email.  Use testing and response data to help gain an understanding of your recipient’s email habits and our tips – before you know it you’ll move confidently into the world of mobile and responsive email communication!


Subscribe to Our Blog

Post a Comment

Stay Connected