Vodafone Inspires With Responsive Design, Simple Animated GIFs & More!

[ 0 By


As we all know, mobile is big and only getting bigger. As the number of email opens on mobile devices continues to increase, so does the talk about responsive design. However, due to resource constraints (and management being hesitant about investing in a mobile strategy), I somewhat rarely see responsive design in action. However, when I saw this email from Vodafone Netherlands, I was really impressed with their responsive design, along with other aspects of the email—such as the subtle animated GIFs. Thanks for sending this over, Stefan Braat!


Vodafone Netherland’s holiday email revolves around a Dutch tradition called “Sinterklaas”. The holiday-themed imagery, such as presents, nuts, and shoes (you can read more about the tradition here), was the first thing that caught my attention about the email. Shortly thereafter, I pulled up the email on my phone and was majorly impressed with its responsive design.

The email looks great (and festive!) on both a desktop and the small screen of a mobile device. The email is easy to interact with no matter which environment it is being read in and, to be honest, I don’t even know where to start with all of the cool things Vodafone does with media queries in this email!

For starters, the entire email scales so that headers and CTAs span the entire width of the email. This makes the email easy to read & the buttons very touch-friendly. In addition, here are some other aspects of the responsive design that I was really impressed by:

  • When viewed on screens 480px wide or less, the entire email is a single column design. This enables images, text, and buttons to be larger.
  • The mobile version only includes pertinent information in order to not “crowd” the small screen of a mobile device. As a result, the Sinterklaas decorations towards the top of the email, as well as some details about the first deal, are removed from the email. In addition, the imagery at the bottom of the email of nuts & presents are eliminated.

Vodafone does an excellent job of designing their email for optimized viewing in all environments!


In the desktop version, there are 3 icons towards the bottom of the email: home delivery, customer service, and a telephone number (which is linked). In the mobile version, only the telephone icon & phone number are present and they scale to be the entire width of the email. This is very appropriate since users can easily click on the link on their mobile device and call Vodafone’s helpline — this is truly a “mobile version” of the email & it makes the subscriber’s experience that much smoother. It’s so much easier to just click a link and call than have to remember a number and dial it!

However, while this link allows you to conveniently place a call by automatically switching from the email app to the phone interface on your device, it has limited support in desktop and webmail clients. Since the link is present in both versions of the email (desktop & mobile), you’ll receive an error message if you click on the link in the desktop version. Fortunately, Campaign Monitor has a fix for this issue that involves just a little bit of CSS! By disabling the link in the desktop version and turning it on in the mobile version, the problem will be solved.


I really love the extra touch of the animated GIFs on the CTA buttons in the email — it makes them stand out that much more!

The CTAs already jump off the email due to their green color, but even more emphasis is put on them due to the subtle flashing arrows. I think it’s a great “extra” touch! And the best part about animated GIFs?  While video and CSS3 animation have mixed support across email clients, animated GIFs are supported in basically all of the major email clients! Check out a chart of animated GIF support from our friends over at Campaign Monitor.


Even though this email is entirely image based, it still looks great with images off, utilizing background colors and styled ALT text:

Vodafone pulls out all the stops with this email, and gets an A+ in our book!


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