Those beautiful email messages you send to clients with all the lovely product shots and colorful “order now!” buttons? Take a look at them on a mobile phone. If they’re squished down to tiny print, with the images flowing off the screen and buttons sized for baby fingers then your email marketing needs a mobile makeover.
No, you’re not going back to plain text messages – email sells better when it looks like a web page, coded with HTML. So web designers are figuring out how to make HTML email messages look right on a tiny screen.
The basic principle of email design for mobile is: Stack That Content. Mobile users are most comfortable thumbing through one item after another, each taking up the whole screen in a single column. That’s different from the desktop computer viewing experience of scanning right and left and up and down, often across multiple columns.
Some other differences between desktop and mobile email design:
- Buttons should be bigger on mobile; users need to tap with a finger instead of clicking with a mouse.
- White space or other design elements help to separate content blocks to make them easier to scan.
- Font sizes should be large for easy reading on a small screen.
It gets more complicated: Think about the variety of screen sizes on mobile devices from the little Blackberry to the bigger iPhone to the bigger still Samsung Galaxy to iPad Minis to iPads and whatever’s next. And still more complicated: A user of Google’s Gmail might view messages on the iPhone’s built-in email system or the Gmail app for iPhone or Gmail on the web viewed through an iPhone, each rendering the message a bit differently.
The result is that there isn’t one HTML design for your message that will look exactly the same to all your clients on their various mobile devices. Email designers and developers are solving the problem with two techniques:
- With an aware or fluid design, a single column just stretches or shrinks to fit the requirements of the mobile device
- With a responsive design, the email template detects the type of mobile device and re-arranges the content to fit for the best look. For instance, if your desktop version has three product shots in a horizontal row, the email template could be directed to stack them in order from left to right.
Mobile email is pushing marketers to rethink not just design but content. Limited screen size, bigger print and bigger buttons means the message needs to be stripped way down so viewers can quickly grasp what’s the offer, why it’s worth considering and how to take action.
Your next step: Check with your email designer or email vendor – some of the larger ones are now offering responsive templates as part of their standard set of tools – about how you can make your email campaigns mobile-friendly.
