Why optimize your email for mobile?
If you send email newsletters, it’s likely that a growing percentage of your subscribers are reading your messages on an iPhone, tablet, or other mobile device. According to a recent survey released by Litmus, mobile has become the most popular, with 42% of all emails being read on a mobile device, followed closely by webmail at 40%, and desktop with a respectable 18%. Apple’s iPhone accounts for 28%, plus an additional 9% if you include iPads.
What this means for designers and email developers is that getting your email newsletter to display optimally on mobile devices is just as important as viewability on more traditional platforms like Outlook and Gmail. In fact, when designing your emails, you should start with a mobile design, because if it looks good in a mobile view, it’s going to look great on desktop. Failing to think mobile-first could diminish response rates, or as Return Path summarized:
…those that aren’t tracking which device their subscribers are reading their emails on, or optimizing their emails or websites for mobile devices stand to lose out. A poor user experience could mean no response, no action, or plainly put, no ROI.
‘Email in Motion: How Mobile is Leading the Email Revolution’ – Return Path
There are not only ways you can improve the mobile email experience—like the use of media queries when coding up responsive layouts, to more advanced techniques like targeting specific devices. But there are also design considerations when planning your newsletter and subscribe forms for smartphone users.
Which mobile devices can you design for?
A quick caveat: The techniques listed here aren’t universally supported by all mobile email clients. As you may know, not all email clients were made equal—even on the same device, how an HTML email displays can vary radically from inbox to inbox.
Thankfully, the iPhone and other Apple iOS devices can not only boast of near trouble-free email rendering, but also account for a large percentage of mobile email opens, too. However, with the latest release of iOS 13, Apple’s dark mode will pose new design and coding challenges to overcome so always remember to test your emails.
With this in mind, we present to you a non-exhaustive list of mobile email clients and their support for media queries. For context, media query support enables you to use many of the responsive techniques that we’ll be covering in this guide.
Default device email clients
3rd-party email clients
Design techniques for mobile optimization
Let’s cover the visual side of creating a mobile-optimized email newsletter and dive deep into coding. This will not only help you make informed design decisions when designing your email newsletter, but it will make it that much easier to conceptualize the techniques we’ll be discussing later on.
We’ve already started talking about responsive email design. If you’re familiar with the use of this term in the context of web design, then you’ll be pleased to know that we’ll be using the same concepts and techniques here for email. If things like adaptive layouts are new to you, I highly recommend reading this primer by A List Apart.
For this guide, we’ll be designing two CSS layouts of the same newsletter: one layout that looks great in webmail and desktop clients, and another layout that can be easily read on the smaller mobile device screens.
Below is the same email, only this time viewed in Apple’s iPhone Mail. As you can see, there are significant differences between the two layouts. The mobile version is skinnier, lacks visual clutter, and is just as readable as the desktop version. This can be attributed to the use of mobile-specific CSS:
As a point of comparison, the right image is the same email, without this stylesheet. See how tiny and unreadable the text is? This is the problem that faces millions of email newsletters received on mobile devices every day.
Mobile-friendly layouts and design elements
- Single-column layouts that are no wider than 600 to 640 pixels work best on mobile devices. They’re easier to read, and if they fall apart, they’ll do so more gracefully.
- Links and buttons should have a minimum target area of 44 × 44 pixels, as per Apple guidelines. Nothing is more unusable than clouds of tiny links on touchscreen devices.
- The minimum font size displayed on iPhones is 13 pixels. Keep this in mind when styling text, because anything smaller will be upscaled and could break your layout. Alternately, you can override this behavior in your style sheet—do so with care.
- Remember to keep your message concise, and place all important design elements in the upper portion of the email if possible. However, since screen sizes have become larger and there’s more real estate than ever before, it’s recommended that you explore and test various formats (e.g. long-form content vs. short-form content). Always keep your brand in mind. What might work for one brand may not work for yours.
- When appropriate, you can use mobilehide < display: none !important;>to hide content in your mobile layout. Use caution when hiding content in mobile. Ask yourself, if your content is not worth showing in mobile, should it be included in your desktop version? If you find your design uses this class on several elements, you may want to reconsider your design and content.
When mocking up an HTML email or template, our advice is to create three sketches or wireframes: one of the desktop and webmail layout, one for the tablet layout, and one for a mobile layout. Building these three layouts will allow you to see how your content will break on various devices, and it will help determine what media queries you’ll need.
What is responsive email design and why is it so important?
A responsive – also called adaptive – design is a design that adapts and displays properly on screens of various sizes. For example, avoiding an image being wider than the screen or the user having to increase or reduce the size of text to be able to read it.
Although here we’ll be talking about email design, this technique can also (and especially) be used for web page design and layout. Why is it so important for design, both of emails and web pages, to adapt to various devices? Well, this is almost a rhetorical question, but we wanted to add a touch of suspense.
An article on Email Monday claims 59% of emails sent today are opened on mobile devices, and only 15% are opened on a desktop. And the same is true of web search: almost 60% of Internet searches are done on mobiles. Both of these are more than good enough reasons for brands to want to make the user experience as easy and intuitive as possible.
So what precise factors determine how an email displays?
Device screen size
On a phone, the story is somewhat different. Here the proportions of the content are reduced to fit on the micro screen of a latest generation mobile (although truth be told some phones are more like tablets). So, images are smaller, the text more compressed, and you need to scroll much more to reach the end.
Email clients
The other big enemies of responsive email are email clients themselves. If you’re unfamiliar with this term, an email client is a program that allows you to send and receive emails, and manage an email account effectively. The best-known email clients are Gmail and Outlook, but there are many more and each one displays email in its own way.
5 Tips for Designing a Responsive Email
1. Simple and Clean Design
2. Keep Visuals to a Minimum
Since most emails get opened on mobile devices, you need to consider mobile internet speeds and bandwidth usage when including images in your emails. Unless you’re an eCommerce store promoting multiple products, try to minimize the use of images or at least compress images to save loading times.
3. Add a Call to Action (CTA)
Whether you’re promoting a product, brand, or service, you should always put a call to action in your emails. CTAs help encourage users to take action and drive clicks to your landing pages. However, don’t overuse CTAs just include one or two CTA buttons or links per email to make it more effective.
4. Readability is Important
All your efforts of making your emails look pretty will go to waste if no one can read the text. Think twice about the fonts and font sizes you use in your emails to make sure they are compatible with both mobile and desktop devices as well as look great on all sizes of screens.
5. Make Sure it’s Responsive
Email Templates
Choosing the right responsive email template can save you hours of development time (and help create a stunning email newsletter!). We’re helping to get your email marketing campaign off to the best possible start.
How to create responsive emails in MailerLite
Easy! If you’re starting a new campaign, first head to your dashboard and click Create campaign. Then pick a newsletter template from the gallery or start building from scratch. Each design block that you drag and drop into your email template will automatically be made responsive.
Ready to design your own responsive emails?
Have you made your newsletter content adaptive to different screen sizes? Share your responsive email design tips with us in the comments below!
I’m Jonas, Content Manager at MailerLite. I’m not the 4th Jonas Brother, but I do write content (which is similar to being a teen heartthrob). After writing for a bunch of companies over the years, I discovered my professional passion—helping add some humanity to B2B marketing. Email is the perfect place to start!
Responsive HTML Email Tables: 3 Column Layout
The meat and potatoes of our design comes in the form of a 3 column html email template layout. This is when some folks may think they are beginning to get lost if they haven’t felt this way already about tables. There are only a few different elements and lines of CSS that make up our responsive table columns though.
Here come’s the responsive HTML email multi-column magic. We’re ready for the column’s CSS styling. First we’ll add a width of 100% to make sure the table column will display at the full width of the parent element. Then we’ll set the max-width to 200px so all three of our columns can display inside of the 600px layout. To get the columns displaying inline we’ll use the style declaration ‘display: inline-block;’ and to make the columns stack on top of one another for responsiveness we’ll used the ‘vertical-align: top;’ styling. For padding, we’ll apply 15px of space all around to the inside of our columns. Here is the CSS:
There is only one problem with this section now, we won’t be able to see any of the text we add because of the ‘font-size: 0;’ style declaration that is making it so our 200px width tables can all be inline. To correct this, apply the following font-size styling to the ‘content’ class with an optional line-height adjustment for more spacing around the text:
You might notice that a class has been added for the image called “third-img”. This class will be referenced in the CSS media query for screen widths underneath 400px effecting both the first and second of the three columns. So, repeat this first column for the second column HTML. For the third column, we’ll use a different class name. This time it will be “third-img-last” and this will be referenced in the 600px width media query. What is the purpose of these classes? When the screen width drops underneath 600px two of our columns will be inline and the third will sit underneath the first two which will be centered. So we’ll reference the “third-img-last” class to change with 150px width of the image to 200px and remove the padding on the left & right which was added using the “padding” class. Here is the media query:
Resources:
https://www.campaignmonitor.com/dev-resources/guides/mobile/
https://www.mailjet.com/resources/guides-ebooks/responsive-emails-guide/
https://designshack.net/articles/inspiration/modern-responsive-email-templates/
https://www.mailerlite.com/blog/guide-to-responsive-email-design
https://responsivehtmlemail.com/responsive-html-email-template/