Looking at the statistics, it might not come as a surprise that emailers opened on mobile devices accounted for 48% of all opens as of November 2013. When we consider that mobile opens were 25% about a year ago, that statistic is actually quite impressive. When comparing mobile opens to Web mail and desktop email clients, mobile has the highest percentage of open rates! With mobile usage on the rise, it’s becoming increasingly important to consider the mobile experience in all aspects of your Web marketing and development.
So what’s wrong with your current desktop-centric designed emailer? If you haven’t considered how your emailers are viewed on mobile devices, you might be extremely surprised to learn how dysfunctional they become on small screens. Images are moved and text columns become so narrow it makes reading impossible. Because mobile received the largest percentage of unique clicks (40%) in 2013, it’s critical that you ensure your emailers are completely accessible across many devices and browsers!
Etna Interactive is excited to announce that we offer beautifully designed, responsive email campaign templates! If you’’re wondering how we did it, here are some methods and tips that Etna Interactive used when we built our responsive emailers.
Method 1: Fluid Tables
One method for making static emailers responsive is using fluid-width tables. By using percentages on the tables and cells instead of exact widths, the table can shrink or grow to fit the device window.
The great thing about this method is that it will work on all mobile devices. However, tables without exact widths do not get along with the Outlook desktop client. Bummer! Even though there is a nifty little work around to force Outlook to recognize exact widths on tables, Outlook was still unhappy with my “moving” layout.
If you are interested in trying out some fluid-width templates, check these out.
Method 2: Media Queries
The second method is to use similar code that Etna Interactive already uses on our mobile sites now. By using a media query callout, the emailer can recognize when the screen is a small width. Then, new styles are applied to make the layout and content fit on the smaller screen.
Of course, this method has a number of issues on different email clients. Surprisingly, Google’s Gmail is unable to recognize media queries. When Gmail attempts to render the email on a mobile device, it does a horrific job of adapting the emailer to the smaller screen.
Here is a basic template using media queries. Try collapsing your browser window to see the magic (responsive layout) happen!
The Takeaway
Discovering that Gmail and Outlook, some of the most-used email clients, provide such poor rendering of modern emails is astonishing. However, don’t let this drawback stop you from considering the implementation of responsive mobile design! Remember that 48% of your clientele could be viewing your email campaign from their phones or tablets.
By using a combination of the 2 methods, your emailers will be much more accessible and useable than in their original desktop versions. Here are some additional tips for designing and implementing your emailers:
- When designing emails, keep it simple. Full-width images and one-column designs are the best.
- The templates mentioned above are a great starting point, but it’s important to test rigorously on as many different email clients as possible. Compatibility is key to reaching as many patients as possible.
Etna Interactive can help you develop an emailer strategy that has responsive capabilities built in. We can help you pick or build an email template that will allow you to reach the most patients and provide those patients with the best viewing experience on their mobile and desktop email clients.
Leave a Comment