email-design-evolution-2
23 February

Email design evolution: How interactivity and new tech changed email

Make the most of modern email capabilities
Table of contents
  1. Era of interactivity
  2. Interactive HTML content 
  3. AMP in email
  4. Ways to make email interactivity easier
  5. Dark mode in email design: Follow the black interfaces
  6. Email accessibility 
  7. A new era is upon us: using AI-powered tools for email design
  8. Wrapping up: Looking to the future of email design
1.
Era of interactivity

In this article, we explore how interactivity and technological advancements have transformed email design, moving beyond basic HTML to more dynamic and accessible formats. You’ll discover the latest email design trends, gain insights into modern email design ideas, and learn how to tackle the challenges of coding and rendering while maintaining engaging content.

In the first article about email design evolution, we discussed the journey from plain text to HTML emails. The next stages that we will talk about combine interactivity and increasing technological complexity. We will also look at the desire to make emails more convenient and readable through dark mode and increased accessibility.

In this article, we will analyze the latest trends in design, what prompted them, and what concerns they resolved. You'll learn whether email marketers should give up email interactivity and other modern design challenges due to complex email coding and rendering and which tools make email creation easier while maintaining dynamic and interactive content.

Era of interactivity

In the 2010s, it was no longer enough for email marketers to simply create attractive emails. In that era of growing competition, when every subscriber’s inbox was receiving a lot of emails every day, they needed something unusual, something that would attract attention, to set them apart from competitors and further involve users in communication with the brand.

It was then that emails marketers began to use dynamic and interactive content, with the images in the email becoming dynamic, or readers being given the opportunity to take some action.

The main difference between dynamic content and the new era of interactivity is that when using dynamic content, your reader is still just an interested viewer who is not actively participating. The main idea of interactivity is to allow the reader to do something in the email on their own instead of just passively reading your message, as was the case before.

Dynamic content in emails

Let's say a few words about dynamic content since it marked the beginning of the path toward interactivity.

Animated GIFs and countdown timers are two striking examples of dynamic content in email design that do not lose popularity.

Animated GIFs add interest to a message, help make an offer stand out, or just entertain and make the audience smile. They work well with call-to-action buttons, typography, and a minimalist layout.

(Source: Email from MacPaw)

A countdown timer is an invariable assistant for an email marketer when it is necessary to emphasize that the client needs to hurry in order to catch the best price, showing them that time is literally running out before their eyes.

Example of countdown timer for email campaign

(Source: Stripo template)

Interactive content in email

Emails also introduced interactive elements, functional elements in the body of an email that allow recipients to interact with the content. For example, readers can rate a product or service, add items to a shopping cart, answer a survey, or play a game directly in their inbox.

From a technological perspective, two ways to create interactive emails have emerged: HTML emails and AMP emails.

Interactive email content examples

According to a study conducted by Statista in 2022, 52% of marketers worldwide find interactive emails to be the most effective marketing content tool. Look how attractive emails with interactive elements created using AMP and HTML have become.

Email with a survey:

Example of an interactive survey in email marketing

(Source: Email from Stripo)

Email with an AMP product card: 

Example of AMP-powered product card in email

(Source: Email by Promodo)

Rollover effect for drawing attention to the CTA button:

Example of rollover effect in email

(Source: Email by Exclaimer)

Gamification for increasing sales: 

Email gamification with AMP

(Source: Email from Yakaboo)

Gamification is one of the best engagement tools in email marketing, but it is also one of the most difficult to implement. The key difficulties are related to writing code, using AMP, and correctly rendering the game across all email clients. This makes gamification expensive and difficult for newcomers.

Interactive HTML content 

Interactive elements can be based on HTML and CSS.

Such interactive email elements as those listed below don’t require AMP technology and render perfectly well in the major email clients:

  • CSS-animated buttons for promo emails;
  • star ratings to let users rate your services without leaving the email;
  • embedded questionnaires for surveys;
  • image carousels to display a few product items on one screen;
  • image rollover effects to display product items and features from different angles;
  • accordions to make interactive email newsletters more compact.

