Understanding Responsive and Mobile-Friendly Emails — A How-To Guide

Ready? Let’s begin.

With these factors in mind, why should you opt for mobile-friendly designs?

There are currently more than 6.5 billion smartphone users on this planet.

85% of these people use their smartphones to check their emails.

Email marketing has a return on investment of about 4,200% (that’s $42 in your pocket for every $1 spent).

By only looking at these 3 facts, it’s easy to see why email campaigns catered to a mobile audience are so important.

If you don’t create responsive emails, you’ll be sure to lose that 45% of the email clients we mentioned earlier.

Now you might be asking yourself . . .

A responsive email follows a design template that responds automatically to the screen size of the device that it’s opened on.

Responsive emails use what’s called a “media query” to help resize and adjust your message as needed for each screen size.

Media queries also change the email layout, font sizes, images, and CTA buttons.

This sounds a lot like the normal mobile-friendly design, which then begs the question . . .

Responsive emails require more time and coding to develop, compared to mobile-friendly emails.

Although mobile email templates are easier to design, they come with less customizable options, compared to emails with a responsive design.

There’s also a limit to the types of smartphones that support responsive design.

Now that you have an idea of how these types of emails work, let’s turn our attention to the key characteristics of a mobile-friendly email.

On a desktop or laptop, up to 60 characters of your subject line will be displayed.

To make your email mobile-friendly, you shouldn’t use more than 25-30 characters for your subject line.

Also, remember to keep your subject lines concise and impactful, otherwise, your emails might not even get opened.

Because a mobile phone has a limited space to display your email, a single-column/one-column layout would be ideal.

It offers greater mobile-friendliness compared to a multi-column or two-column layout.

Users also don’t need to zoom or scroll sideways to see your content, which improves the UX of your emails.

To keep your email mobile-friendly, make your buttons and icons a little larger and leave ± 10 pixels of space around or in-between any clickable area.

This helps users navigate your emails easier and prevents accidental clicking.

It’s also wise to adjust your margins 20-30 pixels around the border of the email to prevent fingers holding the device from hiding key information.

Enlarge your call-to-action buttons to roughly 44 x 44 pixels and place them near the top of your email (the top 250 pixels) for easy visibility.

If you decide to put your CTA at the bottom of your email, use contrasting colors or unusual shapes to make it stand out.

Tell your readers what you want them to do by keeping your CTA’s message clear and concise with no more than 5 words (for example, “click to subscribe” or “view my shopping cart”).

When designing responsive emails for desktops, you can work with a fixed width between 550-600 pixels (the default for most marketing emails and newsletters).

However, when creating emails for a mobile design, work up to 320 pixels to make sure your emails can fit on small screens.

For bigger devices such as tablets and desktops, aim for email displays up to 450 pixels to accommodate both.

If your email has display issues, your mobile users could lose trust in you and delete your emails or send them to the spam folder.

To prevent this, design at least 2 email templates and test them on various devices (Android and iOS).

Systeme.io is perfect for this because with us you can also test your emails before you send them out.

As enticing as it may seem, we don’t recommend you add menu bars to your email design.

This could cause users to lose attention with side-scrolling.

Instead, add links or images to your email body if you want users to navigate to your landing pages.

When adding design elements like GIFs or background images to your emails, be wary of your email’s file weight.

The heavier your emails are, the longer it takes to download them, which could cause users to lose interest.

Normal text-based emails with minimal graphics can go up to 100KB before they get clipped.

For heavier emails, we recommend not going beyond 1MB for your email marketing campaigns.

If you decide to use images in your email campaigns, make sure they’re compressed before you add them to your email design.

Compressed images allow for better UX because they reduce the bandwidth needed to load them and they also allow your emails to load faster.

Certain email devices, like Android smartphones, have image viewing turned off by default — always add image descriptions (alt-text) to let users know what should be displayed.

Some additional imaging tips:

Mobile optimization for emails doesn’t stop at just the graphics, your content also needs to entice the email client.

Keep the email design clean and simple and focus on the essentials in your message. Avoid lengthy or fluff-filled email copy.

Here are some tips to help you limit your body content without reducing quality:

Now that you know what your email design needs to stand out, let’s look at the ultimate platform to help your email marketing reach new heights.

The sender’s email address will automatically be filled out with the email account linked to your systeme.io account.

If your business is ready for the next step, our Startup ($27/month) and Webinar ($47/month) plans are perfect when it comes to email-for-mobile technology.

These plans offer space for up to 5,000 and 10,000 customers respectively.

You’ll also get access to free web migration (annual plans from Startup onwards) and webinars (Webinar plan).

Now that you’ve learned about how to create a mobile email for different devices, let’s answer some FAQs on mobile-friendly/responsive emails.

Yes. The Gmail app started supporting responsive design in their emails from September 2016.

Outlook followed suit in February 2017 by supporting responsive email templates for their webmail clients.

For Gmail/macOS/Outlook:

For Thunderbird:

For an in-depth look, read Lifewire’s article here.

Keep your image/logo size small. Use a vertical template design for wider logos and a horizontal design for smaller ones.

If your business has a long address, split it into 2 or 3 lines and use clickable text like “Email Me” or “View Website” instead of typing out the full address.

A great platform to help with the above example is Email Signature Rescue.

Excluding Outlook and Gmail as top contenders, here are 5 other apps to choose from:

For a deeper look into these apps, click here.

As of 2018, your standard iPhone and Android mobile devices came with an email screen width of 375px.

Other devices, like the Micromax Bolt Supreme or Vodafone Smart 7, offer a max device width of around 320px.

Designing the best mobile-friendly or responsive email template is all about getting your layout proportions optimal for small-screen devices.

But that’s not where it ends.

If you want your email clients to remain happy with your business, you need to make sure your landing page and website designs also provide the best UX for mobile devices.

Let systeme.io’s Free plan help you achieve this.

If you’d like to go to the max, our Unlimited plan is available for only $97/month and offers (you guessed it) unlimited everything!

We’re talking webinars, custom domains, and a one-on-one coaching session.

All you need to do is sign up.

With systeme.io, the sky isn’t the limit, your imagination is!