Using Email for Good—charity: water Inspires With Responsive Design & Video

[ 0 By

“25 DAYS OF INSPIRATIONAL EMAILS” — DAY 4: Charity: Water

What’s better than a responsive email? How about a responsive email with a video? How about a responsive email with video that’s for a good cause? Charity: water covers all of the bases in this holiday email & we love it!

charity: water images on

RESPONSIVE DESIGN

I recently signed up for charity: water’s emails and have really enjoyed receiving them due to their responsive designs (and their altruistic content!). All of the email’s I’ve received thus far, including the one featured in this post, have a simple, yet effective responsive design.

charity: water - responsive email

The responsive design of this email scales the email & increases the text size on mobile devices so that it is easy to read and interact with on smaller screens. In addition, the text and placement of the link to view the email in a browser changes depending on the screen size it is being read on:

  • Screens wider than 480px: “Email not displaying correctly? See it here >>”
  • Screens 480px wide or less: “View in browser >>”

If the longer text had been used for both versions of the email, the text would have either been very small and illegible on a mobile device, or it would have scaled to a larger size and taken up numerous lines of unnecessary space. This aspect of the design is such a simple touch, but makes the email that much easier to interact with no matter which type of environment it is being read on.

mobile device - footer

Additional aspects of this responsive design that caught my eye were in the footer of the email. On screens wider than 480px, the footer includes the text, “Don’t want to get our emails? Unsubscribe,” as well as links to the blog and charitywater.org. On a smaller screen, this text would be extremely small and not touch-friendly at all. Rather than using a scaling technique, which would have been difficult to read since the footer text is all on one line and would have probably run into each other, charity: water eliminates some of the text when it’s being read on a screen smaller than 480px wide. On a mobile device, the footer simply reads “Unsubscribe” and has a link to charitywater.org. This makes the links extremely easy to read and click on when viewing on a mobile device.

VIDEO IN EMAIL

While HTML5 video is supported on Apple Mail and on iOS devices, it has very limited support in most other major email clients. As a result, there are some alternatives you can explore. You can simply use an image of the video (bonus points for overlaying the screenshot with a great looking “play” button, as charity: water has done) to prompt click-throughs to a hosted version of the video. For the ambitious (or those that know which email clients their readers are using—pro tip: try Email Analytics), you can give HTML5 video a try, just don’t forget to use a fallback image, which can be displayed in email clients that support video playback.

By including a “play” icon on top of the screenshot of the video, users are encouraged to click-through to view the charity: water video. In addition, there is live text underneath the image that says “WATCH THE VIDEO >>,” so, regardless of whether images are present or not, the CTA is present. Even the video landing page is optimized for mobile, making the entire experience easy!

SUCCESSFUL IMAGES-OFF OPTIMIZATION

Charity: water uses background colors and styled ALT text to ensure that their email still looks great when images are disabled.

charity: water images off

By assigning background colors to the header, footer, and body of the email, charity: water is able to maintain the hierarchy regardless of whether images are present or not. In addition, since most of the email consists of live text, all of the pertinent information is included in an images-off environment.

However, the logo, the snapshot of the video, and the exciting heading, “Bring Clean Water To Ethiopia For the Holidays: 100 Wells for the Holidays,” are all images and, therefore, disabled in an images-off environment. This didn’t phase charity: water — they used styled ALT text to combat this issue. As a result, when images are disabled, there is still branding present since the ALT text, “charity: water,” stands in place of the logo.

While the email isn’t as physically attractive in an images-off environment, it is still very easy to read and interact with! Overall, we have to say this is one of our favorite emails so far this season. A good cause combined with engaging video and simple, yet effective responsive design makes this email a winner!

SUBMIT YOUR EMAILS TO BE FEATURED!

Do you have an email that you’d like us to feature in our inspiration series? Send it to us at inspiration@litmus.com!

Additional Resources