HTML email development can be fun and creative. It can also be complicated and frustrating. You may spend hours crafting the perfect email, using clever interactive elements, custom fonts, and captivating CSS animations. But how many of your subscribers will be able to experience it all? 

If you start out with the most complex version of your email, you can end up spending hours re-coding (and possibly re-evaluating your career choice). Even then, you may never get it to display perfectly across all email clients. So was it worth the effort? Is there a better way to enhance the emails you’re coding? 

What if you started with something simple, something that was ideal for every inbox, and then built upon that basic email?

Progressive enhancement is a scalable approach that focuses on simplicity and accessibility first, so your emails are only as complex as they need to be.

Jump to a section to learn more:

• What is progressive enhancement?
• Graceful degradation vs progressive enhancement
• 10 progressive enhancements for email:
  1. Checkbox interactivity
  2. Hover effects
  3. AMP for Email
  4. CSS animations
  5. GIFs
  6. Custom fonts
  7. Custom bullets
  8. Rounded corners
  9. Drop shadows
  10. Media queries
• Why fallbacks are important
• Are progressive enhancements worth it?
• Essential element or progressive enhancement?
• Test your progressive enhancements

What is progressive enhancement?

Progressive enhancement is a method of building digital content and applications in a way that prioritizes usability across all environments. It’s usually discussed as a strategy for website design. But the principles of progressive enhancement are also important in other fields like software design and HTML email development.

The basic concept is to initially craft your website, app, or email so that your content is usable across all platforms, then add enhanced styles and functions using conditional statements and fallbacks so that only the clients that support them will display them. 

The overall concept is the same for any field’s design and development process, but there are some specific differences when it comes to progressive enhancement strategies for HTML emails. This chart lists a side-by-side comparison of the core principles of progressive enhancement for web and email development:

Progressive enhancement principles: web vs email

A simple example of progressive enhancement would be displaying a series of stacked, static images with descriptive alt text as the default in all clients, then using a media query to conditionally display an AMP image carousel for clients that support AMP.

Graceful degradation vs progressive enhancement

Graceful degradation is basically the opposite of progressive enhancement. Graceful degradation begins with the most modern and complex styles and functions and then adds options that gracefully degrade what is presented to the user. 

One example of graceful degradation that every email developer should be using is font stacks. In a font stack, you begin with the ideal custom web font that you want to display, then add other acceptable fonts in order of preference with the final font option being the most basic option. Declaring serif, sans-serif, script, or monospace at the end of your font stack will allow the email client to display whatever their default font is for that family.

font-family: 'Roboto', Verdana, Arial, sans-serif;

Some graceful degradation happens automatically, like with GIF support. If an email client doesn’t support animated GIFs, then it will default to displaying the first frame of the GIF. The only thing you need to do on the design side is to make sure your first frame displays the full content that you want the recipient to see. Otherwise, you don’t have to use any conditional statements to control the fallback display.

Which approach is right for email development?

Both! Using these techniques together (depending on the scenario) will help you develop an optimal user experience as well as make email coding less frustrating.

Email development expert, Rémi Parmentier, has this to say on the matter:

“As far as I’m concerned, email development is all about progressive enhancement and graceful degradation. Just because a nine years old desktop client like Outlook 2007 doesn’t support border-radius or animations and transitions in CSS doesn’t mean I shouldn’t use these for more modern clients. All that matters is that the email content is fully understandable by the recipient. If we had to conform to the lowest common denominator, we’d only send plain text emails.”

Rémi Parmentier

10 progressive enhancements for email

There are some common progressive enhancements used in HTML email development. The support for these features varies and it can be confusing to try to keep track of what clients support which ones. 

We’ll discuss ten of these widely-used progressive enhancements below, and we’ll use live images from the website Can I email to show you which of the major email clients support them.

When using any of the following enhancements, always make sure that you have default content and styles that display well and provide adequate functionality to all your email recipients, whether you’re using a progressive enhancement technique or graceful degradation.

1. Checkbox interactivity

Most interactive emails are based on the punched card method, which uses checkboxes or radio button inputs. These features are actually supported to various degrees on quite a few email clients, which makes them popular to use for email developers who want to add interactive features to their emails. 

You don’t have to use checkboxes and radio buttons just for creating simple forms, either. You can use them for creating an in-email checkout experience, tabbed content, accordions, quizzes, and games.

Of course, there are clients that lack support for this functionality in HTML emails. In some cases, checkboxes can be displayed but aren’t active. The :checked CSS pseudo-class selector is used to make that happen. Can I Email indicates there’s support in Apple Mail and Outlook for macOS as well as Yahoo Mail, AOL, Samsung Mail, and Thunderbird.

Checkbox interactivity could also be coded using AMP for Email to bring that enhancement to Gmail accounts.

2. Hover effects

Hover and rollover effects are a great way to add interactivity to your emails. You can use hover and rollover effects to provide additional viewing angles or color options for a product, create engaging buttons, reveal hidden clues for a puzzle, or as teaser content.

A lot of email clients support the :hover selector, too, so it’s a great place to start if you’re just getting into experimenting with interactive email.

3. AMP for Email

AMP for Email is a framework, using a subset of AMPHTML components designed specifically for email, which allows recipients to engage with interactive content directly within an email. While AMP for Email has limited support, if you have a lot of Gmail and Yahoo! Mail users, you might find it worthwhile to include some AMP elements. AMP for Email allows you to add quite a long list of interactive features. A few that stand out as particularly useful include:

• Date selection for bookings
• Payment acceptance
• CSS animations
• Product carousels
• Product pages
• Shopping carts
• Dynamic accordions
• Linked drop-downs
• Multi-page flow 
• Paged lists
• Polls
• “Show more” buttons
• Star ratings
• Tic-tac-toe games 
• Videos

Keep in mind that there are some AMP limitations in Yahoo Mail. Smaller clients like Mail.ru and FairEmail also have AMP support.

4. CSS animation

CSS animations are a great way to grab your reader’s attention and provide a unique experience. They’re more lightweight than GIFs, so they’ll help keep your email file sizes much smaller, which is key to preventing Gmail from clipping your emails. Keeping your email file sizes small also makes it less likely that mailbox providers will flag your message as spam. 

CSS animations also look a lot nicer than GIFs. For accessibility purposes, GIFs must have a slow frame rate, which can make them feel jarring. CSS animations are usually driven by scrolling or tilting and have a much smoother, user-driven speed. They also look great in high resolution mobile screens, whereas GIFs can feel blurry.

5. GIFs

Like CSS animations, GIFs can be a great way to enhance your subscribers’ experience and improve conversions. 

Even though GIFs come with some drawbacks, there are still quite a few good use cases for them. For instance, CSS animation has limited support. Gmail – which holds a large market share – doesn’t support it. And while it’s not universal, most clients do support GIFs.

If you want to create an animation quickly and aren’t well versed in CSS animation, a GIF is probably the easiest solution. Additionally, if you have GIFs that you’re using in other circumstances, you might want to use them in your email to retain brand consistency and save time.

Check out what some email marketers from big brands are doing with GIFs in email.

6. Custom fonts

There are a few different ways to add custom fonts to your emails. You can use <link>, @font-face, or @import. Each has its limitations and none of them are fully supported by all email clients. Below are the different methods of adding custom fonts and what clients support those methods:

<link>