Congrats! Your organization has finally taken the plunge into the world of responsive email. You may already be seeing a decrease in unsubscribes, an uptick in click-through rates and a boost in overall engagement. Well done!
Getting to this point isn't easy. If you thought coding HTML email was tricky, adding media queries and responsive CSS introduces a whole new level of challenges along with the rewards that make it worthwhile.
But while it may be a bit more time-consuming and complex to develop your custom templates, once they’re built you can take advantage of all the features responsive email brings to your mobile audience. Scaling images and tables to fit the available width perfectly, changing text styles for much improved legibility, and the ability to adjust the layout for a more optimal mobile experience are just a few of the most popular features of responsive email.
Speaking of adjusting the layout (also referred to as stacking content, column drops, reflowing content, etc.), do you know if your responsive content is displaying the way you expect it to on mobile email clients that support responsive email? We've seen a few support cases in which templates that were tested and believed to be coded to reflow content simply didn't, at least not in all responsive email environments. Instead of elements being rearranged to stack on top of each other as expected, some recipients were seeing broken table layouts.
It seems there are some responsive email coding practices out there that could use a best practice update for improved rendering. Let’s take a look at two commonly used coding methods for stacking or reflowing multicolumn layouts in a responsive email, and talk through how you can ensure the best customer experience.
Method 1: Applying “[ display:block ]” to adjacent cells in the same table.
This method is easy to implement and looks great when testing in local Web browsers, iOS devices, and even Android native email client previews available in tools like Litmus and Email on Acid. Having said that, we recommend that you don’t use this method. Simply put, this method isn’t supported in all Android environments that support responsive email. Even though the Android previews in your favorite email rendering preview tool may look fine, there’s a bit more to the story.
To understand why, it’s instructive to compare the email experience on an iPhone or iPad to an Android device. Apple manufactures all iOS devices, and as a result there’s a reliable consistency in the native email apps across these devices, with emails rendering similarly across the varied iPhone and iPad products available.
In contrast, several different companies manufacture Android devices. And this is where the confusion comes in, as there are some misunderstandings as to what the native Android email client actually is.
The best way to clear up this confusion is to take a look at the icons for the Android email apps themselves:
When support for responsive email on Google Android’s native email client is mentioned, this is the email client to which people are usually referring. Popular render preview tools offer versions 2.3 and 4.0 for testing.
Because the Gmail app is commonly preinstalled many on Android phones, many people mistakenly consider this the Android native email client. This client does not support responsive email.
This is where it gets a bit more interesting. The Samsung native email client supports responsive email, but for unknown reasons doesn’t support Method 1 for reflowing content.
You may be tempted to write this email client off as just another in the list that doesn’t support responsive email yet and ignore it. But before you do, consider this recent article by mobile app marketing and analytics blog Localytic, which reported that Samsung has a 65 percent share of all Android devices, with the popular Galaxy S series accounting for more than half of that Samsung market share:
Considering that Samsung appears to have more Android market share than the other major manufacturers combined, it’s pretty much a no-brainer to make sure you’re coding to a compatible standard if possible. And it is possible, which brings us to Method 2 for stacking content.
Method 2 – Side-by-side tables using the align attribute
This method starts with laying out separate HTML tables next to each other by using the align attribute. Setting the align attribute to left (or right) for multiple tables will cause them to lay out as next to each other as inline elements. If you have more than two tables, you can set them all to align=”left”. When the available width is less than the combined width of the tables, they will fluidly wrap.
This approach will add some unwanted spacing between tables when viewing in Outlook, but fortunately there’s an easy fix. Using the following conditional comment code will remove the unwanted spacing around tables using the align attribute:
Here’s how it works:
- Use the first line of comment code before the first stackable table. Also, set the width value to the width of your template.
- Add the second line between stackable tables.
- Use the third line after the last stackable table.
- Wrap all your stackable tables in one standard container table.
When you’re done, you’ll have a responsive email that’s coded to be more widely supported, with content that stacks up properly – even on more finicky Android devices!
1) White Paper: "2015 Email Marketing Metrics Benchmark Study"
2) Blog: “3 Questions to Drive Your Multiscreen Email Design Decisions”
3) Blog: "“USADATA’s Carolyn Nye on the Responsive Design Redesign Process”