For more examples of interactive email content and the ways in which the content is built, read this article.

AMP in email

The use of AMP for email was initiated by Google in March 2019. AMP technology has improved email performance on mobile devices so that adding interactive elements doesn’t disrupt users.

AMP technology was expected by email marketers to be a revolutionary event in the design of emails, which would provide opportunities that had not existed before in the fight for user attention and conversions. In the end, this is what happened.

Roman Burdyga

Roman Burdyga,

Product Designer at Stripo.

Interactivity allows you to involve subscribers in actions within the email itself, inviting them to answer questions, play an interesting game, choose the desired size or color, or buy a product without going to the website. Most importantly, these are actions that email marketers can use to collect data and communicate with customers in real time.

The ability to make emails interactive and fascinating, thanks to AMP technology and the addition of bright GIF animations, is a breakthrough in email design. Some emails can already be compared to full website pages. These changes happened due to the fact that, with the development of technology, it was already difficult to surprise people with ordinary emails or just a set of blocks in an email, so email marketing began to develop rapidly. This gave email marketers a better way to present their products, create a wow effect, increase sales, and make users more involved in their mailings.

Anastasiia Babintseva

Anastasiia Babintseva,

Email Designer at Stripo.

Advantages and disadvantages of using AMP in email 

We have already mentioned some key advantages of AMP emails, such as the high level of engagement compared to traditional emails. Email marketers should also be aware of the possibility of adding automation and personalization, more secure technologies, and data processing using Google verification. These additions would lead to improved deliverability and increased conversion rates, leading to higher ROI.

But there are potential disadvantages and barriers to using AMP email that are important to keep in mind:

  1. Some email clients do not support AMP — it will not be displayed in emails. They did not want to implement technology that required the use of scripts. Even in browsers, there are concerns about the readability of AMP emails.
  2. Using AMP for email requires two versions of each email — an AMP version and an HTML version.
  3. AMP requires more complex coding than traditional emails, as each email becomes an interactive website that requires development and testing efforts. So, you need developers in your email marketing team who will support email production.
  4. More extensive quality control results in longer email production and approval processes.
  5. You need to be a verified sender and get confirmation from Google so that the technology is not used for nefarious purposes. The whitelisting process may take several weeks. 
  6. Google gets access to analytics and information that you send in emails.
  7. There is the potential for new hacking techniques to penetrate interactive elements.

Ways to make email interactivity easier

To use interactivity in your emails and at the same time be sure that all subscribers will see the emails the same way, regardless of email clients, you can choose the following paths:

  1. When using AMP-powered emails, keep in mind that interactive emails combine a lot of code for different email clients to satisfy the maximum number of users. If an email client does not support the AMP, there will be a fallback and, for others, full-fledged AMP mechanics.
  2. If possible, use interactive elements that are created based on HTML and CSS and are displayed correctly in most email clients.
  3. Make things easier by using the Stripo editor, where you can build a fallback through UI (controls, like hide in AMP and hide in HTML), use ready-made templates with interactive elements, or build interactive content with the interactive module generator.

Using our interactive module generator, you can build emails that contain: 

  • the AMP version of your email that works in Gmail, Yahoo, and Fair Email; 
  • an interactive fallback that works on all devices and email clients that have support for HTML5 and CSS3, such as Apple Mail and Samsung Email; 
  • a text fallback version that works in email clients that do not have support for AMP, HTML5, or CSS3, such as some Outlook apps.

Here is an example of an email using our ready-made gamification, “Spot the differences,” which you can use in the editor: 

Example of AMP game made with generator

(Source: Email AMP game by Stripo)

Modular email design: The newest solution for interactivity

Dynamic and interactive content requires complex coding, and this complicates email production and makes the process long. The answer to this challenge is modular design — creating emails in the editor using saved modules.

