How to optimize the content in your email to be mobile-friendly

But just making your email one column is not all you need to worry about.

You also have to make sure the contents in your campaign make perfect sense for the size of the screen.

In this lesson, we’ll talk about the dimensions and best practices for:

  • Text
  • Images
  • Buttons/Links

Let’s go step by step…

Text

Cut to the chase

When a person opens your email on desktop, you know the person is sitting, possibly at her desk, just grabbed a coffee, and she probably has the time.

But on mobile, they could be on the move. Now you don’t know where she is or how much time she has. Instead of sitting at her desk, she might riding the train to work, she might be just walking on the sidewalk, sitting at a coffee shop, or even in the bathroom.

This is why it’s very important that you quickly get to the point.

Fonts

Don’t mess around with fonts, there is no reason for it. The objective is simple: to be readable.

One thing that is very important to take in consideration is that not all fonts are supported by email clients, in fact, most of them aren’t. The whole subject of fonts on the web and email has enough material to write an entire separate course. You do NOT want to get into it.

To be safe, use one of the following fonts:

  • Arial
  • Georgia
  • Tahoma
  • Trebuchet MS
  • Verdana

Fonts

These fonts are both:

  • Supported by all email clients
  • Easy to read

Font size

Your text should be readable without having to enlarge the screen.

We are used to going with 12 to 14px font, but you should go a little bigger so your email is readable on mobile devices.

The minimum font size should be 16px.

  • Apple recommends 17-22px
  • Google recommends 18-22px
  • Mailchimp recommends 16px

Look at the email from Creative Market, even tough the design is very nice, the text is impossible to read.

Small fonts

This is an example with a 16px font.

16px font

The point in this is that you take a “mobile-first” approach, optimize for mobile, because it’ll work on desktop too.

Paragraphs

Paragraphs should always be short, but this becomes even more important when we consider the small screen. There are 3 reasons for this:

  • Long paragraphs give the impression of a long and heavy read
  • Because of the narrow format of the small screen, paragraphs look even longer
  • Short paragraphs are easier to scan

Look at these 2 examples:

Short paragraphs

See the difference? The one on the left feels like a document from the IRS, the one on the right feels a lot more comfortable to read or scan.

Images

Size

Content visuals are great because they help you communicate a message. We’ve said too many times already that an image is worth a thousand words. The problem is that an image that makes perfect sense on desktop can be too small once viewed on a mobile device.

Now, that image is not helping your communication but upsetting your subscribers, that has to enlarge the content on the screen with their fingers to be able to see.

Small images

Make sure your images are clear enough to provide the same experience in both the desktop and mobile.

Big image

Dimensions

The width of an email in desktop is 600px, on an iPhone 5 is 320px, on an iPhone 6 is 375px, on an iPhone 6plus is 414… You get the picture!

When you use a full width image on a 1-column design, you won’t have to worry about all this.

  • Your email will adapt to the screen
  • You’re using larger images
  • The whole campaign looks a lot better

Full-width images

Clickeable

We talked about this before. Make sure the images in your email are clickeable and linked to your desired destination.

Narrow versus wide

Many people believe that because of the “portrait” format of the screen (this is how most people hold a phone), it’s better to use narrow images instead of wide.

While this makes sense, there are still some things you need to consider. To give you an example, narrow images work better on Pinterest, but if you go with an image that is optimized for Pinterest, you might be pushing the text in your blog post too low, most likely below the fold.

What’s more important, the performance of your post or the pin?

In this case, the image might look better with a narrow approach, but this is not just an image, it’s an email campaign. Make sure you don’t push everything else in the campaign out of the screen because you don’t know if your subscriber is going to scroll or not.

Narrow versus wide

Format

The format you use for the image is important for its quality.

In this case, we’re talking about mobile, things look beautiful in the little screen, un less they don’t.

This is often blamed on the format you use.

Look at this example, the images are tiny, but look at how crisp they look.

Image format

What format do you need to use?

  • JPG for photography
  • PNG if you need transparency, or if you are using an image with text
  • GIF if you’re using animation

File size

