Email design evolution: From plain text to interactive emails

The design of modern email marketing campaigns is amazing — interactivity, gamification, various elements, and a proven structure. How did technology evolve to make it possible to move from plain text emails to what we see in our inboxes now?

In this article, you can dive into the evolution of email design and find out what challenges email marketers have overcome with the advent of new devices, technologies, and the information consumption habits of users.

What emails looked like in the “plain text” era

It is believed that the first email was sent in 1971 when the @ symbol and the company name were added to the addressee’s name in the message. In 1982, the Simple Mail Transfer Protocol (SMTP) standardized how mail servers send and receive messages. SMTP is what email clients use to send messages to mail servers and recipients.

Email became a popular method of communication with the spread of personal computers and accessible Internet from 1991. By the 1990s, many email clients — like Yahoo and Hotmail — had been founded.

In those days, email newsletters were text-based and resembled traditional print newsletters. They often contained essential updates and information. The emails included plain text that could not be formatted or include colors or added hyperlinks.

At the same time, innovative companies began experimenting with sending promotional messages via email to attract potential customers. Despite their lack of visual appeal, text emails have proven extremely effective in capturing recipients’ attention, because people are willing to open and read emails from their inboxes.

Even now, such emails are sometimes used, for example, in eCommerce, for service messages about a purchase.

Modern plain text email can look like this:

(Source: Email from Ajour)

It’s time to meet HTML email design

A lot has changed since the email protocol was born and the email design looked like plain text. Some changes took email design to a whole new level.

A challenge arose after emails ceased to be just a means of communication but also became an element of marketing: brands wanted not just to write text emails but also to show off their products and links to their sites, brand their emails, and make them more attractive than just text.

So in the late 1990s–early 2000s, HTML, which stands for HyperText Markup Language, appeared.

Look at this email example. You can say that this email is no different from a plain text newsletter, but note that it already uses a small logo as a banner, a bulleted list, and a hyperlink. None of this is possible without using HTML.

(Source: Email from Chase Dimond)

As HTML email capabilities grew, newsletters became more visually appealing, including images, links, basic formatting, embedded videos, etc. It was HTML that made it possible to create the now-familiar email layout, which includes the following basic elements:

Header with logo or banner, color layout, and different fonts:

(Source: ReallyGoodEmails)

Email body with different blocks, such as text, images, product cards, and so on:

(Source: ReallyGoodEmails)

Embedded video:

(Source: ReallyGoodEmails)

Call-to-action button:

(Source: ReallyGoodEmails)

Footer where you can add a signature and social network icons:

(Source: Email from Stripo)

The main problems when using HTML emails

The main limitations in using HTML emails relate to coding difficulties. For HTML emails to display correctly, their development requires proper coding and testing, which increases development time and leads to possible coding errors.

As a result, the following problems arise:

1. The email takes a long time to load if the optimal size and weight are exceeded or the images are not compressed for fast loading.
2. The email is unreadable because not all CSS and HTML tags work in the email, or the recipient’s email client does not support HTML.
3. The recipient sees only HTML code in the email body — this happens when users put settings in their email client so that all emails are displayed in text form, and you did not specify the plain text version when sending.
4. The blocks of the email are not visible, or the email does not look the same as in the layout. Images and banners may move if the height and width of the image and alternative text are not specified.
5. HTML emails are more likely to be flagged as spam due to incorrect text-to-image ratios or errors in digital signature settings.
6. The email is not displayed correctly on different devices and email clients. The main reason for this is that email clients display email elements differently. For example, the default text indentation may differ, meaning that the layout will float, or the sizes of all elements are not kept within certain limits.

Introducing HTML and CSS into email design may seem to have created more difficulties for email marketers. Indeed, all these restrictions can lead to the fact that companies sending emails that are displayed incorrectly instead of communications that are attractive to potential clients.

Solutions for a better HTML email experience

This has given rise to several possible solutions:

• hire HTML coding specialists to develop each email;
• abandon HTML and use plain text emails since they always look the same in all email clients;
• use drag-n-drop email editors in which all email blocks are already coded properly;
• the optimal solution is using ready-made HTML email templates in which the placement and sizes of all elements are verified and correctly coded in the HTML.

Look at an example of an HTML email template by Stripo:

What do email marketers choose: plain text or HTML emails?

The results of a survey conducted on LinkedIn by Chase Dimond at the end of February 2024 were unexpected at first glance. 2571 respondents participated in the survey, and the votes were divided almost equally: 52% for HTML emails and 48% for plain text emails.

(Source: Chase Dimond LinkedIn)

Commentators noted that they use both options but emphasize that the choice depends on the situation:

• depends on the industry, target audience, and what they prefer;
• depends on the use case and the type of emails,
• use both — creating a simple text version will not take much time, and this will allow more people to interact with your content;
• use for one audience; text emails can be wildly successful and well-balanced HTML emails that increase CTR;
• plain text emails are better because they improve deliverability, but in eCommerce, you can't just rely on text emails.

