Pop Quiz! What’s the difference between mobile optimized and responsive email design?

responsive email design

Over the past few years, nonprofits have been steadily making the technological strides toward a fully-responsive online experience for visitors and supporters.

It’s great to see all the new responsive functionality on websites and online tools like advocacy and donation forms. Most organizations are somewhere along the mobile path, or realized by this point that they need to be.

But let’s not forget our good old friend Mister Email message. We’ve officially reached the tipping point where over 50% of all email is now read on mobile devices.

Last time we checked, email is the tool we all use to direct our supporters to those snazzy new responsive 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

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!

Coralie Meade Rodriguez

About Coralie Meade Rodriguez

Problem solving ninja, and Firefly’s Senior Production Specialist, Coralie Meade Rodriguez brings over a decade of online production experience with nonprofit organizations to her work. Before joining Firefly in 2008, Coralie was with UNICEF USA as Interactive Marketing Officer. She was responsible for the production of all online materials, including all unicefusa.org properties, e-communications, and interactive media. Coralie is committed to improving the effectiveness of nonprofits using a variety of online technologies.

Leave a Reply

Your email address will not be published. Required fields are marked *