This article was updated on 5/6/14.
Mobile email use is continuing its rapid ascent and not showing any signs of slowing down. A recent blogpost from the email marketing service Litmus recently reported that email opens among mobile devices has increased by 123% over the course of the past 18 months.
With nearly 40% of email opens taking place on a mobile device, it has never been more apparent to marketers that they must adapt and optimize their email marketing campaigns for mobile use. But what is the best way to prepare your emails so that they are easy to use for smartphone and tablet users? The two best methods for optimizing email for mobile are Scalable Design and Responsive Development.
Scalable Email Design
Scalable email involves a single design that can be easily read and used in both large, regular-sized monitors as well as 480px wide smartphones. A scalable email is resized by smartphones to accommodate the phone’s diminished width, but can still be read with ease. The best way to make sure your email is still easy to use on mobile devices is to think BIG.
- Use big fonts so that your text can be read (iPhone’s minimum font size is 13px, but its best to think closer to 16-18px).
- Use big call to action buttons for your links so that they are easy to tap with your thumb.
- Make use of large amounts of negative space so that your main messaging stands out and that your calls to action are easy to tap without accidentally clicking on a different link.
In addition to following these scalable design guidelines it is also best to keep your overall design rather simple. Complex arrangements of content can yield intricate table structures that are difficult for mobile devices to properly resize.
Simple, proportional tables will maintain a consistent structure after being resized for smartphones. For this reason, any design structure other than a single column layout can prove to be troublesome.
Here is an example of a recent email from JetBlue that scales well from desktop to mobile:
However, scalable email designs are not true mobile designs in a sense that it relies on the device to restructure and resize content. As a result, scalable email can yield mixed and imperfect results when dealing with large amounts of content within your email.
Responsive Email Development
Responsive email development involves having multiple designs that can each be displayed depending on the size of the device that they are viewed on. By using CSS3 @media query tags, email marketers and developers can resize, reposition, and remove text and images from their standard desktop email design to create variations that are mobile friendly. The appropriate variation can then be displayed according to the device that the email recipient is using.
The following responsive email campaign from Playstation, recently cited by Marketing Land, is an excellent example of how you can restructure email for mobile using @media queries. In this instance, Playstation has limited the width of the email layout for users viewing on a mobile device and have forced a single column structure (rather than two columns for desktop users). Nobody likes scrolling side to side on their mobile phone, so Playstation has created a single column format that is easy to scroll through vertically.
Responsive design in email development requires a significant amount of time spent on relatively complex coding. Using @media queries to restructure an entire email can certainly be a bit tricky. However, the extra time spent on responsive email development results in unique variations of your campaign that are built, intended, and truly optimized for each device. Responsive email development will ultimately receive more clicks and interaction from your mobile subscribers.
Which Should I Use?
Your email content is the best determining factor when selecting the best method for your mobile email campaigns. If your email campaigns typically include brief messages that do not include paragraphs of copy, multiple images, or complex layouts, then a scalable design could be perfectly suitable for your needs without having to spend extra hours developing a responsive email template. For this reason, scalable design tends to work well for sales oriented campaigns that highlight a single promotion or sale.
However, if your email campaigns include informational newsletters that highlight multiple pieces of content and information, then a scalable design might not cut it. For long informational newsletters, it may be worth spending the extra hours to prepare a responsive email template for ongoing use. This will ensure that all recipients, including mobile users, can easily read and access each part of your newsletter.
Ultimately, when selecting one of these two approaches, you must balance the time you invest in optimizing your campaigns against the potential increase in results. Will the increase in mobile engagement justify the amount of extra time required to develop a responsive template? Or will a scalable design achieve similar results without spending any extra time on development?
Any thoughts about scalable and responsive email design? Let us know, we'd love to get your take. Leave a message below or tweet us at @BFMweb.