In a world where screen sizes on our handheld devices are constantly getting larger and adapting to the multitude of tasks we need them for, opportunities for improving your responsive email designs has increased.
If you regularly use your phone to view emails, you will probably have seen there is a large gap between well designed/coded emails to the terrible ones.
This guide will help clear up and questions as to what responsive design is and also how you could go about providing your email to clients and customers in a well thought out manner.
If you send email newsletters, you’ll have likely noticed that a growing number of your subscribers are viewing your emails on mobiles, tablets and other handheld devices. A 2019 Litmus survey showed us that mobile has become the most popular media to view emails with a 42% market share. Followed closely by web based mail clients at 40% and desktop applications with just under 18%. Apple’s iPhone alone accounts for 28%, plus another 9% if you include iPads.
With that in mind, what this means for designers and developers is that getting your business email newsletters to display perfectly on mobile devices is just as important as it is on “older” systems such as the Outlook application and Gmail for web. Infact, we would advise that when designing your email, you go at with with Mobile-First Design in mind.
Now you know what mobile optimisation is and why you should be working your email newsletter around it, let’s take a look at what devices you should be focusing on.
What devices should you focus your optimisation on?
As a small note, not all devices allow the techniques that we are going to list below. Like computers themselves, some are made for gaming, some are made for simple home office use, this applies to mobile devices, not all are created equally and as a result, the way your email display can very greatly from inbox to inbox.
With this in mind, below is a list of just a few mobile email clients and their support for media queries (a media query enables you to add rules that is specific to certain screen sizes allowing you to add styles that only affect mobiles and/or tablets).
| Mail Client | Media Query Support |
| IOS (iPhone/iPad) | Yes |
| Android 4.x native email client | Yes |
| Android Outlook Exchange (via native email client) | No |
| Android Outlook.com app | No |
| Android Gmail app | No |
| Android Yahoo! Mail | No |
| Android Samsung Mail app | Yes |
| Gmail (Android Browser) | No |
| Outlook.com (Android Browser) | No |
| Yahoo! Mail (Android Browser) | No |
| Windows 7 Phone | No |
| Windows Phone 7.5 | Yes |
| Windows Phone 8 | No |
| BlackBerry OS 6 | Yes |
| BlackBerry OS 7 | Yes |
| BlackBerry Z10 | Yes |
| Kindle Fire native email client | Yes |
| Windows Mail | Yes |
| Gmail Android IMAP | No |
Techniques when designing for mobile devices
Figure 1
Figure 2
Of these two images (above), The Figure 1 was designed and built to be mobile friendly using @media queries, whilst Figure 2 is simply a scaled down version of the desktop view.
As you can see, Figure 2 is quite difficult to read the content in comparison due to the scaling, whereas Figure 1 is nicely stacked allowing more space to increase font size to be better readable (usually between 14px and 18px for a paragraph). Spending just a small amount more time making your emails mobile optimised can make a big difference when creating a user friendly email newsletter.
Mobile-friendly layouts and design elements
With the above in mind, designing for mobile isn’t always as simple as just writing mobile-specific CSS. Below are some other considerations:
- 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. A little like coding for the modern web browsers, but allowing for graceful degradation for users that have older browsers such as IE.
- It is best practise to keep links and buttons at a minimum clickable area of 44px width and 44px height. This allows for better user “ergonomics”.
- If necessary you can hide specific elements on a mobile device, this could come in handy if you are using quite a tall thin image on desktop. This might make your newsletter unnecessarily long. Hiding this on mobile would allow for less scrolling and only important information to be visible to the user.
In code, it could be like so within your mobile media query:.hidethis{ display: none !important; }
For more information on mobile design, Search Engine Watch have a great article on designing for “Mobile First”. A concept where rather than designing and building for desktop and simply making it responsive, you design for mobile and adapt for larger screens.
