I’m compiling a comprehensive overview of the features of email clients that need to be taken into account when laying out and designing themes and email messages.
Email Client Statistics
Something like that.
Do not use media queries
Gmail App, Mail.ru App, Yandex App
, Mailbox App, Yahoo App, Windows Phone
- Outlook (Android) — incorrect percentage calculations for the width of multi-column elements. The margin of error is about 0.2%. It’s a small thing, but annoying.
- Yahoo! (iOS)—no CSS3 support (missing `border-radius`)
- Google Inbox (iOS, Android) — even more unpredictable behavior of the `width` property than in Gmail. Otherwise, the rendering principle is similar. No support for media queries.
- Gmail (iOS, Android) — the `width` property for block elements and images is essentially not supported. In emails with asymmetrical columns, things start to go haywire. If you send a non-responsive email, the client attempts to adapt it using its own algorithms. On Android, this also results in a mess. On iOS, you can view the unadapted original. No support for media queries.
- Mail.ru (Android, iOS)—generally okay. The text wrapping implementation is terrible. When converting a phone number into a link (or any text-to-link conversion, for that matter), the link itself doesn’t pick up the styling colors from the CSS. There’s no support for media queries.
- My.com Mail — the engine is identical to the Mail.ru app
- Yandex Mail (Web, Android) — no support for media queries. On the Android client, errors were observed when calculating the width of multi-column elements.
- Sparrow—was the perfect email client, except that its interface hadn’t changed since the days of the 4th-generation iPhone. It has since been removed from the App Store.
- Apple Mail (iOS)—the `body` element has a rigid `margin: 15px`; there’s no way around it.
- Mailbox (iOS, Android)—Overall, it’s excellent. But the default body values are zero, just like in all Apple email clients except Outlook and Apple Mail. As a result, it still falls short of Outlook.
- Android Mail — No complaints, except for the rendering of images whose original size exceeds the one specified in the layout. I’ve used a dozen Android phones, and across the board, all Android email clients display artifacts on images like these.
Universal HTML Tags for Layout
Basic fonts to use