I mentioned the importance of being considered of your subscriber’s time, because they could find themselves in different situations when they open your email. Sometimes, images can take too long to load on the screen. Now, imagine your recipient is opening your email while he goes on the elevator and your image is not loading…

Today, people expect a website to load in 2 seconds, in fact, if your site doesn’t load in at least 3 seconds, 40% will abandon. Can you imagine if this same person is opening your email on the elevator and your images are not loading?

Your images need to be optimized for web use, which means the lowest file size possible without compromising the quality.

If you’re a Photoshop user, you know you can save your images as “Save for web” and preview the quality while lowering the file size. If you don’t use Photoshop, there are other options you can use to achieve this.

Here are links I promised on the video:

Header images

If you use images as the header of your email, make sure it doesn’t take too much space. Again, since we are in a “portrait” shaped environment, things tend to get larger and you might end up pushing your content below the fold.

Here are 2 examples of header images:

Image as a header

How to insert an image in your email

Buttons/Links

Your button or link must be impossible to miss.

Buttons or Links

Buttons are always more obvious than links. Look at the following example:

Button versus link

Size

This is more important than you think, because the button is usually the CTA in your campaign, and the CTA is what’s going to drive the conversions.

Your CTA must be obvious. The easiest thing to do is to make your buttons larger.

Let me first show you 2 epic fails from global brands, Adobe and Directv. Look at the buttons:

Small buttons

I had to use the arrows so you wouldn’t miss them…

These are the recommended dimensions for buttons:

  • Apple recommends 44px
  • Google recommends 48px
  • Mailchimp recommends 46px

Here are a couple of examples of good dimensions for buttons:

Large buttons

Thumb-tappable

When it comes to usability on mobile environments, you have to consider that people are using their fingers instead of a mouse.

One of the most common mistakes in mobile experiences (not only in email), is to cluster several links or buttons together.

This makes individual links or buttons very difficult to click.

Let’s look at a couple of examples of what not to do:

It doesn’t look like much of an issue because you are used to seeing this all the time, but on the small screen and using your thumb to click, this could be a problem.

clustering several links together

And this is an example of the same mistake, in this case with buttons:

Buttons too close

Remember the squint test?

If you can stand in front of your campaign, squint, and still be able to point at your CTA, chances are your reader will not miss it.

We did this exercise before, but this time you have to do it on mobile.

Here’s an example of the squint test with the Eventbrite campaign I showed you before. Do you think it passes the test?

Mobile squint test

Horrible examples of button/links

Before we move on, I wanted to show you 2 emails with horrible CTAs. I decided not to use the orange arrows to point at them on the images, just so you see my point.

The first one is a button:

terrible button

And the second one is a link:

Terrible link

How to optimize your buttons for mobile

White space

White space is something you don’t usually focus on when you think of design. That’s because you’re not a designer.

But white space is very important both on the web and in email, and it becomes even more important in limited spaces.

The reason is that the eye relaxes and it’s able to navigate the images and text on the screen. Your design feels clean and uncluttered.

Many people believe the reason this page is so successful is how the white space allows the user to focus on one goal.

Google white space

I have to be clear here and say that I’m not suggesting minimalism in any way. The point is to use white space to let each element in your campaign.

Now, in this module, what we are trying to do is to make thing simple so you, without being a designer or a programmer, can successfully optimize an email campaign for mobile.

The best practice is to add a little padding between the elements. Some people recommend around 15px.

Look at this example from Invision. Just by leaving the proper spacing between the different elements of the campaign, it becomes pleasant, easy for the eye to move around and easy to read.

White space

White space doesn’t necessarily mean is white, it simply refers to the negative space between the elements.

Homework

You have a lot of work to do, let’s start by looking at your current situation:

  1. Go back to your most recent campaigns
  2. Look at them in a mobile device and write a few notes of what you see
  3. How is the text? The images? or the CTAs? You have a list of things here, go over this list while you’re looking at your campaigns
  4. Okay, what exactly needs improvement? Be specific: > Fonts are too small > The is not enough spacing, everything looks too busy on the screen
  5. Remember that we are applying all these changes to a one-column layout, everything will be much easier like that
  6. Once you worked on your changes, preview your campaign