Benefits of Sending Emails That Follow Responsive Design

Newsletters provide businesses with a great way to reach out to their customers. There is a huge chance that most of your customers have a smartphone or tablet, and many of them are subscribers to your newsletter. Likewise, some of your subscribers will probably read your email newsletters on their devices. For this reason, it is important that your email newsletter should follow responsive design.

Statistics on Mobile Email Use

According to the latest figures for December 2016, about 55 percent of email opens will come from mobile devices, clearly surpassing webmail and desktop email opens. Mobile mail will account for 15 to 70 percent of email opens, depending on the target audience, product, and email type. Given these statistics, it is important to ensure that your email messages are optimized for mobile devices.

How to Prepare for Responsive Design in Email Marketing

resposive design in email marketing

Responsive emails utilize fluid tables and images to make content readable across different screen sizes. By using CSS media queries, they can change fixed-width tables and images on desktops and make them fluid on smaller screens.

With media queries, designers can specify certain styles and conditions based on certain circumstances. The parameters are fed into the query as well as the styles and they are then applied to the email if the conditions are met. In the case of email and mobile devices, the conditions are the size of the screen.

It is worth noting, however, that not all email clients are made equal. While one email will work on one device, it may not function on the other. How an email HTML template will display may vary from one inbox to another.

For instance, while Android’s email client is known for its superior CSS support, some clients ignore the styles within the tags. The email client of iOS devices, on the other hand, do not only offer trouble-free email reading but also have a huge percentage of email opens.

Optimizing your email for responsive design does not only involve taking a crack at mobile-specific CSS. There are still other things that you need to consider, such as the following:

  • Column layouts not exceeding 600 pixels in width are effective on mobile devices.
  • Links and buttons should at least have a target area of 44 x 44 pixels to look good on iOS devices.
  • The minimum font size on iPhones is 13 pixels. This is quite important when styling text. Smaller fonts will be upscaled and could break the layout. Overriding this behavior on the stylesheet can be a good remedy, though.

Here are some quick tips to ensure that your responsive email achieves its intended purpose:

  • Keep your message concise. Put all the important design elements in the upper portion of the email.
  • If possible, use display: none to hide extraneous details in your layout. While social sharing may look good in a desktop inbox, it may not be the same on mobile devices.
  • When testing an HTML email or template, create two layouts—one on the desktop/webmail and the other on mobile. Be mindful of where the call to action button appears on both layouts.

With responsive email design, a designer has plenty of options to control the content display across devices. Media queries have a powerful effect that gives designers an option to target and adjust the layout and style of content at a very granular level.

Unfortunately, it is not supported in all platforms. For instance, some clients do not have full support for styles in the head of an email, making responsive design useless in most of the platform’s client.

What is Hybrid / Spongy Coding?

hybrid coding for responsive design emails

Hybrid coding came about as a direct reaction to clients such as Gmail that ignore media queries. The technique adopts the same principles used in traditional responsive design but carries them out differently. It still uses fluid tables and images by default. Instead of triggering their fluidity on smaller screens, the technique favors Microsoft conditional comments to restrain them on larger displays.

Hybrid coding offers support for virtually any email client out there. Since most of the details are in the body of the email, clients that strip or ignore media queries won’t be an issue. Aside from that, media queries can be used as enhancement for clients that offer support for them.

However, hybrid can become complicated when used on complex layouts. Although there are techniques for two, three, or four column layouts, they can be harder to implement and more fragile than the traditional responsive emails.

Choosing Between Traditional and Hybrid Email Design

Now that you know that both traditional and hybrid email responsive design have their respective advantages and disadvantages, which one should you use? To answer this question, you need to consider the following:

  1. Are you using other email clients?
  2. Do you have a complex layout?
  3. What is your comfort level with complex codes?

The hybrid design approach is a relatively new player in the email industry. Many designers and developers are just starting to test the waters with this approach. In order to develop robust hybrid emails, you would need constant practice and experimentation to become proficient with developing them.

If you do not have the time and knowledge with hybrid coding, the traditional approach might be the approach for you.

However, if you require support for other email clients or have configured your campaigns for future email client updates, then hybrid coding is the right approach for you. Despite the confusion brought about by complex layouts and familiarity with hybrid coding, investing on knowledge and experimenting with it may pay dividends in the long run.

Although a one-column HTML email layout is the best option when optimizing your newsletter for mobile devices, it is still possible to create responsive 2-column layouts without tweaking your stylesheets in media queries.

Two-column layouts will often require more content to feature above the fold-on desktop email clients, and they can be difficult to read and navigate on the small screen of mobile devices. However, this can be fixed using old-fashioned coding.