With the world already having shifted to mobile-based websites, shopping, apps and browsing, one would think responsive emails would follow suit. This is not completely true, at least not yet. Though many websites now have a mobile-responsive experience, if not a stand-alone, mobile-only website specifically tailored to a small phone screen, email has been a little slower to follow the trend.
For our clients on email marketing programs, we steadily see a fairly even 50/50 split between mobile and desktop email opens across the board, for e-commerce and service-based companies alike. The importance of creating an impactful email that at least 50% of our client’s customers will see on a small screen is very important. We wouldn’t want to send an email out for our client and have 50% of their audience not have a good user experience.
The solution is to create an email that is, at the very minimum, Mobile-Friendly. Images and text included must work on both a small screen and a large monitor. The best way to go about this is to think simple. Use a single column, rather than having multiple columns of info and images. Have the images be full width (which is typically 600px-800px) to fill the width of the email, and add your text above or below, rather than wrap around the image. Keep lengthy text articles to a minimum, instead give a snippet of what you want your readers to read, perhaps the first paragraph or two of your article, and link to the rest of the article in your blog.
Another solution is to make your email Mobile-Responsive. This type of email uses CSS media queries to adjust the email on-the-fly to fit the size of the screen you are viewing the email on. Many websites now are using this style of programming to maintain only one website that “responds” to the width of the screen. To achieve this for emails, the CSS is placed inline to control width (for example, <table width=700px>) and then media queries are placed in the <head> or <style> areas of the email to adjust the CSS for smaller screens:
@media only screen and (max-width:480px) {
table {width:100%!important;}
}
(It is required to put !important on the media query because the inline CSS will take precedence over any CSS anywhere else, and this will override inline CSS on smaller screens).
There is currently one major drawback, however, to responsive emails… Gmail. Folks who use Gmail for their email client, and view their emails using a browser or app on their phone will have some of the media query CSS stripped out of the <head>, and the email will render on a phone screen the same as it would on a desktop. This can be problematic if you have constructed a complex email with columns, media queries or divs and floats.
MailChimp, one of the bulk email providers, has constructed a handy-dandy series of charts that will help you determine who will see your email as responsive and who might have code stripped out. As you can see in the chart, if you add <style> tags to the head of your email containing CSS and media queries, customers viewing your email in a browser using Gmail or via the Gmail app will not see your email as intended.
If you look at your email subscriber list, and find that you only have a few Gmail users, you might segment them out and create a simplified or non-responsive email for them. But if you find many in your list with Gmail addresses, you may want to rethink your use of responsive email for now.
All emails moving forward should, at the very minimum, be mobile-friendly. Designing with mobile in mind is key. You need to remember that upwards of half of your audience will be viewing your email on a phone, so your design needs to be acceptable for large and very small screens. The old adage of Keep It Simple, Silly (KISS) definitely applies. Your message should be impactful, your graphics well thought out, and your imagery suitable to any size screen. If you include images with text, the text should neither be too large and garish on a desktop, or too small and unreadable on a phone. Always send yourself test messages, and view them on your desktop or laptop, and a phone, if possible.
MailChimp and Constant Contact, another popular bulk email provider, have added code to their pre-made templates to make them more mobile friendly, and even responsive, and more will be done in the future. The email landscape is finally beginning to change to keep with the demand and use of mobile devices.
Leave a Reply