Email best practice

It’s a feature, not a bug: email edition

Illustration of man and cogs

Are those pesky email applications messing with your design? You didn’t want that address to be automatically linked to Maps, and you certainly never asked for telephone numbers to be underlined! It’s time to squash the bugs.

The battle begins

Overriding a piece of email software’s functionality often isn’t a simple task. The only tools at our disposal are HTML, CSS and a bit of imagination. Email development forums are awash with questions and suggestions on this topic, plus a graveyard of now-defunct solutions. There’s much trial & error, and the successful method usually amounts to some kind of hacky trick.

Here’s an example. Some versions of the Outlook mobile app will recognise and auto-link dates and times to the user’s calendar. This also turns the associated copy blue. One effective solution is to secretly break up the text with an invisible special character called a zero-width non-joiner. Congratulations – you have successfully tricked an application into losing functionality!

Don’t fight functionality

But why would anyone want to do that? The fact that there’s often no easy ‘fix’ for these ‘problems’ says a lot. The problem does not lie within the application’s functionality. It lies within the sender’s design and objectives.

Suppressing a piece of functionality is not in the spirit of accessibility. And to be frank, it’s not the sender’s decision to make. Nobody likes it when a website blocks or forces the opening of links in new tabs. A similar etiquette applies to the world of email.

Design around it

Addresses are another type of content that could be auto-linked and coloured blue. If they’re sitting on a coloured background, that could result in an ugly clash and illegible text. The solution: place them on a white background instead. Cosmetics do not trump usability.

Example of address in an email being auto-linked to maps
Outlook has helpfully linked that address to the maps application. Should we break that… or change our background colour instead?

Reallocate the effort

I mentioned trial & error earlier. That means editing code, uploading it to an email platform, sending tests, and checking them on real devices and/or previewing services. All of this all takes time. But this is not a task that deserves it.

Imagine what could be created in that time rather than destroyed. Optimum email designs. Improved accessibility. Better content. Don’t squash the ‘bugs’ – give them a better habitat instead.