The Quintessential Guide to Mobile Emails


You can’t avoid it…mobile emails are big.

REALLY BIG!

Not in size, but importance.

With more than half of all emails now opened on a mobile device, you want your email marketing strategy to be engaging and relevant to your recipients.

Average Email Marketing Open, Click, and Unsubscribe Rates

If you’re not sending your emails in a mobile-friendly format, simply put: you’re not speaking your people’s language.

Keep in mind that your email subscribers are busy people who are reading, responding or deleting numerous emails through mobile devices.

If you want your messages to escape the “immediate delete” category, make sure they stand out and entice action.

You need an email optimization plan so that your messages are easy to read across all platforms, particularly smartphones.

hayes and taylor retail email example

While a solid email automation strategy is a must, a good user experience starts with designing your message with the medium in mind.

With email, our advice is to design your emails with a mobile-first mentality.

Let’s start with a few tips on creating mobile-optimized content before we get into some of the more advanced methods of designing mobile emails.

» Free Bonus: Click here to get access to free blueprints to 10 marketing automation drip campaigns proven to increase ROI.

Mobile Responsive Email Design

Mobile responsive means that the email is coded in the same traditional HTML and inline CSS that desktop email clients will support, but we’re considering some basics in mobile usability.

We’re keeping both desktop and mobile users in mind without yet diving into the vast resources in fluid and responsive email design.

Consider a few mobile email marketing optimization techniques to make your email design more mobile friendly:

Concise Subject Lines

If you’ve been in the email design world for any amount of time, you’ve probably heard the mantra: keep your subject lines short and concise.

This still rings true for mobile emails, but to an even stronger degree.

preheader text in mobile emails

Mobile devices tend to cut email subject lines short at around 30 characters.

So it’s worth repeating: keep your subject lines short, clean, and concise.

If you write a longer subject line, keep the key message within the first 15-30 characters.

Preheader Text

The text before the message body is critical.

How important is it? 

The preheader text is listed at the very top of your email, above your content.

retail email anatomy 1

  1. Sender’s name
  2. Subject line
  3. Preheader text

Many clients and mobile devices will display this text just below the subject line before the recipient chooses to open the email.

So trust us: this is valuable space whether designing for mobile or desktop!

This adds additional value in persuading the recipient to open your email.

iPhones tend to cut this preheader text short at about 75 characters in vertical view (140 characters—the same as a Tweet—in landscape view), so as with subject lines, keep it clear and concise.

In addition, if you’re designing a desktop email with an included link to a separate mobile version, the preheader is a good spot to place it.

The mobile user will see it first, without having to scroll through your possibly garbled message to find it.

Responsive Email Dimensions

Most smartphones will display the email at about 320 pixels wide in vertical view (iPhones display content at 480 pixels in landscape view).

Since the industry best practice is to code your desktop emails at about 600 pixels wide, designing the content between these measurements would be a happy medium for both desktop and mobile recipients.

Luckily, many newer smartphones will automatically resize your email to fit the screen.

So, the good news is your standard 600-pixel wide email will likely display correctly for these devices.

When it comes to the actual copy, designing the text to be size 13 pixels or larger in size allows for good visibility on most types of devices.

Want even more control of how your mobile emails look on these devices?

It is possible to prevent iPhones and iPads from bumping up text sizes by adding the below to your CSS styles.

Here’s a look at how using an embedded CSS stylesheet:

mobile emails design css for iphone

Mobile Emails Layout Design

With such a small space to design your content, it’s best to keep the layout of your mobile emails as simple as possible.

Simple, single-column stacked layouts work best within mobile screens…

…but there’s more to responsive email design than that.

kate spade retail personalization email example

Images & Text

Keep the number of images light.

When possible, try to include any important information within the text of your email.

For older phones, the worst thing you can do is to send one giant image as your email content.

Be sure to include ALT text on all of your images.

Even Google sometimes can’t be perfect:

mobile emails google broken image alt text

And keep the text in your content down to short, easy-to-read blurbs.

Links and Buttons

One of the most important aspects of mobile design is to give all items in your content plenty of space.

