Mobile Design

5 Easy Ways to Improve Your Mobile Design

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.

Optimizing multiple platforms
  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;}
<div class="desktop_only">
Hidden info here.

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;}

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.

empty email iphone

Email on Acid Holiday email
With NO resized text.

empty email on iphone

email on acid improved holiday email

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.
Without adjustments to CTA. (Ex. 1)

Without adjustments to CTA
With adjustments to CTA. (Ex. 2)

With adjustments to CTA

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 small CTA button.
With enlarged CTA button. (Ex. 2)

With enlarged CTA button

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!

Author: Alex Ilhan

Hailing all the way from England, Alex brings his email development expertise along with an endless stream of cups of tea and British cynicism. Follow him on Twitter: @omgitsonlyalex.

4 thoughts on “5 Easy Ways to Improve Your Mobile Design”

  1. The fold still gets mentioned a lot, but I’m not sure it still holds as true as it has done. Even more so on mobile. Because it’s so easy to just flick up and down, have a quick scan and then make a decision, no?

  2. As we all know, the mobile technology has acquired a great change in our life. Today a large portion of the us are using the internet through mobile, smart phones, tablets and other compact gadgets. So it has become exceptionally fundamental for email marketers to focus on creating mobile friendly, responsive email campaigns to gain better results.

  3. @Jaina, I think the fold is still a valid concern. Emails are scanned so quickly that you want your hook to be the first thing that is processed. In some cases, that is NOT the CTA because you have to compel them with a headline or graphic to entice them to read and then click but, as Geoff points out, the CTA is often THE reason for the email and therefore should not be buried.

  4. Very intriguing post Geoff. With a weighty percentage of subscribers accessing their emails on mobile phones, mobile email design undoubtedly needs undivided attention. You have listed in some great pointers with dedicated imagery, which makes it exceptionally clear to understand. I’d like to add that mobile email designs need to be spaced right and link crowding just cannot be an option. We have it elaborated on Hope you enjoy reading it! 🙂

Comments are closed.

Free Email Goodies