If you’re anything like us, and the rest of the digital world, your inbox is teeming with emails from just about every website you’ve ever visited. If you’re also like us, you’re constantly on the move, and more often than not, you’re opening and viewing these emails on some type of mobile device.
According to statistics from Litmus, as of January 2015, 48% of email opens occur on a mobile device. Add to this the fact that Google’s search algorithm now takes into account mobile-friendly sites when providing search results rankings, and it’s easy to see the value of responsive, mobile-friendly emails. Businesses are noticing this too.
Recently we received emails from Dick’s Sporting Goods and Duluth Trading Company, two distinct businesses with distinct email approaches. Both emails are mobile optimized and use responsive code, but to the user the look and functions are quite different. So we decided to compare and contrast these two types of email design and highlight some of their benefits.
KEEPING IT SIMPLE
The Dick’s Sporting Goods email design mainly uses large graphic areas that feature easy to read messages. Comparing the desktop and mobile versions below it may seem that their email isn’t responsive but it actually is. The beauty of their template is they keep their responsive elements simple. Additionally, not all mobile email apps render responsive code, so one of the nicer features of Dick’s Sporting Goods template is it still works very well in these cases. The way they achieve this is by using an email template that is under 700 pixels wide. Emails at this width are still large enough to be easily viewed on a desktop but when the email is scaled down on mobile devices it still renders well providing a great mobile experience using either a responsive app or a non-responsive app.
In addition to the offers being easy to read across different devices, these large graphic areas are also clickable. Large clickable areas are critical for mobile users. In Dick’s Sporting Goods case, their call to actions are part of the larger graphic so they aren’t concerned with users needing to click directly on that spot to take them to the site. The entire image is clickable giving a mobile user a large, defined target to tap and takes them to the desired offer.
THE MORE THE MERRIER
While Dick’s Sporting Goods design takes a simple but effective approach to responsive marketing emails, Duluth Trading Company shows a more complex but still effective use of responsive design. Duluth Trading also shows how you can incorporate images and text into effective responsive designs.
Below you can see Duluth’s desktop version looks like a pretty standard marketing email. It features large graphic areas, humorous product descriptions and stand alone call to actions. However, when viewing it on a mobile app that recognizes responsive code you can see the level of thought they have put into their mobile-friendly version. While Dick’s mainly resizes their content to fit a mobile display, the layout of Duluth’s email actually changes. In the desktop version, Duluth takes advantage of the width by placing call to actions and text side by side. In the mobile version this shifts to an easy-to-scroll stacked layout keeping the images and text easy to see and read on a mobile device.
Another neat aspect of Duluth’s responsive design is their top navigation bar which reorganizes itself when it’s scaled down. When viewed on a desktop, the top navigation bar shows 6 links, but the mobile version reduces the number of links to 4. This a cool function that responsive code can do. It can show and hide elements to customize and optimize the user’s mobile experience. The way Duluth adapts their images and text to a mobile device is a great example of how you don’t need to use just one or the other for a mobile-friendly email experience.
As different as they are, both Dick’s Sporting Goods and Duluth Trading Company use their designs well. While Dick’s design retains a lot of the look and feel of their emails across each channel, Duluth’s design does more to adapt to each channel and invite mobile users. In either case, both businesses recognize the need for mobile-friendly email designs, and in this mobile age, if you don’t cater to those on the move, you may as well move on yourself.
Be sure to keep your eyes open for our upcoming articles about email design.