In part one of this series I gave you a lot of statistics and covered some of the reasons why you want to develop a mobile-friendly e-mail strategy. In this second installment, I will give you some tips on how to start moving your e-mail campaigns forward. While I won’t be able to cover every aspect, I will list some important points to remember while creating your own mobile-friendly e-mails.
Let’s get responsive
I saw the need to change our e-mail campaigns when I took a deep look at our e-mail analytics. I had a good idea that my specific audience would be more prone to mobile devices because it is made up of teens and young adults. I knew I had to do something to improve our engagement and conversions so I started with our newsletter’s design. Getting the help of one of our designers, we were able to produce a responsive version that looked good and performed well on a mobile device. Through e-mail analytics from Litmus I saw our percent of “glanced/deleted” e-mails on mobile devices decreased from 30% to 21%. That is a 70% increase in read e-mail over the previous version. Our original newsletter wasn’t a bad design, but it was formatted to only be 600 pixels wide, so when viewed on an iPhone it was zoomed out, but readable if you pinched, swiped, and zoomed.
I took our most recent newsletter and made a non-responsive version for example purposes. From the images above you can see a desktop e-mail on the left and the responsive version in the middle. The image on the right is what you see when you scroll down through the responsive version. You can see all the content converts to a single column that is only as wide as my iPhone. This gives the mobile user a much easier time reading your content while keeping the larger desktop version intact for viewing on larger screens.
What do I do first?
The first thing you should do when implementing your new mobile e-mail strategy is to look at your existing e-mails. Are they hard to read or navigate when viewed on a mobile device? If you are already using a single-column format of 500–600 pixels wide, like our old newsletter, then it probably doesn’t look horrible when viewed on a mobile device. Just not optimal. You also need to assess your and your team’s technical ability. Creating basic e-mails isn’t very hard, but you can quickly get in over your head if you don’t have someone to refer to for help. Don’t let your creative side go crazy; remember that short, to-the-point e-mails are most effective.
Here are a few tips on designing a mobile-friendly e-mail.
- Plan out a mobile version first. Design your e-mail to have only what is absolutely necessary, making it compatible with mobile devices, and then scale up from there, eventually to a desktop version. You can always add images and more text to the desktop version that aren’t absolutely necessary on the mobile device.
- Limit images. E-mail will load faster without them. Remember most devices are probably cell phones using cellular networks. Larger ones will also take up too much real estate. Not all mail clients support loading images by default, so make sure your e-mail looks decent when images are not loaded.
- Increase the size of buttons. Account for touching with a finger rather than with the accuracy of a mouse. According to Apple guidelines, links and buttons should have a minimum target area of 44 × 44 pixels.
- Stick to a one-column layout. Keep e-mails 500–600 pixels in width maximum; that way, even if the responsive code fails, they are still readable.
- Use a font size large enough to read on smaller screens. Be careful with fonts. The iPhone will automatically resize fonts to at least be 13 pixels. So make sure that won’t break your design. Thorough testing should show you where font-sizing issues might surface.
- Test on an actual mobile device. There are some great testing tools out there, like the one Litmus has, but there are always differences between a virtual mobile device and the one in your pocket.
- Try starting with some responsive templates like these from MailChimp and Zurb. There are more available out there if you search the Web, but I have found the Zurb ones pretty easy to get rolling out of the box. MailChimp has some good documentation on what else you should be paying attention to.
- Keep your message concise. And place all-important information like call-to-action buttons and links “above the fold.” Be as pithy as possible.
I could probably go on and on, but these tips can give you a solid foundation. If you have access to some good Web designers like I do here, you can come up with some interesting e-mails that will help your engagement levels.
I would like to give special thanks to @ajkohn at BlindFiveYearOld and @dan_shure at Evolving SEO for taking the time to give me some helpful hints and tips.
What do you think? Did I miss anything? What would you add to the discussion? I look forward to reading the comments and learning more about the challenges with responsive design in e-mail. You can follow me on Twitter @seo_george or on Google Plus as George LaRochelle