How to Overcome Responsive Email Design Stumbling Blocks

Over the years, ‘responsive’ has become a buzz word. Whether it’s a website or an email, it has become an absolute necessity. According to Ascend2, email marketing is being used by 82% of companies.  However, it cannot be said with surety as to how many of them are properly aware of responsive email designs and its relative concerns. Experian states that 24% of companies aren’t optimizing their email creative for mobile viewers in any way.

The importance of email marketing can never be denied and its value can be judged by a great quote of Colin Nederkoorn – the founder of Customer.io:

“If you’re running a real business, email is still the most effective way to universally reach people who have expressed interest in your product or site. For that, it really can’t be beat.”

Why does responsive email design matter?

 

Responsive email design statistics

• Email open ratio on mobile is now 55% – Source: Litmus “Email Analytics” (March 2016)

 

Source: Email Monday

 

• People prefer a user-friendly interface and want the email they receive to appear properly formatted on their smartphones. According to Litmus, 80% of the people delete an email if it doesn’t look good on their mobile device.
• Emails have become much more mobile-friendly. 50% of B2C brands use responsive email design for their promotional emails.

 

Source: Email Monday

 

Responsive email design stumbling blocks

 

Problems with email layout

The layout of your overall email design matters a lot. Especially for your email marketing campaign when millions of dollars can be at stake. Users can access your email from any device, each with a different size. It can be a Windows Phone, iPhone, iPad, Kindle, Nexus 6, desktop or laptop.

Make sure that your email caters to all types of devices in order to bring your expected conversions. Even a single mistake in the design or coding phase can ruin your overall campaign. Follow the below key pointers to avoid any errors or bugs:

1. To make your email fit for cross-platform, keep the width of your email at 600 to 650 pixels. But make sure that it won’t shrink to the narrow screen-size. Set a minimum width of 300 pixels.
2. Avoid multiple columns in your email design when you have a large list of mobile users in your subscription list. Multiple columns look cool on the desktop but can be a major factor in high bounce rates for mobile users. Consider following the single column for your newsletters. Single column emails are usually scroll-friendly and are preferred by most mobile users.Make sure users can clearly read buttons and text, and that white space on the sides of the email make your CTAs more prominent.
   
3. When you code your email, it’s important for you to make sure that formatting displays the same on all the email clients. Most marketers ignore the presentation of text in different clients. Let’s review some of the email spacing cases:Case # 1: Hotmail doesn’t support “margin” or “margin-top.”
   Tip: Keep your CSS properties limited to margin-left, margin-right and margin-bottom properties.Case # 2: Hotmail embedded CSS will affect your layout.
   Tip: Replace the below CSS properties to ensure clean paragraphing in your email design.
   Case # 3: Outlook, especially versions 2007 and 2010, does not support padding in paragraphs.Tip: Use the above-mentioned CSS properties along with margin-left, margin-right, and margin-bottom properties for all paragraphs.Case # 4: Issues caused in box model padding.

   Tip: Avoid setting width in tables or paragraphs, it is one of the best way to render an email on cross-platform email clients. Just to make sure that this property is working fine or not, test it in Internet Explorer 7 and Mozilla Firefox without a DOCTYPE. When you are OK with it, run an Acid Test to view it on all email clients.

   Case # 5: Embedded CSS troublesome with Gmail
   Tip: Use inline CSS instead. Make use of the “CSS Conversion” feature to convert all your embedded CSS to inline automatically.

   

Trouble with the visual elements

 

Visual elements matter a lot in your email marketing campaign. Visual hierarchy decides which part of your email is the most important and which section should be the center of focus. If you make the wrong choice in the selection of a visual element and in its optimization, then you can get into big trouble. Review these pointers to make the best use of the visual elements:

1. Images used in your design should be properly optimized. Avoid using large file sizes as it affects the overall performance and increases the load time.
2. Ensure that the width of the image does not exceed the actual display size of an email on different email clients. For this, you can set a minimum width to 100% on the image tag.
3. Provide alt text to all the images in your email design. It will help users in identifying the image when it’s not loaded due to slow internet connection.
4. Master the use calls-to-action. Keep your CTAs some distance apart so that your mobile users can easily access the desired link. Don’t stuff them too close together. Additionally, use high contrast colors for your CTAs because many mobile users use dim screens to save battery life. If their mobile brightness is low, they can easily see the main call-to-action points.

 

Ignoring email open rate factors

Apart from the technical concerns, responsive design (or the lack thereof) can affect the overall email opening ratio. Obviously if your main goal isn’t being achieved then all your efforts will go in vain. Let’s discuss some techniques that can enhance the email open rates:

1. Make a habit of using pre-headers in your email campaigns. It’s basically a short text or a summary text that appears after the subject line when an email is viewed in the inbox. Use catchy text as your pre-header text in order to attract more customers and encourage them to open your email.
2. Keep your email content short and sweet. Don’t rush it with too much content and CTAs. Be direct, concise and to the point so that the users can easily get the main vision of your email.
3. Use media queries to enhance the user-experience. It will help users to access emails through small screens that longer messages appear on desktop and allow mobile users to view them in browser. However, some email clients don’t support media queries so, in this case, the flexbox approach is very effective.

 

Missing the quality assurance process

Putting a lot of effort into designing and coding your email for both desktop and mobile but skipping the testing process is pure folly. It’s a must-do step that can’t be ignored. Don’t release your newsletters until and unless it is cleared from the quality assurance process.

 

Brands and their inspiring email designs

 

Mr. Porter

 

Being a subscriber of Mr. Porter, I admire their user-experience practices very much, whether it’s their website design or newsletter design. In the screenshot above you can clearly see how this brand has embedded the CTAs using whitespace. Additionally, they have placed a GIF image containing multiple products in a single gif image, which is a great example of utilizing small spots on the newsletter.

 

Sophie and Trey

 

 

Here comes another great example in Sophie and Trey, it’s a women’s clothing brand. I still remember subscribing to them last Christmas season just because of their outlandish marketing campaigns. Last year, they launched their 12 Deals of Christmas which was a great way to rejoice in the festivities of Christmas. The way they presented their newsletters was simply awesome and highly creative.  I observed a great use of contrasting colors so that even if your screen brightness is dim, you can easily grasp the main CTAs, displayed on all their top selling products within the second fold. Overall it was a simple, to the point, and a convertible newsletter design.

 

Hyde Park Jewelers

 

Source: Litmus

Hyde Park Jewelers is a brand that is dominating email marketing. They use well-styled image ALT tags so that subscribers can get the point at the first glance. Additionally, they also utilize .gifs in their newsletters to earn the customers’ attention.

 

Conclusion

The overall design and development of your responsive email is as important as your marketing strategy. You can’t just compromise with it else all your efforts will not pay off as you had planned. . Apply and implement the techniques provided in this article for a better user-experience and ROI growth.

What has your experience been with responsive email design? Share your story in the comments.

 

Related posts

• Soon All Your Emails Will Look Great on Any Device [SNEAK PEEK]
• Most Announcement Emails Suck

The post How to Overcome Responsive Email Design Stumbling Blocks appeared first on GetResponse Blog - Online Marketing Tips.