Plenty of global enterprises, such as Starbucks, know what they are doing when it comes to designing highly readable, attractive, organized and action-oriented mobile emails. Large corporations, however, cannot be the only ones actively designing emails with mobile in mind.
That's because email opens on mobile devices are growing and, according to Return Path, will (very) soon surpass both desktop (e.g. Outlook) and webmail (e.g. Round cube, Horde) email views. As equally important, 63 percent of Americans will close or delete an email not optimized for mobile.
Many companies have taken note of mobile's impact, and the phrase, "Design for mobile first" is one echoing through the Web world. This now common advice typically applies to website design, but it also rather seamlessly transitions to the email experience.
"It's less of a buzzword and more of an approach," said 99designs Lead Visual Designer Kyle Lin. "One example of designing for mobile first is stripping down everything you don't need and taking off the buttons and links that are totally unnecessary for a good mobile experience. Think bare minimal and use absolutely only what people expect and need, as opposed to all the additional stuff that we can do on the Web today."
With all the available technology and design techniques available, it's easy to get carried away when creating an email campaign. For email, however, usability always wins and it starts with adaptability.
Since users are shifting consumption habits, designers are adapting through the use of responsive design and, specifically, through use of the @media query. This forces website code to adapt to a user's device (even desktop) by telling an email the style to use based on screen width and other factors, like resolution. Unfortunately, not all devices play by the same rules.
This is where simplicity comes into play and why most believe that single-column layouts work best for mobile email design. Regardless of device, a single column is easier to read and is typically less cluttered. Know that these single columns shouldn't be wider than 500-600 pixels because mobile users dislike scrolling from left to right or up and down.
Usability and simplicity also apply to an email's call-toaction. With less available real estate, emails designed for mobile reading should include a short, simple and clear callto- action to ensure a reader knows exactly what to do. "Bad mobile emails have a grid of competing calls-to-action," said Lin. "Not only can I not hit any of them because they are too small, but I also don't know which one to click. A good design for email is to include a simple and large callto- action - one that stands out on the page."
Like in this example from Starbucks, the coffee powerhouse not only fits their email onto a mobile screen, but also includes a prominent call-to-action, "Enter Now." A call-to-action doesn't have to be large or obtrusive, just clear enough for a reader to understand the action they should take.
You may also notice Starbucks' different font usage. This is an easy way to establish a hierarchy of importance within an email, as are size and color - two, of course, very important elements of any design.
While Lin advises not to use gradients, because they perform differently on various screens, color can be used to establish content hierarchy within an email. Color can also be used to highlight different areas of an email you want to stand out. It's best practice to avoid overuse of this tactic (no more than 3-5 highlighted text areas per email).
Starbucks also uses images to promote its giveaways within the email. This is tricky, as the way a mobile reader will view an email depends on connection, data plan and other extenuating circumstances. But, overall, people like pictures. It's a great way to convey meaning without using copy. A good practice is to keep images small, avoid background images or use the @media query to hide images in a vertical layout, but display them when the device is horizontal.
It's increasingly becoming a mobile world, and companies without mobile integrated into every aspect of their business, risk becoming immobile.