A modular system provides the ability to use saved independent content modules, which already include all the necessary parameter settings (i.e., fonts and colors) and program code elements. You create and save in the editor's library any number of module options for different email elements.

When building interactive emails, this approach allows you to create all the code once and save it as modules. Then, you simply reuse the modules, automatically making bulk updates to one module across many emails.

You might also like

modules-caseCase study: How Stripo uses modules to speed up email marketing

Engaging subscribers in communication is not the only feature of the new era in emails. The evolution of email design has also continued to move towards maximizing users’ ability to read all emails comfortably, taking into account their preferences and characteristics.

Dark mode in email design: Follow the black interfaces

Dark mode applies a darker color palette for low light or nighttime conditions. This inverted color scheme uses light fonts, UI elements, and icons on a dark background. 

Dark mode for interfaces appeared and became a trend due to several main reasons: 

  • ophthalmologists recommend it;
  • it is comfortable for the eyes and does not bother other people present in a dark room;
  • it saves your battery life. For example, on AMOLED displays, dark mode reduces battery usage by up to 63%.

We first saw dark mode used in email in 2018 after Apple added it to its desktop email client. Then, in 2019, Apple added it to iOS Mail. Gmail and other email clients were next to announce support for dark mode.

81.9%

of smartphone users use dark mode

A logical continuation of interfaces for dark mode was the creation of email layouts, which are displayed differently in normal versus dark interfaces. 

The email client determines the background color scheme for email content. It then applies a dark background and lightened color shades unless the user sets a specific color for the content background. 

What problems arise during email production in dark mode?

However, dark mode turned out to be not so simple, with several difficulties that still arise:

  1. Many email clients automatically enable dark mode by default, even if the user does nothing, but the default styles do not always display the design correctly.
  2. Some email clients do not support dark mode for emails. Their interface may change, but not the email layout.
  3. Popular email clients that support dark mode, such as Apple Mail (for iPad and iPhone), Outlook, Gmail, and Yahoo!, display emails in dark mode slightly differently, inverting the colors either completely or partially.

Examples of email in dark mode

Usually, in dark mode, if something goes wrong, it is possible to notice it only after testing. Then you must go back to the designer and find a compromise between good design and what is normally displayed in dark mode.

Kateryna Nazarenko

Kateryna Nazarenko,

Email marketing expert, CleanMyMac.

Decisions for dark mode

Email marketers and designers are constantly looking for solutions to make the result of using dark mode more predictable. However, at present there is no one solution to the problem that will work 100%. So, as a rule, marketers and designers use a comprehensive approach that includes the following:

  • tips and tricks on how to outsmart all email clients when creating images and choosing font colors and backgrounds, which we have collected in “Email marketing trends 2024”;
  • tools to help you check what colors and color combinations look like after inversion, such as a free color inversion tool or special plugins for Figma — this or this;
  • email testing tools like Litmus or Email on Acid, which show you how your emails look in all popular email clients.

You might also like

How to Utilize Dark Mode_StripoDark mode for emails: What it is & how to optimize emails

Email accessibility 

At previous stages of the evolution of email design, email marketers sought to ensure sure that what subscribers see in their inboxes corresponds to what they have been sent — that is, that the content is displayed correctly.

Email accessibility, which is becoming the focus of the 2020s, is about ensuring that email design is such that even those who have some kind of perceptual disabilities (e.g., color blindness, dyslexia, blindness, or visual impairment) can easily read emails and receive information.

Greater attention is given to making email newsletters accessible to all, including those with disabilities, by adhering to accessibility standards. 

There are business reasons for this concern — it will bring you more clicks and more conversions, which will result in a better income.

When accessibility isn't at the forefront of your email design and development, you erode your customer's trust and leave thousands of dollars of revenue on the table. Everyone at some point will at least have a temporary disability, and many have permanent disabilities, so we have to meet people where they're at.

Megan Boshuyzen

Megan Boshuyzen,

