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?


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.


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!