It is interesting to see the arguments of those who choose one side. Here are the arguments of those who prefer to use plain text emails:

• 100% plain text, HTML is too risky with broken images and can undermine email progress;
• if someone doesn't tell you the images don't work, you could be sent without knowing you have a problem;
• plain text is better; when simple things work perfectly, you don’t need to go for the complexity.

And here’s what those who prefer HTML emails note:

• HTML but heavily using plain text in terms of body copy rather than a bunch of high design and graphics — this also helps keep the text-to-image ratio high for better inbox placement;
• normal email, HTML all the way. It gets irritating when someone’s mobile or other converts the thread back, and bullets can’t be used;
• HTML emails, especially for sending or receiving multimedia, hyperlinks, and formatting fonts, are more fascinating to the eye.

Important to note: It should not be ruled out that many commentators believe that “plain text” is simply an email in text form. But at the same time, it may be in HTML format and not be real plain text from a technical point of view, as described in the section above. Not to mention, many people mistakenly believe that HTML means an elaborate template with lots of useless images.

Therefore, as we see, no one disputes the importance of HTML for email marketing purposes, especially promotional email campaigns in eCommerce. At the same time, it is worth recognizing that when we talk about evolution in email design, we should not be categorical: one era here does not completely replace the second but continues to exist side by side.

Next evolution stage: responsive email design

The first email on a mobile device was sent using the BlackBerry. But the real era of mobile emails began in 2007 with Apple smartphones, which already had a special application — an email client with HTML and CSS support that allowed emails to be displayed with visual elements.

Thus began the era of responsive design — creating a layout that was displayed equally well in desktop and mobile versions and tools that allowed you to do this with the lowest resource. Responsive email design was introduced in 2009 and went from being somewhat rare to becoming the most common way to create an email by 2016.

A problem arose when emails created for desktops were displayed incorrectly in the mobile version and lost important information for subscribers. Over time, the number of smartphones with different screen sizes and other mobile devices grew, so manually testing each email became problematic.

Why unresponsive design became a problem

What problems arise when displaying non-responsive emails on mobile devices:

• the font sizes for headings and body text are too small and are unreadable in the mobile version;
• when using high-resolution images, unnecessary horizontal scrolling appears, and logos become huge;
• in promo emails, when placing product cards in reverse order on mobile devices, they will not appear correctly — on mobile screens, the item that appears on the left on desktop devices will appear above the item shown on the right on desktop devices.

(Source: Stripo template)

• “Where is the link?” The CTA button may become too large and display incorrectly, which practically kills the conversion;
• a non-responsive design is more likely to end up as spam in email clients since spam filters are sensitive to distorted or broken layouts and non-responsive images.

Responsive design has become what email marketers should do by default now. And the numbers speak for themselves:

• 55% of emails are opened on mobile devices (eMarketer);
• 62% of people will ignore or delete an email that doesn’t look or work as expected on a mobile (Dyspatch).

The goal of an email marketer when creating emails is to make them mobile-friendly, which preserves the appearance and readability of emails on all devices.

At the same time, responsive email design goes far beyond options “to fit a mobile screen.” You can set font sizes for headings, body text, and buttons that are completely different from the desktop version. You can adjust padding inside containers and hide/disable some aspects in the mobile version.

What solutions have appeared for mobile-friendly email design?

1. Email editors offer functionality to help you create responsive email designs. For example, in Stripo, you can hide elements in the mobile view, change the design of individual blocks for mobile versions, and much more.

2. Responsive email templates help email marketers not waste time creating a responsive design from scratch. For example, all 1450+ email templates in the Stripo collection have already been created with mobile-friendly email designs.

Compare the view of the product cards block:

(Source: Stripo template)

And look how you can place the feature block:

(Source: Stripo template)

3. Tools for email testing are an answer to the problem of testing responsive email design. Services such as Email on Acid appeared at this stage of the evolution of email design, allowing you to quickly test how an email will look in different email clients and on other devices.

Hybrid design

Another issue is that different email clients display the mobile version differently; thus, the one-size-fits-all approach will not work across these email clients. Even today, there are mail clients that do not support adaptability.

Since some email clients strip or ignore media queries, hybrid design has become one of the evolutionary branches. Such an approach adapts to device sizes without using media queries and breakpoints that apply styles based on conditions like screen width, helping you create a mobile-friendly experience across more environments.

Hybrid designs are created by coding with responsive tables and images, but unlike responsive emails, these tables and images are responsive by default. This is a more labor-intensive type of email development.

Wrapping up

The next stages in the evolution of email design will remain similar. However, they will still introduce something new thanks to interactivity, gamification, adaptability, and, of course, the use of generative AI.

The stages we will discuss in the next part of this material bring their own challenges, some of which email marketers are still looking for answers and solutions to. But their very appearance has primarily been made possible thanks to the advent of HTML emails and developments related to responsive email design.