5 Easy Ways to Improve Your Mobile Design

Geoff Phillips | 2014-01-20T14:46:32+00:00 | email on acid logo

Not only is mobile here to stay, it’s on the rise. Acording to Adobe, 79% of smartphone owners use their smartphone for reading email, a higher percentage than those who used it for making calls (Adobe – “2013 Digital Publishing Report: Retail Apps & Buying Habits”). On top of that, 61% of consumers now read at least some emails on a mobile device, and 30% read email on their mobile device exclusively (Yesmail “Email Compass: The Mobile Effect” 2013).

The bottom line is, if you’re not optimizing your email campaigns for mobile, you’re missing out on a BIG chunk of change.

  1. Keep it Simple
  2. Resize Fonts & Images
  3. Mind the Fold
  4. Use Touchable Buttons
  5. Stick the Landing

1. Keep it Simple

Most handheld devices are so small that having two columns of text side by side is just not an option. We recommend that you either code a single column email, or one that slims down to a single column via media queries (like our Responsive Design Template). A single column design will help you draw readers through your content sequentially.

This doesn’t just apply to layouts; you should keep your content simple, too. Media queries can be used to hide content on mobile devices, which can really streamline the look of your email. Any content that you think is superfluous to the goals of your email can be hidden to achieve this. Some good examples of content you can cut would be a list of recent blog posts (especially if your blog isn’t optimized for mobile) or a list of other products they might be interested in. Check out an example of how to achieve this, below.

<style type="text/css">
 @media only screen and (max-width: 479px) {
      .desktop_only {display:none;}
   }
</style>
<body>
<div class="desktop_only">
Hidden info here.
</div>

Make sure that you’ve eliminated any horizontal scrolling in your email. The iPhone will resize your content according to the widest element to help you achieve this, but their efforts can screw up other parts of your email if the widths don’t match up. As always, test, test and test again.

2. Resize Fonts & Images

Take care with your font size when preparing an email for mobile. We used a simple media query to increase our font size from 14 to 24 in our holiday email.

<style type="text/css">
 td, li, p, body {font-size: 14px}

 @media only screen and (max-width: 479px) {
     td, li, p, body {font-size: 24px !important;}
   }
</style>

Check out our holiday email with and without media queries to resize text.

Go ahead and scroll down to see the difference in text size!

With resized text.

With NO resized text.

Image resizing is also a snap with media queries. If you define only width (and not height) the email client will automatically resize the height accordingly. For a great example of this technique, check out our Responsive Template.

3. Mind the Fold

In terms of email, the “fold” is what can be seen on the screen when the email loads. The call to action (CTA) is often the most important part of your email. It’s the whole reason you’re sending it out, after all. Make sure that the CTA is easily visible from the first moment the email loads. If it isn’t, consider hiding some elements in your mobile version or simply bringing it up higher on the page. Changing the font size of your header can also reduce the amount of vertical space above the CTA.

Check out this awesome “New Year Sale” template from MailChimp that we used for our example.

With OUT adjustments to CTA. (Ex. 1)

With adjustments to CTA. (Ex. 2)

In example 1, you can’t even see any of the buttons when the email loads. This is fine for emails advertising a variety of products, or for newsletters, but if you want to drive clicks to one button, you should make sure it’s above the fold! In example 2, you can see that we have added responsive elements to remove the preheader, decreased the size of the header (where the logo is) and hid some of the introductory text. All this work helps bring the first product entry and “SHOP NOW” CTA above the fold. The button is still pretty small, but we’ll get to that in #4.

It may seem like a lot of work just to move a button up a bit higher, but in our experience having the CTA above the fold is invaluable. It can double your click-through rates, as it has in some of our campaigns. Still skeptical? Try A/B testing your CTA location and see the difference for yourself!

4. Use Touchable Buttons

That call to action you just carefully located above the fold should be easy to touch. While a mouse pointer is very small, many touch screen users will have a hard time hitting links that are just part of the text. Make your CTA a button, and make sure it has plenty of real estate in the mobile version.

Check out this awesome template from MailChimp that we used for our example.

With small CTA button. (Ex. 2)

With enlarged CTA button. (Ex. 2)

Apple recommends at least 44×44 for touchable buttons on the iPhone. Remember that you can also make some of the area around the button touchable as part of the same link, as long as it’s not too close to other buttons.

5. Stick the Landing

After going to all this trouble to make your email mobile friendly, it would be a shame if you dropped the ball at the last second. Make sure the entire experience is streamlined for mobile users by also optimizing your landing page for mobile. Another option is to create a separate mobile site and send mobile users there instead. You can use our Browser Testing feature to make sure your landing page will look good for desktop users.

What are your go-to tricks for mobile optimization? Let us know in the comments below!

Submit a Comment