This is a five part series from Charity Dynamic’s fab consulting team. Below is a continuation based on the technical best practices of responsive email.
Over the past few years responsive design and development for websites has soared to new heights. Responsive email is no exception.
According to “The How-To Guide to Responsive Email Design | Litmus”:
- 47% of email opens are on mobile devices, yet many emails are only designed for desktop viewing. Text is often difficult to read, details in images are hard to see, and links are impossible to click on mobile.
- People look at their phones an average of 150 times a day. These brief interactions mean that you must focus on getting your point across quickly.
- 80% of people delete an email if it doesn’t look good on their mobile device.
If you can identify with the above mentioned 80%, you have had the misfortune of opening a fixed-width email on a mobile device. You’ve seen the email bursting through your phone seams, trying to expand to a view that is not supported by your tiny device. Font sizes were illegible, images skewed, etc. No fun to deal with.
So what are you to do? Try some of these Best Practices:
Use a Framework or Template
Use a ready-to-go framework or template that has already been tested.
Single-column layout
Simplicity is key. A single-column ensures no content will be completely outside the viewport when zoomed in.
Design/Develop for thumbs
Understanding that some of the email will be covered by a thumb is another important key. You should use ample whitespace to avoid accidental clicks and ensure buttons and links large to be easily clicked.
Test, test, test and test again
With over 30+ mobile email clients and countless desktop apps and browser, you can never test enough. You can use a tool like Litmus and make testing a lot easier.
Responsive Support
Responsive emails are supported by:
- iOS Mail app
- Android 4.x Email (OEM) app
- Windows Phone 7.5
- BlackBerry OS7
- BlackBerry Z10
Responsive emails are not supported by:
- iPhone Gmail app
- iPhone Mailbox app
- iPhone Yahoo! Mail app
- Android Gmail app
- Android Yahoo! Mail app
- BlackBerry OS5
- Windows Mobile 6.1
- Windows Phone 7
- Windows Phone 8
For a comprehensive list, visit the StyleCampaign blog.
Starting Out – Things you should know
Unfortunately, HTML emails suffer from a lack of standards. Layouts must be arranged with tables and CSS must be applied inline due to the outdated HTML rendering engines of some email clients. Several email clients will completely disregard any style declarations made in the <head> section of the document.
This is why you should start with a tested framework and/or template that has these tables and styles already laid out for you. It will take out a lot of the headache.
Media Queries
Responsive email uses a media query, also known as @media—a special set of CSS styles that act like conditional statements or dynamic rules. Carefully planned, they can help make emails more readable on different screen sizes.
Media queries will detect the screen size of a device and then use different sets of rules based on that screen size. Media queries can be quite complex, so again, it’s best to start with a framework or template that has these styles already written. Media queries require more planning and testing than standard emails, and don’t work in all email clients.
Here is an example of a media query. This media type states, “If the email is viewed on a screen size of 480px or less, use the following CSS.”
@media screen and (max-width: 480px) {
}
So any styles between the { } will only be visible on screen sizes of 480px or less. This screen size and lower is where you would want to be very conscious of whitespace and your end-users thumbs.
Flexible Images
A very important aspect of a responsive layout is how images can adapt to the size of their parent container. The basic solution is to define a maximum width of 100% and the height set to auto. This will make sure that your images are never wider or taller than the parent container.
.example img {
max-width: 100%;
height: auto;
}
Buttons
Calls to action (CTAs) are one of the most important parts of email marketing. They should be eye-catching, well-placed and usable. You should develop for both a cursor (mouse) and a finger (thumb). Make sure that the buttons are large enough for mobile users to use. Again, test, test and test again to make sure they are user-friendly.
In conclusion
Responsive email development is still not bullet-proof. There are a baffling array of different devices, email clients and rendering engines that give designers and developers a formidable task. However, I’m hopeful that someday we will have at the very least a set of standards for email design and development. This will just make everyone’s lives easier. Email is here to stay, whether we like it or not.
Resources
Responsive Email Resources
Litmus InfoGraphic