Pro Tips on Formatting Emails for Mobile Devices

Responsive design is one of the most powerful tools available to email designers today.

But it’s also one of the most confusing. Are you having trouble getting your responsive email to, well, respond? Don’t worry. It happens to lots of email designers.

In this article, we’ll look at some pro tips for using media queries to format emails for mobile devices. Read on to learn how you can better format your emails for mobile devices and more.

Depending on who you ask, experts estimate that mobile email accounts for 26-78% of all email opens, depending on your target audience, product, and email type. That’s a pretty significant number, but it’s best to check your analytics to see for yourself how many of your subscribers view your email marketing campaigns on their mobile devices. Either way, making your emails mobile-friendly will very likely help you grow and retain your audience!

Here’s how responsive designs affect the performance of your email campaign:

• Increase mobile conversion rates
• Make it easier for your subscribers to interact with your email content on small screens
• Create portable content possibly viewed in a social setting instead of alone at a laptop

Since more than 50% of all email marketing campaigns are viewed on mobile devices, here’s your chance to lead the pack by getting ahead and standing out with emails that best fit your user’s screens.

What’s the difference between mobile-friendliness and mobile-responsiveness? The two terms are often used interchangeably, so before we dive in, let’s look at what each actually means.

Mobile-responsive refers to web content that has been reformatted for a mobile device to reproduce what you see on the desktop. This means:

• Instead of shrinking the size of the content, clickable items like Call to Action (CTA) buttons are enlarged.
• Pictures are resized and reformatted.

In short, mobile responsiveness creates an optimal user experience that is different from the desktop experience but just as good.

Mobile-friendliness, on the other hand, refers to web content that is exactly the same as you see on a desktop – just smaller. This means:

• Mobile users can see all of the same content as you’d see on a desktop.
• Content is resized to fit mobile screen dimensions.
• It may be difficult for mobile users to interact with the site because all clickable buttons and images are smaller.

While users can interact with mobile-friendly emails and other web content on their phones, mobile-friendliness provides a sub-optimal user interaction.

In this article, we’ll focus on formatting emails for mobile responsiveness.

We’ve talked about some tips for mobile optimization and ways to improve your mobile design elsewhere. Just to refresh your memory, here are some best practices on formatting emails for mobile devices:

• Optimize for your user’s screen size. Don’t just shrink content. Reformat the spread to make sure your user has an optimal viewing experience.
• Resize images and text for mobile users. Make it easy for your subscribers to view your content.
• Resize interactive content. Get those click-throughs. Remember, your email campaign doesn’t work if your subscribers find it hard to click your CTA button or navigate your links.
• Hide/Show different email components. Not everything from your desktop email needs to transfer to the mobile experience. Keep your design clean and uncluttered.
• Keep it simple with a single-column layout. Again, don’t clutter the real estate. Mobile screens are smaller, and having too much content can be as ineffective as having too little content.

Now that we have the basics out of the way, let’s get down to the secret sauce for responsive design: media query.

Media query is a CSS technique that uses the @media rule to specify that a certain chunk of code is only included if a certain condition is true. For instance, take a look at the following code.

                            

                                @media only screen and (max-width: 600px) {
  body {
	background-color: lightblue;
  }
}
                            
                        

In the example above, we’ve used a media query (@media) to specify a light-blue background via HTML when the screen size is a maximum width (max-width) of 600px.

Using media query, you can define certain rules to show/hide content or change its format based on particular screen sizes.

Keep in mind, however, not all email clients support media queries. Check out the complete list of email clients below:

Now that you know media query doesn’t always work as expected on every email client, you’re all set to get started.

First, make sure your media query is correctly formatted and that its parameters will be properly triggered.

Let’s take a look at an incorrectly written media query to troubleshoot common errors:

                            

                                <style>
  @media only screen and (max-width: 320px) {
     p.mobile_text {
       font-size:18px;
       font-weight: bold;
  }
</style>
                            
                        

This query is supposed to make some text bigger and bolder on mobile devices. However, this media query won’t trigger properly because it’s missing a closing brace }.

Simple syntax mistakes can cause your media query to fail. Here are a few other errors you should check your media query for:

• Ensure that you have curly braces around your media query and around any declaration blocks inside it
• Ensure that your selectors are functioning correctly. You can test this by using that selector to make a new rule outside your media query.
• Ensure that the device you’re optimizing for falls within the pixel range you’ve specified. We’ll go into more detail on this in the next section below.

In this section, we’ll go over how to optimize for the right screen width. We’ll start by discussing the difference between max-device-width and max-width. Then, we’ll take a look at min-width and max-width. Finally, we’ll go over choosing breakpoints for your content.

We get it. Max-device-width and max-width can be a little confusing. Let’s go over when to use them.

Here’s a quick refresher:

• Max-device-width forces the query to check for the size of the device instead of the viewing pane. For instance, on the desktop, it would check the size of the monitor. On a handheld device, this query would check the full size of the screen.
• Max-width checks the width of the viewing pane, like the internet browser’s iframe or the display portion of the email client. If you use this media feature, you’ll be able to see your email “respond” in a webmail client as you change the size of the browser window.

In the code below, Max-device-width ensures the media query checks that the device’s width is less than 479px.

                            

                                <style>
 @media only screen and (max-device-width: 479px) {
     ...Styles here...
 }
</style>
                            
                        

Let’s look at another common source of confusion: min-width vs. max-width. These two are fairly self-explanatory, but when should you base something on the maximum width versus the minimum width? When choosing between the two, here are some things to keep in mind:

• Max-width will target devices of the listed width and lower.
• Min-width will target devices of at least the listed width and wider.

For more on min-width and max-width, check out our article on demystifying media queries.

A breakpoint is the “point” at which a website’s content and design will adapt in a certain way. In short, breakpoints are pixel values that you can define in CSS when using media queries.

Take a look at the first line of our sample media query, reproduced below:

                            

                                @media only screen and (max-width: 600px)
                            
                        

The breakpoint we’ve defined above is 600px.

To provide the best mobile user experience, you need to define your breakpoints. A common industry breakpoint for handheld mobile devices is 480px. (When used with max-width, this will create a breakpoint that triggers on devices 480px wide and smaller.) For tablets, a breakpoint near 640px should cause the query to trigger.

The viewport tag is very popular with responsive designers because it allows you to control the scale at which your page or email is displayed. It looks like this:

                            

                                <meta  name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0," />
                            
                        

Remember, the order matters when using CSS. The rules that come last in the style block have precedence.

For this reason, media queries that are designed to overwrite the “default” desktop styles should come at the bottom of your style block. This is easy to forget, but it’s also easy to fix.

When using multiple queries, it’s important to order your media queries properly to set up their precedence. When using max-device-width, for instance, you should have your rules in the following order:

1. Desktop media query
2. Tablet media query
3. Handheld media query

If you’d prefer, you can set a range on your media query, as shown below:

                            

                                <style>
 /* Put desktop styles here */

 @media only screen and (min-device-width: 481px) and (max-device-width: 900px) {
     /* Tablet styles here */
 }

 @media only screen and (max-device-width: 480px) {
     /* Handheld styles here */
 }
</style>
                            
                        

The above code uses the first media query to target devices with a width of 481-900px (tablets and similar devices) and the second media query to target devices with a width of 480px or less.

And that’s it! We’ve gone over some common issues with media queries for designing responsive email templates. Not sure how your email’s going to display on different screens? Remember: test, don’t guess. Let us help you optimize your emails for mobile.

Did we miss something that has stumped you in the past? Let us know about your media query quandaries in the comments down below.