In today’s world, it can be said that email is the most effective medium of communication, after face-to-face communication. But of course, email doesn’t require you to suit up and be somewhere on a specific time. Also, email doesn’t require the respondent to stop all his/her work and answer, as it is the case in calling someone.
However, there is one problem of modern times that has been troubling us for a few years. And that is that around 50% of the readers today check their emails on mobile devices. Some use tablets and some use mobile phones. Then there are desktop computer users who have different resolution sizes set on their desktop. So it has become quite difficult to send designed emails.
The ball is once again in our court. We the designers have to come up with a solution. And indeed brilliant designers have created several ways to send beautiful emails that are displayed fittingly on nearly all screen resolutions.
Basics of Responsive Email Design
First of all, you should know the bitter truth. Not all mobile apps and operating systems support responsive emails. Here’s the list:
Responsive Emails Supported:
- Android 4.x Email OEM app
- iOS Mail app
- Windows Phone 7.5
- BlackBerry OS7
Responsive Emails NOT Supported:
- Android Gmail app
- iPhone Gmail app
- iPhone Yahoo Mail app
- Android Yahoo Mail app
- Windows Phone 7
- Windows Phone 8
- Blackberry OS5
- iPhone Mailbox app
Don’t be disheartened by the fact that so many important apps and OS don’t support RED (responsive email design) right now. We need to be ahead of the time, because one day, they will support it.
Now let’s move on towards the all important step.
How to Compose Responsive Emails Designs?
Antwort is a free template featured in 15 responsive email templates.
The good thing is that designing responsive emails is not difficult at all. In fact, if you have even a little experience in designing responsive websites, you already have all the technical skills required. All you need is a set of rules to follow, for designing responsive emails.
1. Mobile First Approach
If you are an RED, it is only because you are focusing on the mobile devices, not desktops. So you need to understand that most important content needs to be placed in the columns visible in 480px wide screen.
Your layout should not be more than 500px wide. 480px is the resolution of iPhone and most other famous mobile phones.
2. Using Breakpoints Effectively
Assuming you already know about breakpoints, the suggestion is that use media queries to break columns. And put the most important data in the main column.
One tip where I’d emphasize that you should not go for scalable, always go for responsive. The content must rearrange itself according to the reader’s ease, the design does not need to be maintained.
You can either spend hours, or maybe, days figuring out the best balance for each resolution, or you can select the lowest common denominator and just finish the job. I guess it all depends on the type of the client.
3. Go Vertical
It’s no secret that horizontal scroll is not appreciated much on the mobile devices. So your images and all of the columns must be designed to load completely within 500px width.
4. Imageless Layout
This the part a designer hates the most. Most email service providers don’t show images unless the user clicks on “show images” or “always show images from this person”.
So it is obvious that the first impression of your email will not contain any images.
Thanks to CSS3, you don’t have to rely so much on images anymore. For icons, you can use dingbat fonts and you can design your emails using pure CSS.
5. Large Tap Points
Steve Jobs declared that nobody wants a stylus, and he focused on devices which let the users to bring their fingers, and even thumbs into the play. Today, everybody uses their fingers to tap. So we must design accordingly.
Apple’s guidelines state that all buttons must be at least 44 x 44 pixels, only then a user can tap them easily. Feel free to go larger, but nothing less.
6. Font Selection and Readability
Email’s most important part is obviously the content. So your font must be highly readable and liked. You can use any of the Google’s ten best flat fonts which we featured just a few days ago.
When you can’t decide which font is the best, go with Open.
For high readability, you must include sufficient gaps between elements. Adding gaps is critical but I will spend much time on it because being a designer you already know its importance.
7. Use of Contrast
Using high contrast color balance is a good practice, but white text on dark background is a big no NO!
The only exception can be when you are writing a headline that contains only a couple of words. In any other scenario, it’s a flat no.
Emails needs load fast, very very fast. That’s because you are designing them for mobile devices that usually don’t have fast speed internet. All your code and images need to be optimized.
9. Use sharp images, no animated gifs.
Use extra bright, vivid images that are really eye-catching. And for speed optimization, you just cannot use any animated gifs.
10. Link to mobile friendly pages
This is a thing often forgotten. For high conversion rate, you must like your emails to mobile-friendly web pages. If the user opens your page and does not like what he/she sees, there will not be any conversion.
11 Keep Evaluating
Keep experimenting with colors, fonts, even layouts and designs. And keep evaluating the user behavior.
One thing we learned is that designing responsive emails does not require any extra effort, but it definitely increases conversion rates. So we should design emails responsively, there’s nothing to lose, but lots to gain.
Secondly, I wanna emphasize on something we could not focus in this article, content. Design is important, design is critical, but content is the king! Design can only be the queen. An ambiguously written or poorly worded email can never achieve any conversions even if it contains the best design in the history of the world. So make sure that your content is good enough to complement the design.