Interactive Email Examples
Email · Interactive examples
emails you can tap.
Carousels, tabs, accordions, tap-to-reveal offers and GIFs, designed to work inside the inbox and to fall back cleanly where they can’t. Try the three live examples below, then switch them to see what Gmail and Outlook show instead.
Every example uses Pellow, an invented bakery in Bath that we use to show our work. Pellow is not a client, and the prices and codes are made up. The emails below are the real HTML, so what you tap here is what a reader taps in their inbox.
01 · Festive
A Christmas email with a product carousel.
A snowy GIF sets the scene, then a carousel shows four Christmas bakes. Tap the arrows or the photos to move through them.
- Animated GIF hero with a first frame that works on its own
- Image carousel built with radio buttons and CSS, no scripts
- A two-by-two product grid as the fallback
- A button that also renders properly in Outlook
Interactive is what Apple Mail, iPhone Mail and Samsung Email show. Fallback is what Gmail, Outlook and most other inboxes show.
02 · Weekly
A newsletter with tabs and an accordion.
Tabs let readers flip between bread, pastries and lunch without scrolling. The FAQ opens one answer at a time.
- Three tabs in the space of one section
- An FAQ accordion that opens and closes
- Everything listed in full for Gmail and Outlook
- Dark mode colours for Apple Mail
Interactive is what Apple Mail, iPhone Mail and Samsung Email show. Fallback is what Gmail, Outlook and most other inboxes show.
03 · Loyalty
A reward email with tap to reveal.
A GIF stamps the tenth loaf on the card, a tap reveals the code, and a one-tap star rating asks how the last loaf was.
- Tap-to-reveal code with a small pop animation
- Stamp-card GIF in 36KB
- One-tap star rating that works in every inbox
- A gentle button animation that switches off for reduced motion
Interactive is what Apple Mail, iPhone Mail and Samsung Email show. Fallback is what Gmail, Outlook and most other inboxes show.
Support
Where interactive email works.
Interactive email works best in Apple Mail, which many people use on their iPhone. Elsewhere, readers get the fallback, so every interactive email is really two designs.
| Inbox | Tap interactions (carousel, tabs, accordion) | CSS animation | Animated GIFs |
|---|---|---|---|
| Apple Mail Mac, iPhone, iPad | Yes | Yes | Yes |
| Samsung Email | Yes | Yes | Yes |
| Thunderbird | Yes | Yes | Yes |
| Gmail Web and apps | Fallback | No | Yes |
| Outlook for Windows Desktop app | Fallback | No | PartlyOlder versions show the first frame only |
| Outlook.com And the Outlook phone apps | Fallback | No | Yes |
| Yahoo Mail | VariesTest before you send | Web only | Yes |
Based on support data from caniemail.com. Email apps change often, so we test every build before it goes out.
Best practice
Eight rules we follow.
Design the fallback first
Most of your list will see it, so it has to work as a normal, good email on its own.
Keep the message outside the tap
The offer, the date and the main button never hide behind an interaction.
One interaction per email
A carousel, tabs and a quiz in one email is a website. Pick the one that helps the reader most.
Make the first frame count
Some versions of Outlook only show the first frame of a GIF, so that frame has to work without the rest.
Keep GIFs light
Large GIFs load slowly on mobile data. The snow GIF above is 291KB and the loaf card is 36KB.
Stay under 102KB of HTML
Gmail clips longer emails and hides the rest behind a link. Our largest example here is 27KB.
Respect reduced motion
If a reader has asked their phone for less movement, the animations switch off.
Real text, alt text, dark mode
Headlines, prices and codes are live text, images have alt text, and colours hold up in dark mode.
Christmas emails
Planning your festive campaign?
Seasonal emails are where a little movement earns its place. A few ideas that work well for small businesses:
- A gift guide carouselShow the range one product at a time, with a full grid for Gmail and Outlook.
- An advent-style revealOne offer a day, uncovered with a tap. The code is still visible in the fallback.
- Order-by dates up frontThe last order and collection dates near the top, repeated next to the button.
- Collection and delivery in an accordionThe details are there for anyone who needs them, without taking over the email.
- A light GIF heroSnow, steam or sparkle, with a first frame that works on its own.
how we build them.
Every interactive email is two designs: the version Apple Mail readers can play with, and the fallback everyone else sees. Both get the same care.
01
Pick the interaction
We start with one goal, such as browsing a range, finding an answer or revealing an offer, and choose the interaction that serves it.
02
Design both versions
Desktop, mobile and fallback designs in Figma, checked in light and dark mode.
03
Build the template
A ready-to-use HTML template with the interactive layer and the fallback, ready to load into your email platform.
04
Test and hand over
We test in Apple Mail, Gmail and Outlook, then hand over the template and the design files.
questions, answered.
What is an interactive email?
Does it work in Gmail?
Is it worth it for a small business?
Can you add interactive parts to our existing template?
What about AMP for email?
Have a campaign coming up?
want one of these? let’s talk.
Tell us about the email you have in mind. We’ll suggest the interaction that suits it, or tell you honestly if a simpler email would do the job better.
