Responsive Email – More than Just Media Queries

We all know that responsive is in! Many organizations are making steps to ensure their websites are responsive, but they are still sending emails that are almost impossible to read on smaller devices such as iPhone and even more so, on Android phones.

Almost 41% of email is read on a mobile device or phone. If you’re like most non-profits you’ve probably seen a decline your email performance. According to The Non Profit Technology Network’s (NTEN) 2013 eNonprofit Benchmark study there was a 21% drop in email fundraising response rates over last year.  You can be certain that a large portion of that is related to the fact your users are having a poor experience reading your email on a mobile device.

Here are some tips for getting started with responsive email design:

  • Simplify your design.
  • Use text, not images for headlines and sub headings.
  • Tables and table attributes are the most reliable way to layout your email.
  • Use inline CSS styles.
  • Don’t be fooled into using Convio’s new style sheet module in the stationaries. You can put your media queries there, but you will want to include all styling inline.
  • Create table based buttons that render with images turned off.
  • Style the alt text for your logo to help with brand recognition.
  • Less is more – use conditional content to ensure you are targeting the right user with the right message.
  • Personalize your messages including the preheader, subject line and relevant calls to action.
  • Optimize your images for fast loading.
  • Test, test, test – with Convio’s partnership with Email on Acid email testing is free for Convio clients.

The best way to learn responsive design and how to use media queries is by doing it. There are lots of free responsive templates available online that you can use to get started. Once you understand the nuts and bolts of how to get the tables to grow, shrink, collapse and stack you can build your email from scratch.

Keep in mind that media queries are not supported on Gmail or the Yahoo mobile app on Android phones.  To make matters worse, it also just so happens that Android devices disable images by default. You will want to pay special attention to how your email renders with the images disabled and work towards a design that can leave an impression on these users.

Finally, if you do implement responsive email design, don’t dismay if your open rates, click through rates and response rates don’t improve dramatically. Look in your Google Analytics, you probably see an increase in direct traffic or branded search traffic to your website. These users are reading your email and then going to their desktop to donate or take action.

Beaconfire can help you establish responsive email templates and retrofit your current website to be responsive. Call us today (571) 814-2209.

Are you excited about the epic stuff you just read?

Are you smart, motivated, and eager to solve problems in a collaborative environment? If so, we want you! Join our team!

See Our Current Career Opportunities