Since its debut in october 2019, Gmail’s dark mode has been causing a lot of headaches. It has improved and standardized over time, but there are still glaring differences between Gmail’s dark mode in iOS versus Android.
One of the most inconvenient problem in iOS in particular is that Gmail insists on changing any light text color to a dark text color. So an already dark email with white text on a black background will turn black on white. Not only does that seem counter-efficient, but it also creates real accessibility and readibility issues.
Take this email from Nest for…
There is no such thing as a “web safe font”.
There, I said it. I’ve seen so many posts asking for safe fonts to use in HTML emails, usually answered with a reduced list of fonts available on Windows. So let me explain why safe fonts is a fallacious concept and how much more there can be to fonts in HTML emails than Arial and Times.
Fonts in an HTML email can come from four different sources:
Let’s talk about each of those.
Every operating system comes with a default set…
In 2007, Apple introduced the first iPhone. The same year, Microsoft introduced Outlook 2007 on Windows and its brand new HTML and CSS rendering engine: Word. It makes a lot of sense from an authoring point of view. But let’s just say to keep things polite that Word is not very good at rendering HTML and CSS. And while Outlook on macOS, iOS or Android all use WebKit or Blink as a rendering engine, even the latest release on Windows (Outlook 2019) still uses Word. …
Testing is a very important part of coding robust HTML emails. But you might not always have the time to do extensive tests. Here’s the top three email clients I recommend testing in.
styleattributes if there's something it doesn't like in it, …) plus the extra layer of GANGA, meaning no
<style>and no media queries support.
When I started working on Can I email, I faced an interesting problem very early on. How will I organize email clients?
The biggest reference at that time, Campaign Monitor’s CSS Guide, divided clients into three groups: Desktop, Mobile and Webmail. But I always found that confusing because a webmail could either be a desktop webmail (like Gmail’s), a mobile webmail (again, like Gmail’s) or both (like Outlook.com). Then, Campaign Monitor listed clients by alphabetical order. This seemed like a logical solution. But it revealed to be a frustrating one to use. …
I wrote about Gmail CSS support in 2016, quickly followed a few months later by an update following Gmail’s big responsive update. I tweeted another update in 2018. But I feel a proper article about it is long overdue. So here’s what I understand about Gmail CSS support that has changed since 2016.
While there wasn’t a single update as big as the 2016 responsive update, Gmail’s updates have been adding up. Here are the three most significant updates of Gmail regarding HTML and CSS support.
Today, barely six months after, I am really happy and pleased to announce that with the help of my colleagues and members of the email geeks community, we’re officially launching caniemail.com.
So far, we have more than 50 HTML and CSS features tested across 25 emails clients. And we’ve got a lot more coming up in the following weeks and months.
We’re also delighted to present the Email Client Support Scoreboard. For the first time in history, we provide…
This morning I was doing some tests in Outlook on supported styles for HTML lists. And my focus quickly diverged to something completely unrelated. Using What does it paste for the first time to get the code generated by Outlook and its Word powered rendering engine, the
<head> of the code contained the following:
<style> <!-- /* Font Definitions */
panose-1:2 15 5 2 2 2 4 3 2 4;
mso-font-signature:-536859905 -1073732485 9 0 511 0;
@font-face? In Outlook? How can that be?
If you’re familiar with web fonts in emails, you…
Last month, Panic announced Playdate, an adorable handeld gaming system with a black and white screen. And a crank. Yup. I’ve been a pretty big fan of Panic for a long time now, from Coda to Steven Frank’s How to Count to one of my favorite t-shirt ever to Firewatch. And their teaser page is really stunning, with an interactive 3D model of the console you can manipulate in your browser.
This inspired to make a little something based on an old experiment I did three years ago for a client. Without further ado, here’s an interactive animation experiment in…
Last week I attended the EMday conference near Paris and shared some of my best practices for coding HTML emails. I wrote a full document and it’s available on GitHub for anyone to share, contribute and adapt to your own needs. This is heavily inspired by some popular web coding guidelines, like @mdo’s Code Guide and Stack Overflow’s Email Design Best Practices.