Award-Winning Senior Email Developer.

What issues may arise if email accessibility requirements are not taken into account?

  1. If you do not add alt text to images or GIFs, a visually impaired person who reads emails using screen readers will not understand what is in the picture.
  2. A similar issue arises if you use an image as an email layout.
  3. If you don’t set the language in your email code, the screen reader will not know what language to read your email in.
  4. Some fonts, sizes, and even highlighting and lack of contrast can make it impossible or difficult to read an email.
  5. The inappropriate use of GIFs in emails can trigger seizures in individuals with photosensitive epilepsy.

How to account for all email accessibility requirements

  1. Use email accessibility testing tools.
  2. Use the ready-made templates in Stripo, all of which have been created with accessibility in mind.
  3. Ensure all emails are fully optimized for screen readers, as is the case for all emails developed by Stripo, and conduct an accessibility audit.

To better understand how to account for all possible problems in email design, read the detailed recommendations here

A new era is upon us: using AI-powered tools for email design

The explosive wave of popularity of various AI-powered tools, which began in 2022 with ChatGPT from OpenAI, has reached email marketing. Most often, GenAI is used to create subject lines, personalization elements, and images.

In the design of email campaigns, GenAI is used for big hero images, which allows the user to quickly create images that attract readers’ attention.

In design, I have been seeing a lot of big hero images in B2C emails lately. They are becoming spectacular, aided by the ease of new features in image editing tools and generative AI. You can place them at the top of your emails to grab attention. There is no real excuse not to have fitting contextual images now.

Jordie van Rijn

Jordie van Rijn,

The independent email marketing consultant.

Three main ways to use GenAI in email design

  1. Generate images according to certain parameters and styles.
  2. Generate personalized content based on user preferences.
  3. Using the image-to-image option, take an existing image or photo as a basis and process it in the desired style. You can change the background, add elements, and much more.

There are several AI-powered tools that are commonly used these days to help create attractive email designs — Midjourney, DALL-E 2, Adobe Firefly, and Stable Diffusion.

What problems do email marketers face when using GenAI?

  1. It’s difficult and time-consuming to explain to GenAI which image is needed. Often, the results are inappropriate and very different from the ones imagined when writing the description.
  2. The issue of copyright for such images remains open.
  3. As GenAI becomes more popular, the style of its images will become more recognizable, which could lead to the erasure of a brand's personality.
  4. Data privacy can be an issue, so when creating personalized images based on user data, it is important to respect privacy rules.
  5. Using GenAI for images doesn't save much time yet.

You can read about how to use GenAI for email design in this article.

Wrapping up: Looking to the future of email design

The history of email shows how digital communication has changed over time. From relying on plain text to incorporating more complex and responsive designs, email has always adapted to the needs of users. Email will continue to improve as Internet technology develops, offering new ways of interaction and communication.

Let's try to predict what next stages await us in the evolution of email design.

Here are our guesses:

  1. AI in email design will be used not only to create images but to compose entire emails, including coding complex AMP and HTML interactivity.
  2. AI will allow you to personalize visual content directly in emails, adapting this content to the behavior and preferences of individual users.
  3. Accordingly, this will allow you to create email designs that are even more interactive and personalized while using fewer resources and more predictable rendering in inboxes.
  4. The design and functionality of emails will increasingly resemble that of websites in terms of dynamics and capabilities. This will help eCommerce companies sell more effectively directly in emails.
Make the most of modern email capabilities with Stripo
Was this article helpful?
Tell us your thoughts
Thanks for your feedback!
0 comments
Type
Industry
Seasons
Integrations
Stripo editor
Simplify email production process.
Stripo plugin
Integrate Stripo drag-n-drop editor to your web application.
Order a Custom Template
Our team can design and code it for you. Just fill in the brief and we'll get back to you shortly.

Stripo editor

For email marketing teams and solo email creators.

Stripo plugin

For products that could benefit from an integrated white-label email builder.