How to design and build email-friendly buttons for your marketing campaigns

Emails have truly evolved since the concept was first invented in the 1960s. Despite this, email remains incredibly simplistic at its core – a direct way to reach out to somebody. It’s likely that this is why email, despite most other areas of computing being heavily iterated on (or outright replaced), has remained so popular, and why email marketing remains one of the best digital marketing techniques to date. A 2015 report found that email has a 38 times average ROI. It’s clear that email is important, and it’s equally important to do it right.

Over the last 20 years, browsers have slowly grown increasingly similar, and largely support the same features – a huge relief for developers. Unfortunately, the same can’t be said for email clients. While many have taken strides to standardize the email market, development still largely remains a wild west when it comes to feature support, often resulting in large groups of recipients receiving less than adequate experiences, or just disregarded altogether.

Online resources

So how do you design an email when many common styles used on the web today just don’t work? The first to do is to decide on your client support. This will affect what features you can and can’t use. For example, Outlook doesn’t support shadows, rounded borders, and even padding in some instances. The best way to get familiar with the limitations of an email client is to use Can I Email? – this is a great, free tool that lets you type the name of a feature and instantly see which email clients support it.

These limitations can often be avoided by keeping layouts simple, often just one or two columns with basic text and image sections, but what about buttons? The call-to-action is the most important part of the email, which drives traffic to your website. They need to stand out, yet display reliably.

Keep it simple

A simple block is often all you need to draw the attention of the reader, a bold color that stands out from the main document. Rounded corners, gradients, and shadows can look nice, but are often not needed and have poor support on Outlook and older clients.

Be careful when it comes to fonts

Many clients don’t support custom fonts, and if you try and use a custom font with Outlook, it will completely break and display as Times New Roman. Your safest bet is to use system fonts, but if you really want to use custom fonts, you can let other clients fall back to something else and use this snippet to force Outlook to use Segoe UI, Windows’ default font.

Progressive enhancement

Progressive enhancement usually refers to web development, where features are present for browsers that support it, but gracefully falls back to an alternative for those that don’t. This is something you can adopt for email development too. Use features you know some clients don’t support, but making sure the experience for those users is still good. Your client usage statistics should play a big role in the degree to which you use progressive enhancements. A majority-outlook audience is likely not going to benefit much from the extra flair of custom fonts and hover states, for example.

Component driven email development

The easiest way to handle your email development is to use a component-driven framework like Maizzle. These handle almost all of your email-specific optimizations and client fixes and allow you to create a single button component that you can reuse in any of your email templates, knowing it will work reliably.

Example

The following code works in all major email clients:

See the Pen Email Friendly Button by Sam Beevors (@16-Bit-Bacon) on CodePen.