Responsive design is a hot topic these days, and that discussion is extending more and more to include email design. While making your website adapt to screen size is an idea that’s improving as more companies embrace it, responsive email design still presents numerous issues—enough to make you reconsider whether it’s worth it to implement yet at all.
As some of our own readers brought up, Gmail on iOS and Android doesn’t currently support CSS media queries, which means that your delicately crafted responsive email might still be impossible to read for some users. Some other lesser-used apps suffer the same fate. In addition, you’ve got all sorts of quirks to consider across a range of mobile and desktop applications.
If your analytics don’t show high mobile engagement yet, you can try to wait out the technology, but you’re better off leaning into your inevitable future.
Think Mobile First
It’s often been said that constraints foster creativity, and the current landscape of email clients is no exception. By prioritizing mobile, instead of tacking it on, you can beat the squirrely bugs that plague mobile email clients, while also reaping the benefits that forced simplicity brings.
Using a single-column, responsive layout ensures that you’ll have an easily-digested design, even in a mobile Gmail app. In Pardot, the pre-formatted template fits the bill nicely, but there’s plenty of inspiration to roll your own. A single-column layout looks great on a desktop, too, as long as you have a maximum width set. Success!
You can still apply this principle when building a layout with multiple columns for larger screens, if needed: just use media queries to change the layout as screen size increases. Apps like Gmail will ignore these rules, and present the original layout. It’s the simple principle that “progressive enhancement” usually beats “graceful degradation”.
Though your larger content strategy for mobile emails is better left for a separate conversation, there are plenty of smaller, mobile-first tweaks you can make that lead to better interactions on any device.
For instance, make sure your text isn’t tiny—no one appreciates having to squint to read. Plus, we know that users love to scan text, so it needs to be understandable without reading all the text in order. Further, tiny text is hard to tap on a mobile device, and nothing ought to get in the way of users’ engagement. Stick with 14px body text at a bare minimum.
Speaking of ‘tappability’, set your most important links apart by giving them the button treatment: high contrast, padded areas that are easy to click. Make sure you don’t put multiple buttons in a small area — the “typical adult finger covers 45 pixels” on a mobile device. Fitts’s law (if we wanted to get nerdy about it) applies at any screen size, so give users room to miss a click every now and then.
Even links in a block of text ought to have visual separation, such as an underline. If you can’t tell the difference between a text and a link when your email is colorless, add more emphasis.
These guidelines help make your email design more engaging on any device by creating visual contrast that overcomes any CSS bugs you might encounter.
Analytics & Testing
As I said earlier, it’s a better idea to lean into a mobile world than to try to avoid it any longer. Analytics are somewhat of a lagging indicator, and don’t tell you much about what your users’ next device will be. But what analytics can guide you on, in this case especially, is testing. Prioritize the testing of email clients with the most usage, and know that your great design principles and solid codebase will carry you if you can’t test every one.
Adopting a mobile first design strategy for your emails puts you on more solid ground, no matter which client your email is viewed in.