blog
Building Responsive Email Designs
As mobile devices are getting more and more popular with each passing day, it has become incumbent upon the marketer to build responsive email designs to cater to the mobile users. Designing responsive emails has become a must if you want to create a pleasant experience for the subscribers. An email newsletter can render well in the inbox on the desktop, but if not coded properly, it can lead to small fonts, narrow columns, and broken layout in mobile devices.
That said, let us first understand the difference between scalable, fluid, and responsive email designs.
Scalable Email Design
Scalable email design usually includes a single column layout scalable for all devices, large, attention-grabbing text, and clear, clickable call-to-action buttons.
Fluid Email Design
Percentage-based sizing is used to build fluid email designs. Such designs automatically adjust the table width and image size according to the screen of the device. This format is suitable for brands who are amenable to extra whitespace around the email copy.
Responsive Email Design
Responsive email designs allow the marketers to send email templates that adjust according to the size of the screen they are viewed on.
Of all these formats, responsive email design is generally recommended as these emails ensure correct rendering irrespective of the device.
Advantages of Responsive Email Designs
With responsive emails, you have the privilege to perform the actions as enlisted below:
- Change hierarchy and navigation
- Enlarge fonts
- Modify the color combination
- Change the layout
- Scale images
- Add padding
- Change or hide content
Responsive emails have a better-structured template that lets you save time in designing it. You only need to edit few lines of code rather than designing new tables and layout every time.
How to design a responsive email?
1. Focus on short subject lines and smart preheaders
Responsive email is not just limited to the email copy. Your subject line and preheaders should be drafted in such a way that the mobile users can easily comprehend the email message.
2. Have a single column layout
Using a single column layout makes it more convenient to read the content because of less shifting and moving.
3. Maintain the right font size
13- or 14-pt is the optimum font size for the body text while 20-pt should be used for the titles. Doing so will ensure better readability on the small screen. Add line breaks at every 60 characters in your plain text emails so that it becomes more legible.
4. Follow a visual hierarchy
Place the most important information at the top followed by the moderately important part and the important part. By following this practice, your readers will be able to read the most important content without having to scroll. An effective practice is to place all the important content in an “F-shaped” pattern. Readers are likely to read the headline first and then the text placed at the side and lastly the middle portion of the copy.
Take a look at the example below:
5. Use hyperlinks appropriately
It is advisable to refrain from using hyperlinks and particularly having a couple of hyperlinks together. Have you ever attempted to tap on one link and ended up selecting another one that was just adjacent to it? Annoying, isn’t it? To make sure that your subscribers do not have to face this, use a large and easily tappable button of 44x44px as recommended by Apple.
6. Include smaller and responsive images
Smaller and responsive images help to ensure that it does not hamper the loading speed of the email. Size the images correctly so that there is no squishing or stretching.
Also, do not forget to add suitable Alt-text to cater to the subscribers who have images turned off in their email clients. Such emails are accessible to all the subscribers including the ‘specially abled’ who are taking help of screen readers or other assistants to view your email.
If your subscribers are mostly using Apple devices, it is advisable to use retina images. It will help you create highly visual as well as light-weight emails.
7. Have ample white space in the email
Mobile screens are smaller in size which makes it imperative to avoid clutter and have enough white space in the email. This will impart a neater look to the email and the subscriber will be able to grasp the message.
8. Test your email ALWAYS
Litmus and Email on Acid are two most popular email testing tools that let you know how the email will appear in your subscriber’s inbox. It is an easy and quick method to avoid any rendering issues on mobile devices.
9. Coding a Responsive Email (with Media Queries)
The foundation of responsive email lies on media queries. Media queries are fundamentally a stylesheet placed within a stylesheet.
To create such emails, the media query’s styles should be nested in the <style> tag.
<style type=”text/css”>
.standardCSS{
color:# f5afad
font-size:12px;
}
@media only screen and (max-width:600px){
.mediaQueryCSS{
color:#f1c319;
font-size:24px;
}
}
</style>
@media only screen and (max-width:480px){
The opening is @media at-rule, followed by a keyword. Here, ‘only’ works as the keyword which limits the display of the media query styles to the specified media type. Next, the media type is set. Generally, ‘screen’ and ‘print’ are used as media types. They provide various style rules for displays and printers respectively. Media type is followed by another keyword ‘and’. It ends with the ‘media feature’.
Several media features are available, but the most important ones are max-width and max-device-width.
The feature max-width measures the space available in the browser, while the feature max-device-width considers the screen size of the device.
Inline Styles and Media Queries
As media query styles are not default styles and work on a trigger, it is not recommended to inline it. Therefore, you should inline the normal CSS and the media query CSS should override the styles on being triggered.
As inline styles possess the maximum specificity in the cascade, you should mark each media query style rule with !important declaration.
<style type=”text/css”>
.standardCSS{
color:#f5afad;
font-size:20px;
}
@media only screen and (max-width:600px){
.mediaQueryCSS{
color:#f1c319 !important;
font-size:24px !important;
}
}
</style>
Media query styles can be left in the <head> of your email because email clients supporting media queries do not strip out the <head> or <style> portion.
Coding a Responsive Email Without Media Queries
Some of the new email apps mushrooming in the digital marketplace do not support media queries. Moreover, the screen sizes of devices are different for mobile phones, tablets, laptops, and other digital devices. A responsive email created by stacking <td> might not work in certain email clients on iOS or some of the native email apps on older Android versions. All these challenges made it incumbent upon the email developers to create a responsive email without any media queries.
The two frameworks that can help you in building beautiful responsive emails are Zurb and MJML. While HTML codes are lengthy and time-consuming, these frameworks make the task of coding responsive emails faster and easier.
Advanced Tricks to Create Responsive Emails
- It is a great idea to use innovative pixel art and highlight the alt tags. However, scale the pixel art for smaller devices.
Here’s an example of Lego.
- To create an attractive information hierarchy, you can use accordions and stack up content-heavy emails. It will not only make your emails interactive but also enhance the subscriber engagement. The highlight of this element is that you can track which section garners the maximum subscriber attention.
- Refrain from adding full-blown navigation bard in the email. Instead, you can add menus in the email and make the navigation more intuitive.
- Stick to web-safe fonts like Arial, Helvetica, Tahoma, Times New Roman, and Georgia. If you are using attractive typography, do not forget to add an appropriate fallback that matches the custom fonts.
- Design your emails using one or two colors. Cleaner email designs always have fewer colors. After all, monochrome emails can look attractive too.
Wrapping Up
Taking a “mobile first” approach is of paramount importance as most of your subscribers are opening the emails on their mobile devices. A bonus tip is to have a checklist to offer a flawless experience to every subscriber irrespective of the device they use.
The tips shared here will surely help you in designing responsive emails that will be compatible with every device and look good on all screens.
Do you have any other tips to share? We would love to hear from you.
Author Bio:
Chintan is Head of Operations at InboxArmy LLC. He has been into email marketing domain from last 7 years. Chintan is connected to InboxArmy, a professional email marketing agency that specializes in providing advanced email marketing services from email production to deployment. Chintan’s success track record covers building email programs at competitive email marketing pricing and using data-driven strategies to turn around underperforming accounts. For more information please visit https://www.inboxarmy.com.