While small, packed-together links are easy to click in a desktop setting with a mouse cursor, recipients are using their fingers to tap links on their touch phones.

Fingertips are much bigger than cursors!

helix retail email example

Apple recommends coding all links and buttons with a target area of at least 44 x 44 pixels.

Keep in mind that if your desktop email content is wider than 320 pixels, iPhones will scale your content down to fit the vertical view, shrinking your 44 x 44 area as well.

In other words, don’t make any clickable buttons that small!

Test, test, and test again!

We cannot stress this enough.

It’s always worth your time to view your email on mobile devices, experiment with layouts, and see your email code in action.

Like desktop email clients, the mobile world is constantly evolving.

It will be worth it to catch any odd rendering quirks and make any needed code tweaks ahead of time.

By using an email analytics tool, we are able to provide full rendering tests for the email clients you don’t have on hand.

Typically just a few lines of code are all you will need to test the mailing you are working on.

After the send, you’ll get all of the reports you need to determine the next step.

Of course, testing doesn’t apply to only the design of your email—many of the most successful email campaigns begin with a lot of experimentation.

A Step Beyond: Responsive Design Techniques

Taking your mobile emails a step further, responsive design is another big buzzword for both website and email design.

Responsive email designs alter the layout of the email depending on the size of the screen displaying it – from desktop computers to mobile devices.

As with desktop HTML email, testing is vital; not all styles work well for all email clients on desktop or mobile.

To get more technical, responsive design uses media queries to render text and images differently based on the screen size of the device displaying it.

Here’s an example for mobile emails of the @media declaration, set in the embedded CSS stylesheet of the email HTML document:

mobile emails design css sheet

You’ll see that this @media declaration tells the content to use the styles within only when the screen is displayed at less than 600 pixels in size.

In other words – it tells the content to display using this separate set of CSS styles, only when the email is viewed on a small mobile device.

Images may be replaced by different mobile-optimized images, multiple columns of content may snap into a single column, unnecessary content may be hidden to condense the mobile message… you get the idea!

It’s also possible to add fluid elements to your email design to act as an in-between state from your wide desktop email layout and your skinny mobile email layout.

This way, your email design will scale down to fit mobile devices with larger screens beautifully, before minimizing at the fully responsive skinny mobile version.

5 Tips to Increase Open and Click-Through Rates of Your Mobile Emails

Now that your mobile emails are designed for success we can shift our attention to mobile engagement.

Here are 5 key tips to boost the effectiveness of your mobile email marketing strategy:

1. Make Content Relevant

Readers will quickly lose interest in your email marketing tactics if the content is not relevant to them, so don’t send the same information to every subscriber.

You can use segmentation to customize mailings for certain groups.

The more personalized your content the more relevant it is to your contacts.

That’s why dynamic content comes into play.

And remember to keep it simple – mobile email readers prefer short sentences, informative subject lines and plenty of visual breaks (like subheads and white space).

2. Use Fewer Images

Limit your use of images and focus on content.

Images can be a drag on load time, especially on mobile, so when you must use an image, make sure the resolution is low.

3. Create a Call to Action

Make sure you have a strong, clear call to action in the subject line as well as the body of your email.

example of excellent mobile emails

It could be an offer for a discount, free shipping or a gift along with an online purchase.

Think of it as giving the customer an instruction.

Instead of saying, “We have a special offer for you,” say, “Click here for a special offer.”

4. Maintain Active Lists

Keep an eye on your subscriber lists for high bounce rates or inactivity.

Those are clear signs that some of your subscribers are losing interest.

Send a segmented message to inactive subscribers to gauge their interests.

You also should give them the option to unsubscribe or to continue receiving your messages.

Make sure you’re continually clearing your list of invalid and inactive addresses.

5. Track Engagement by Email Clients

Modern email marketing automation platforms like Delivra offer comprehensive reporting.

Our reports tell you how many people opened and clicked in your emails—and on what devices.

This information can prove to be valuable to future email campaigns and ensure you’re reaching your KPIs with your mobile emails.

Are you looking for more ways to improve your mobile emails? We provide full email design services and dedicated client success managers to each client.


EVENTS


Join the email marketing community at an upcoming event near you.

VIEW EVENTS