How to design emails for the mobile world

Cecily Kellogg

Smartphones and tablets are rapidly changing the face of web design. With nearly 70% of people using a hand-held device as their primary way of accessing the Internet, we need to start thinking about the small screen when creating websites and apps.

But what about email?

We all constantly check our mobile devices (some of us more obsessively than others). When faced with the challenge of the small screen, what should we know when we want to design email for mobile campaigns?

time

Every second counts

The typical smartphone or tablet user checks their email at meetings, lunch, on the train – anywhere they have a spare moment. That doesn’t give the user a lot of time to absorb content.

Remember that a message has only 3-7 seconds to grab a recipient’s interest. Users want to know the important points and they want to know them as quickly and clearly as possible. Use the subject line to announce your message and the pre-header to reinforce it.

In other words, show the highlights and cut the fluff. A plain-text version of the email doesn’t hurt either. If the content is time-sensitive, say so up front. And if a response is required, make it easy both to identify and to complete.

Bold will hold

When designing for the small screen, keep it simple and bold. Your viewers might be on a crowded elevator or on a moving train. They do not want to squint! With only moments to grab the recipient’s attention, a clear header and an easily identifiable logo will go a long way.

Bright colors and simple elements are your friends. Avoid small, faint or flowery fonts (remember the “squint factor”) and get to the point.

touch

Design for the touch screen environment

Designing an email campaign for the touch-screen world means making every call to action as easy as possible. No matter how adept a touch-screen typist your recipient may be, chances are they don’t want to fill out long forms while waiting for their Panini to arrive.

So keep response devices as user-friendly as possible. And avoid the scroll factor. If a recipient has to scroll through multiple screens to reach a reply coupon (or even a phone number), he or she is likely to lose interest.

Optimize optimize optimize

Responsive design has done a lot to relieve the problem of redesigning big-screen campaigns for the small screen. An email or ad that “knows” what type of device is displaying it can adapt to the small screen and create, for example, a single column scaleable version of the email, without awkward re-wraps or orphaned text.

Optimize the elements of the design for visibility on a small screen. And remember that while the fingertip may be mightier than the mouse (at least in the mobile world), it is also not as precise. If you’re using multiple clickable links, remember to space them far enough apart so the user can touch the desired link without unintentionally touching another.

What other differences have you noticed when you design email for mobile apps? Leave your response below!

The author

Cecily Kellogg
Cecily Kellogg

Cecily Kellogg became an accidental designer when she worked at a short-handed non-profit and although she now prefers designing with words, the lessons she learned from doing graphic design make her work in content development more well-rounded. She writes about the intersection of family, technology, and social media for Babble Tech and runs her own web content business. She is also known for her raw tone and humor on various social media platforms including her own blog, Uppercase Woman. Cecily lives in the Philadelphia area, is happily married, is mom to a fierce and amazing daughter, and has occasionally been called a bad ass.

Related articles

The fundamentals of responsive website design

The fundamentals of responsive website design

The days of designing a website for a single desktop screen are well and truly over. Technology and the expansion of mobile websites are pushing web designers to re-think how their work is displayed across various devices. Think about it: how much browsing do you do every day on your phone vs. your desktop? Enter:…

30 beautiful mobile apps for design enthusiasts

30 beautiful mobile apps for design enthusiasts

With an ever-growing supply of mobile apps, it takes a lot to stand out from the crowd—both in functionality and design. With that in mind, we sloshed through app stores to handpick 30 beautiful mobile apps that designers and design enthusiasts will love. We’ve organized this article into seven sections, so you can easily find the mobile app that fits…

Current Design Contests

Designers, check out these contests so you can start building your career.