The goal of good email design is to design for conversions, not merely aesthetics. The combination of these two principles has elevated email design to both an art and a science. The science guides the construction of an email message, from the coding to the layout and the rendering. The art is in bringing all of these practical considerations together in a pleasing design that compels readers to convert.
Email designers and developers have benefited from a constant stream of technological advancements and refinements that have solved some of email’s thorniest problems, such as remedying incompatibility issues that meant one email could look and behave differently from one device, client or browser to another. Many resources are also available for addressing technical issues around coding and rendering.
This guide will help email marketers and their design teams create a foundation for strategic email design. It reviews trends and best practices for persuasive design, along with key considerations designers need to take into account, such as cultural implications and accessibility requirements to ensure emails are accessible to an ever-wider audience of subscribers and customers.
The methodology involved two main phases:
Econsultancy would like to thank the following interviewees who contributed to this report:
Winner of the 2021 ANA/EEC Email Marketers Thought Leader of the Year, Kath is an industry veteran of 23 years. She is the author of the bestselling and award-winning book Holistic Email Marketing, and is a sought-after international keynote speaker, blogger, expert contributor and trainer.
linkedin.com/in/kathpay
kath@holisticemail.com
@kathpay
Traditionally, creative design took a back seat to the need to overcome the many challenges posed by technical aspects of email rendering. Even in the seemingly less complicated days of plain-text emails, designers had to devise message layouts that emphasised the email’s most important features and made long, content-heavy messages easier and less intimidating to read.
Every innovation in email has brought its own set of challenges. The introduction of HTML (HyperText Markup Language) transformed email from black-and-white text with a few blue links to complex designs bursting with colour. But email clients rendered those basic designs unevenly, if at all.
The rise of mobile devices, especially smartphones, broke the chains that bound email readers to desktop computers and put email into their pockets. This meant people could view their inboxes and read email anytime, anywhere. But it also meant that email designs that looked good on a wide desktop screen were almost illegible and nearly impossible to click on when viewed on a tiny mobile screen.
Today, many of those early challenges have been resolved. Support for HTML is nearly universal among email clients, although it can vary from one email client to the next. Responsive design and other mobile-friendly developments allow email to render correctly – more or less – no matter which device is being used.
With many technical issues resolved, or effective workarounds established, the customer experience with email is coming to the fore as the next challenge to conquer. This includes making email more interactive, keeping up with user preferences such as ‘dark mode’, and improving accessibility so that anyone can digest the content of an email and act on it wherever they encounter the message and regardless of any specific requirements.
Of course, some aspects of email design and creativity never change. This guide will explore both the timeless best practices that continue to guide effective email design and the new challenges marketers and their design and development teams must conquer.
Marketers do not have to reinvent the wheel every time they want to send a new message. Every successful email marketing programme makes use of well-designed templates. These will have been tested for functionality across multiple email platforms and devices, and they can be modified in terms of content and messaging.
A master template can act as a wish list of all the modules and designs that might be needed for an email programme. The modules could have designs for certain types of content, such as product showcases or customer reviews, or they could offer alternative layout options. A master template could consist of up to 20 or 30 modules depending on the complexity of the email programme. Once a master template has been designed and coded, previews can be rendered to ensure they display and function correctly across different email service providers and devices (as further discussed in Section 5).
Master templates for desktop/webmail and mobile app clients can form the basis for a variety of specific messages, such as welcome emails, promotions, transactional emails and other communications.
Figure 1: Example of a master template wireframe for both desktop and mobile with 20 modules
Source: Holistic Email Marketing
Using a master template has several advantages. Firstly, it saves time. Secondly, it ensures that every email created from it will reflect the organisation’s current branding. Updating a master template when branding elements change is much more efficient than manually changing a wide variety of derivative templates. This also ensures that email-sending divisions outside the marketing team are using variations of the master template that reflect the current branding.
“Especially related to automations, templates need to be easy to maintain. [You need] to be able to change things around from one place rather than going in and changing things in multiple locations. If we change the headline or another element in one version, then we need to have that change appear everywhere.
“With our previous platform, every time we made changes, it took a lot of time to go in and replace images or whatever the change would be across all versions. Now we can use snippets to make changes and see them across all versions.”
Jakob Holm, Email Marketing Director, Pandora Global
This solves one of the challenges that can arise when a company goes through digital transformation or acquires other companies and brings them under the same corporate umbrella. Achieving a unified email messaging look is not necessarily the marketer’s charge within a company, but being able to supply master templates that adhere to brand standards can alleviate one of the many stumbling blocks along the way to digital transformation.
Getting the template design right is one of the most important areas of email marketing. Poorly designed templates will either be ineffective at driving recipient response, hurt deliverability or prompt unsubscribes.
Email templates fail for many reasons, but these are the primary causes:
The master template should include versions for both desktop/webmail clients (e.g. Outlook, Gmail, Apple Mail) and mobile clients (iOS, Android), as shown in Figure 1. These master templates can be used to create a many different types of messages.
The variety of email clients and their capabilities is something that must be considered when designing templates. Although most major email clients render basic aspects of email design as they should, each client has its own quirks that designers must accommodate. Many of these can be handled with commands in the email coding, but for others, marketers and designers must find a balance between innovative design and the reader’s experience in the inbox.
The design for the email in Figure 2 below illustrates how to manage this balance, with images displayed (at left) and with images blocked (at right.).
Figure 2: Email with images displayed and images blocked
Source: CalMac
The range of devices through which users consume email means that the layout of an email is no longer ‘fixed’. As a result, it is best practice to use responsive email design. With responsive web design, the HTML coding of the email allows the layout to adapt to the screen size it is being viewed on.
For marketers, this means prioritising elements within the layout according to the campaign’s objectives. Marketers should consider the order in which information, images and tasks should appear. For example, a newsletter aiming to raise awareness about upcoming events might display items in order of the dates or deadlines that are coming up, with a prominent registration call to action included for each. A retailer looking to increase conversions might lead with a special offer or discount before displaying new product lines to entice the reader to clickthrough to shopping pages.
Marketers should also consider using a responsive design that can automatically prioritise or deprioritise elements depending on the device to meet the user’s likely task hierarchy. A user reading an email on their mobile is likely to interact with the content differently to someone who is reading the email on a desktop.
The experience of email can be improved by applying broader user experience design principles. To find out more about UX best practices, see Econsultancy’s User Experience and Interaction Design Best Practice Guide.
Single-column versus multiple-column formats
When email was primarily read on desktops or laptops, multiple-column formats allowed email designers to fit more content into the newsletter. However, these can be hard to read on mobile screens and can create issues for smart speakers. If using full responsive design is not possible, remodel a multi-column format into a single column.
When designing a template, the starting point should be the goals the email campaign or programme is aiming to achieve.
Marketers should consider what they want the recipient to:
Taking these considerations into account should allow marketers to prioritise the most important elements of the email.
A newsletter presents brands with a good opportunity to fulfil a variety of goals, as it is not limited to the conventions or restrictions of a typical brand email, with limited calls to action and a single dominant image.
As an example, in a preseason newsletter from Liverpool Football Club, the club offers subscribers many ways to connect with the brand.[1] It uses a responsive, mobile-friendly layout to achieve a number of goals:
“Having a clear view of what we want to achieve with a specific email campaign is the base for having a smooth creation process. Do we want our most recent subscribers to join our next webinar? Or maybe we want to increase the number of first visits by offering some sort of discount?
“Knowing the goal of a campaign makes it easier to brief the teams and it also makes the process of putting all the assets together smoother. Besides, it gets approval from all the stakeholders quite fast too.”
Mar Juárez, CRM Manager, IVI RMA Global
Using a master template helps to ensure unity of design and branding elements across all email marketing messages. The following steps outline how to use this master template to create derirative versions for a variety of messages.
1. Determine the objective
This is always the starting point. What is the business challenge that must be resolved? Potentially it is ‘to enhance the customer experience by providing more relevant email communications’ or it may be to solve a specific pain point.
2. Develop the strategy
Here’s where personalisation is introduced, by using tailored communications to achieve the objective. Marketers can provide value with emails that respond to five customer expectations:
3. Choose the tactics
The strategy will guide decisions on how to proceed and which technologies or automations to use. One key consideration is whether to use overt personalisation, in which recipients can see the data used to choose the content, or covert personalisation, in which data is still used to choose content but the effect is that of a general email. The recipients might be less intimidated by this approach, especially if they don’t know the company holds that data on them.
4. Modify the template
A template designed with modules, or compartments, that make up the email message when assembled, is easy to modify. Simply remove the modules that are not needed for this custom template and arrange them in the order that will best suit the campaign objectives and how the readers might act on the email.
5. Test and quality-check the template
Do not skip this step or rush the testing process. Removing or rearranging modules could break the master template. Testing might also reveal that customers will view or act differently on the modified template from what is expected. Using a rendering service like Litmus or Email on Acid can automate this process and check for every potential trouble spot.
The following best practice tips will help marketers consider each component of email creative design in the context of their goals.
These terms come from newspaper design and refer to the horizontal fold that divides a full-size newspaper in half. Traditionally, when papers were sold mainly on newsstands and in boxes, the top half of the front sheet of paper was more visible. Hence, the top stories and pictures went there.
In email design, ‘above the fold’ refers to the top part of the email message body. This is the section most immediately obvious to email readers, especially on a mobile screen, which can be seen before the recipient starts scrolling.
In the days when email viewing and activity occurred mainly on desktops – before smartphones made email access ubiquitous – a prevailing design best practice held that an email template had to keep the most important information at the top of the message. This would include the primary offer, accompanying image, call to action links, and anything else that would be important in the campaign.
Today, this is hotly contested among email designers. Some argue that email readers are now conditioned to scroll longer content, making the fold argument as dated as dial-up internet access. Others hold the belief that readers will not read past the fold unless they are uncharacteristically inclined to do so.
As is true with so many other aspects of digital marketing, there is no longer a clear position on the issue. The best practice today is to continue to place the most important content in a mobile email within the first 500 to 600 pixels of the message length.
As for the rest of the message, the research is either unclear or dated regarding how eager email readers are to scroll through a long email. Most authoritative studies have examined scrolling on websites or mobile apps, not email messages. The most recent detailed research, a frequently quoted eye-tracking study by the Nielsen Norman Group, dates from 2018.[2] Its findings noted 57% of page-viewing time was spent above the fold, and 74% of the viewing time was spent in the first two ‘screenfuls’ of content, up to 2,160px.
To some extent, the decision to scroll or not to scroll might depend on where someone is viewing an email. Scrolling with a thumb or finger is different from scrolling on a desktop using a mouse or a touchscreen, or on a laptop with a touchpad.
When considering what information will sit above the fold versus below, it is worth remembering that up-and-down scrolling is generally not as damaging to the customer email experience as side-to-side or horizontal scrolling.
With the advent of mobile, users are conditioned now to scroll with the swipe up of a finger or thumb. Horizontal scrolling requires slightly more physical and mental activity. Viewers seeing email on a desktop with a mouse have to reposition the pointer to find the correct spot to start the scroll, while touchpads users might accidentally trigger a close, expand or shrink function, which interferes with the viewing and is an annoying experience. Further, horizontal scrolling can cause images to appear to judder or shake, reducing their impact.
An email banner is a highly visual section that appears at the top of the email. Like a banner on a website, it is intended to call the viewer’s attention to important information. Banners can amplify the primary offer in an email campaign, remind customers of an ongoing promotion separate from the primary campaign, or feature personalised offers or updates.
In Figure 3, a clothing retailer switches banners in its emails for members of its loyalty program versus non-members.
Figure 3: Generic email versus behavioural data-triggered email
Source: Sienna Studio via Canva
There are two dimensions of banner design to consider:
Engaging, quality images are a powerful tool in email marketing. They should be both clear and quick to load. For photographic images, JPEG and PNG file formats should be used. For video or animation, save the files as GIFs. To ensure the image loads quickly, all files should have a maximum size of 50KB.
Animated GIFs are an easy way to bring dynamic elements to an otherwise static email. Though these are now widely supported, older Outlook desktop versions still render only the first frame. The earliest uses of animated GIFs were as two- or three-frame ‘mini-movies’. While those are still popular, the designs have become more complex, with additional frames that can be used for more in-depth storytelling and other uses.
Emojis are another visual device that can add interest to copy when used sparingly and strategically. Like animated GIFs, they do not always render well, or at all, on older devices, especially desktops or older versions of email clients. Gmail also is noted for converting a standard emoji into its own version in the subject line so that it looks different from the emoji pictured in the email body.
A small segment of subscribers will view email newsletters with the images blocked. Thus, layouts need to make sense with image blocking turned on. Alongside this, emails should include a prompt to ‘view in browser’ and should use ‘alt text’ (alternative text) on images to encourage viewers to download the images.
Most email creation platforms will allow the designer to specify the alt text for an image. This alt text will display when an image is blocked. Alt text should communicate clearly what was to be conveyed by the inclusion of the image. Figure 4 compares a promotional email with images displayed on the left and with images blocked on the right. The alt text for each image ties directly with the theme in the associated copy block.
Figure 4: Promotional email with images displayed versus images blocked
Source: Econsultancy
The inclusion of alt text is also important for accessibility. It allows blind or partially sighted recipients to read emails using assistive screen technology. It is also important for those who access email via smart speakers like Alexa or Google Home.
Use ‘bulletproof’ buttons: In Figure 4, the call to action buttons are still visible and attention-grabbing even when the images are blocked. Call to action buttons should be built with HTML code, not images, to ensure they are visible even when the images are blocked.[3]
Use a clear, consistent brand identity: Readers need to understand that the brand sending them emails is a trusted sender. Consider ways in which a newsletter could communicate the brand visually, even with the images removed. This could be through the use of the brand’s colours, fonts and logos.
Decreasing costs, greater access to data and marketer-friendly technology has made real-time content accessible to marketers with a wide range of budgets.
Emails now commonly feature content that uses ‘moment of open’ data as opposed to data sources like preferences, purchases or website behaviour. This can include real-time weather forecasts, sale notifications that reflect whether an offer has expired or promoted inventory has sold out, countdown clocks, live social feeds and maps that render according to a user’s location.
Incorporating moment of open data can both increase email campaign relevance and promote urgency through real-time offers, incentives and soon-to-sell-out products.
Table 1: Real-time content ideas
| Location and device | Product and offers | Content types |
| Weather | Inventory/stock levels | Social feeds |
| Time zone | Prices | Maps |
| Geo-location | Promotional codes | Live video |
| Device | Loyalty card balance/awards | Polls |
| Package trackers | Personalised offers | Countdown timers |
MPP effect on real-time content accuracy
Apple’s Mail Privacy Protection feature masks the email IP address, and hence the open data, that triggers the associated real-time content. In email content where the user has enabled Apple’s MPP, the real-time content can reflect a default open time and location, thus rendering the information incomplete.
As of August 2022, the adoption rate for MPP was estimated to extend to 90% of users.[4] However, this is not absolute. It is possible for real-time content to be hidden so it simply doesn’t display if MPP is enabled, meaning recipients do not see the personalised content for their time or location. Although this measure reduces the impact from close personalisation, at least no incorrect information is displayed, which would hurt the customer experience and likely affect the recipient’s attitude toward the brand.
‘Dark mode’ is the better-known term for ‘negative contrast polarity’. The display concept ‘contrast polarity’ refers to the contrast between the text and the background. Positive contrast, or ‘light mode’, is dark text on a light background, while dark mode is light text on a dark background.
Dark mode has become a hot topic among email designers and developers because more email users are choosing that setting on their devices. Dark mode is not a new standard. In the early days of desktop publishing, as computer terminals replaced typewriters and wire machines in newsrooms, the early cathode-ray tube (CRT) screens featured green, white, yellow and even orange fonts on black, dark green or dark brown backgrounds. As graphical user interfaces (GUIs) began to replace text-only interfaces, the light-on-dark or positive contrast mode was discovered to be better for rendering graphics.
Figure 5: Newsletter displayed in dark mode versus light mode on an iPhone
Source: Econsultancy
But the trend is moving back to the dark side – many users are choosing dark mode for part or all of their device usage. It can be easier on the eyes, especially in low-light reading environments and will consume less battery power.
Estimates of dark mode adoption vary wildly, with some claiming 90% or more of users have it enabled all the time. Litmus, which says its email analytics service can detect dark mode usage, estimates that about 40% of Apple device users have it enabled.[5]
Dark mode has a downside in that the format can alter the colours chosen for email content, especially graphics and photos. Additionally, the Nielsen Norman Group cautions against overestimating the significance and benefits of dark mode.[6]
Designing for dark mode is a complex topic because how it is rendered can vary from one inbox provider to another, and there are few design standards to follow. Furthermore, some emails designed with a dark mode theme can end up appearing in light mode because of the way an individual inbox provider, such as Apple Mail or Gmail, handles the HTML. Fortunately, dark mode users seem to be used to imperfection, or might not realise they are viewing altered versions.
Unless the email is very basic in design, the chances of it rendering well in dark mode across all inbox providers is minimal. Marketers are advised instead to identify the inbox that the majority of your audiences use and design for that.
Litmus has conducted extensive research and testing on dark mode and has compiled helpful best practices on designing for the mode: Dark Mode Email.
“Some of our emails are designed for dark mode, but not everything works fully in it. We haven’t taken a stand yet on whether we should fully go for it or not because many things need to be in place in order for our emails to work optimally in dark mode.
“We have found a compromise where our emails will work in dark mode across most email clients, but you’ll also come across some versions where the email looks bad in dark mode.
“We don’t know the exact percentage of emails that don’t look good in dark mode, but we’re also assuming that consumers choosing to run with dark mode will expect that emails are not being shown exactly as they’re supposed to.”
Jakob Holm, Email Marketing Director, Pandora Global
Accessibility has become a pressing issue as awareness of the difficulties many email subscribers have in reading and interacting with email has grown. In part, it comes from advocates calling attention to extending accessibility beyond meeting visual needs to include features that accommodate people with disabilities.
Most accessibility guidelines and regulations for digital content have been written for websites. However, the movement for improved email access has gained steam as the variety of devices readers use to access their email has proliferated.
Mobile devices are not as friendly to vision-assistive features such as oversized screens and screen readers. Screen readers depend on alt text and punctuation to verbally describe images and make sense of email copy.
People with conditions that affect their mobility and motor skills can often have difficulty tapping or moving a computer mouse to click on text links, or using keyboards. Additionally, cluttered email designs can be hard to read for people with cognitive issues to navigate and act on.
These steps can be taken to increase accessibility without requiring designers to overhaul templates:
Note: Review the plain-text version to determine whether the layout needs to be changed to enhance accessibility, such as by adding white space, eliminating long blocks of copy, or reducing the content to focus attention on the primary message.
In the United States, courts have interpreted emails from businesses as ‘public accommodations’ and have ruled that they must comply with the Americans with Disabilities law and the Rehabilitation Act of 1973.[7]
In the UK, the Public Sector Bodies (Websites and Mobile Applications) Accessibility Regulations 2018 requires government organisations and some charities and NGOs to maintain accessible websites and mobile content without specifying whether personal email content is also subject to that requirement.
The UK Equality Act (2010) also requires website accessibility as part of its prohibition against discriminating against people with disabilities. The Equality Act 2010 Code of Practice maintains that agencies have “an anticipatory duty to make reasonable adjustments for disabled people” and that this requires service providers to “take positive steps to ensure that disabled people can access services.” It states: “This goes beyond simply avoiding discrimination. It requires service providers to anticipate the needs of potential disabled customers for reasonable adjustments.”[8]
In the European Union, the Web Accessibility Directive has been in force since 2016,[9] while many countries in Asia including Hong Kong, India and Taiwan have mandatory policies in place.
In countries that enforce accessibility laws and regulations, meeting the Web Content Accessibility Guidelines (WCAG) developed by the World Wide Web Consortium (W3C) generally means an organisation meets legal standards.[10] W3C’s Web Accessibility Initiative has compiled a list of government policies relating to web accessibility by country.[11]
These practices, based on the WCAG guidelines, can make email messages accessible to readers with a wide range of disabilities or conditions:
1. Use a descriptive subject line.
2. Use clear headings in message copy.
3. Avoid abbreviations and unusual or hard-to-pronounce words.
4. Use descriptive link text.
5. Separate text links with white space.
6. Use large ‘bulletproof’ buttons.
7. Use high-contrast colours for text and background.
8. Increase the font size of plain text to 18pt (24px).
9. Add descriptive alt text for all images.
10. Use responsive design or a simple one-column format.
11. View emails using a rendering tool or an accessibility checker.
12. Check default or built-in email templates for accessibility issues.
AccessiBe | ADA Compliance for Emails[12]
Different countries have different regulations for email marketing, so brands may be required to adjust their emails to market in countries with different email laws.
For example, in the UK, email regulations do not permit brands to send commercial content in transactional emails to customers who have not given permission to receive this type of marketing, which means that transactional emails cannot include this type of content. In the US, however, a limited degree of promotional content may be allowed in a transactional email, even if the customer did not opt in.
Anti-spam laws and data protection laws vary by country, so it is important that email marketers who are reaching international audiences make themselves aware of the relevant regulations for their markets.
Beyond meeting country-specific regulations governing data use, brands that market to a worldwide or multicultural audience must also consider cultural and language differences. At one end, messaging that does not take account of these differences could reduce an email’s effectiveness or hinder its ability to persuade. At worst, it could inadvertently offend an audience if it doesn’t align with their religious or social sensibilities.
Segmenting customers by country can help marketers avoid sending irrelevant messages. This will require marketers to employ more tactics either to analyse location data already present in their databases or to collect location data from subscribers or customers early in the email relationship to fill in blanks. (For more advice on this, see Econsultancy’s guide to Email Marketing Best Practice: Segmentation and Personalisation.)
Marketers also can further segment their databases to reflect cultural variations among their customers providing they have reliable data. The loss of third-party cookies that could highlight these interests or preferences based on activity on other websites makes this information more elusive. Hence, marketers will need to build more complete audience profiles, whose data can be mined for this kind of segmentation. (See Econsultancy’s guide to Email Marketing Best Practice: List Quality and Deliverability for a further discussion on tactics to build audience profiles.)
Cultural differences can manifest in several ways. Holidays are a particularly good example of how these differences come into play, especially religious and national holidays.
Shared holidays can have national differences. For example, Thanksgiving is celebrated in Canada on the second Monday of October, but on the fourth Thursday of November in the US. Mother’s Day is most frequently celebrated around the world in May, but in the UK it occurs in March. However, some version of Mother’s Day is also observed in different countries in almost every month from February to November.
When it comes to religious holidays, it is common in western countries for the religious aspect of traditionally Christian holidays such as Christmas and Easter to be de-emphasised. Other faiths will observe different holidays, such as the Jewish holidays of Passover and Hanukkah.
Certain holidays will have greater significance depending on the country. This includes Lunar New Year in Asia, India’s Diwali celebration, and Eid celebrations in Muslim countries. However, this is also an area where good intentions can trigger blunders by well-meaning marketers.
As an example, marketing wine or pork products to Muslim customers would be offensive because the Qur’an forbids their consumption. Commercialising celebrations such as Eid al-Fitr also would be considered insensitive.[13]
Understanding the religious backgrounds of holidays and the cultural roles they play will help marketers create appropriate campaigns that both respect the holiday and appeal to adherents.
Animals, people, and even well-designed machines will naturally choose the path of least resistance or effort. Many web-usability studies have shown that readers merely skim pages looking for relevant information instead of reading every word.
They seek visual cues, such as bold type, bulleted lists, images and other typographical devices that highlight some blocks of information and de-emphasise others. These provide cognitive ease to the reader in the way a long grey river of type does not. In other words, they are easier to read and comprehend.
Effective email design establishes a message hierarchy that naturally draws the reader’s eye through the message to the key points. This keeps an interested reader scrolling through a long message and prevents a myriad of elements from competing with each other for the reader’s attention.
Below are some devices marketers and designers can implement quickly to aid comprehension and make their emails more persuasive.
Implicit directional cues. Implicit directional cues are subtle. They aren’t obvious like animated arrows pointing to a call to action. Instead, they use lines, positioning and line of sight to direct the reader’s eyes to the objective. As an example, you can have an image in which a person is looking directly at a call to action, a product or a block of essential copy. Figure 7 shows different ways in which a model interacting with a CTA can draw subtle attention to it.
Figure 7: Interaction of model and CTA
Source: Econsultancy
Price anchoring. Anchoring describes the common human tendency to rely too heavily on the first piece of information offered (the ‘anchor’) when making decisions. Anchoring occurs when individuals use an initial piece of information to make subsequent judgements.
For example, the initial asking price for a retail item sets the value, so that the sale price offered in the email seems even more appealing. In other words, the mind is more biased by first impressions. In another example, the product the marketer wants to sell is positioned between a less-expensive but less-desirable version and a higher-priced version. This can enhance the value of the product in the middle.
Inverted pyramid. With this visual cue, copy is formatted so that it forms an upside-down pyramid, ending at the call to action, as in Figure 8. This can also be elongated to move the eye through a lengthy email. Although this tactic can be effective, the design should not feature copy blocks of more than six or seven lines, past which the reader will lose interest. Effectively, it will be a case of TL;DR (too long; didn’t read).
Figure 8: Inverted pyramid copy layout pointing to CTA
Source: Hop via Canva
Alternating copy blocks. As shown in Figure 9, this design draws the eye through the email message with a coordinated series of images, message copy that alternates between left and right justification, and CTAs in a colour that complements the overall design scheme of the message.
Figure 9: Alternating copy blocks in a targeted promotional email message
Source: Econsultancy
Caution: Avoid message clipping in Gmail: Gmail clips emails that have a message size larger than 102KB and hides the full content behind a ‘View entire message’ link. This can reduce the effectiveness of an email in two ways:
Marketers should monitor the data size of their emails and weigh data-heavy features against the need to avoid being clipped.
When considering email layout, some other key elements to consider are:
Figure 10: Key elements to include in an email to build trust and relevancy
Although email clients and devices now offer more standardised experiences than in email’s early years, some variations still exist from one service or platform to another, and these can make an email look strange or even disable certain functions such as call to action buttons or text links.
A poorly formatted email creates a bad experience for readers. Many will unsubscribe from emails that do not look right or perform correctly on their devices, and some will even report error-filled emails as spam. Hence, it is essential to test email templates before sending out any messages to be sure it renders correctly in all clients and across desktop, webmail and mobile platforms.
At one time, email marketers needed to own accounts on multiple email services and manually send a test email to each one before checking each message to assess how well it rendered and what trouble spots remained. Today, marketers can use basic automation in their email service providers (ESPs), which sends a test version of the email to a predetermined set of internal email addresses with just one click. Alternatively, they can enlist email rendering and quality-assurance services that test the message across hundreds of email clients, browsers and devices and then automatically highlight problem areas.
Testing begins with the email templates that provide the foundation for all the email messages an email team sends. This includes business-as-usual emails, such as promotional campaigns, and triggered messages, such as onboarding, abandonment and re-engagement or reactivation emails.
The testing procedure will vary based on the type of email or emails being sent. Testing a standalone email campaign will require one set of protocols or activities, while testing triggered messages will require a different set.
A pre-deployment test should check for these issues:
The regular email workflow for a promotional campaign will accommodate the testing of every broadcast message for the issues listed above. However, it is impractical, to say the least, to try to test every triggered message. Thus, marketers must use pre-deployment testing to be sure that the basic template for each message renders correctly. Marketers should check their automated messages regularly to determine that they are rendering correctly, triggering at the correct times, and displaying the correct data.
“Because we are more automated, we have had to take full advantage of a preproduction environment to push flows through without impacting our live mode. We liaise with different teams across the business to get those journeys set up in our preproduction flow.
“We can test as much as we want in that environment and make sure everyone’s going down the right funnels, and the dynamic content is working as it should, before moving it into production.
“As a team we have improved our process as time has gone on. At first we look to see what a solution might be and how we want to do it without mapping out every intricate detail that will be needed. [We also look at] where we are going to need to draw in our team members as well as individuals from outside our team, especially in copywriting and data and QA checks at the end.
“It’s essential to have a very clear timeline with a view of everything that’s needed, and to get buy-in from stakeholders early on, to ensure that if we will need copy in three weeks, the copywriters know that and can plan accordingly. It doesn’t slow the flow down at all.”
Jess Evans-Tudor, Head of CRM, Rated People
Originally promising to increase interactivity in email and allow conversions to happen in the message instead of on a landing page, AMP for Email remains what Chad S. White of Oracle Marketing Consulting has called an ‘unproven opportunity’.[15]
When Google launched AMP (Accelerated Mobile Pages) for Email in 2018, email developers expected it would eliminate one step in the path to conversion – the need to leave the inbox and complete the action on the website. In effect, AMP enables an email to become a miniature website using technology Google developed in 2015 to speed website page loading.
As a tool to increase conversions in promotional or commercial email campaigns, AMP has fallen short of the mark for a number of reasons. Among them:[16]
However, it is too early to write off AMP for Email. Gmail and Yahoo! Mail still support AMP for Email, as do the ESPs SparkPost, Customer.IO and Netcore Cloud. Brands that use AMP for Email will use a supporting ESP to send those emails, along with default versions for customers using browsers that do not support the format, and will use a second ESP for non-AMP emails.
Another reason not to discount AMP is the rise of ‘no code’ tools that make it easier for marketers to use the technology and reduce the registration requirements senders need to enable AMP for Email, White says.
YourStory, the content and communications platform dedicated to India’s startup economy, needed to increase participation in its events, grow the number of leads from those events, and streamline its event registration process.
Working with Netcore’s CSM team, YourStory transformed its traditional email marketing programme by using AMP for Email and introducing AMP-based responses and registrations in its email messages.
This delivered two advantages, as illustrated in Figure 10:
1. Simplified registration: Users could share their information within the email in a matter of seconds and while on the move.
2. Reduced drop-offs: Because registrants could complete registrations in the email message, this reduced drop-offs.
Figure 10: Comparison of an email using AMP for Email and a static design
Source: YourStory
Results: 5.5X increase in conversions for event registrations and an 85% contribution to overall conversions.
Netcore Cloud[17]
As discussed at the beginning of this guide, email design goes beyond aesthetics. It involves the creation of workable designs that take into account email usability as well as the need to present information in a pleasing design that renders well on any platform where a customer might view it.
The efforts of email developers and advancements in technology have combined to overcome many of the design limitations that traditionally hindered email appearance and usability. Although not all wrinkles have been ironed out in terms of functionality and rendering, there is now greater standardisation across email clients, browsers and viewing environments, giving email designers more latitude to design attractive email experiences that also build brand equity and stand out from the competition.
This development has opened the door to a wider issue: email accessibility and the need to design emails for viewers with a range of abilities to ensure a broader audience can access, comprehend and act on brand emails. It is encouraging to see more designers are considering the needs of previously overlooked customers and are eager to see how technology and design can continue to create welcoming and better-functioning email experiences for everyone.
Econsultancy | Quick Guide to Why Email Still Matters
https://econsultancy.com/reports/quick-guide-why-email-matters/
Econsultancy | Email Marketing Best Practice: Setting Goals and Measuring Performance
https://econsultancy.com/reports/email-marketing-setting-goals-measuring-performance/
Econsultancy | Email Marketing Best Practice: Segmentation and Personalisation
https://econsultancy.com/reports/email-marketing-segmentation-personalisation/
Econsultancy | Email Marketing Best Practice: Communication Strategy
https://econsultancy.com/reports/email-marketing-communication-strategy/
Econsultancy | Email Marketing Best Practice: Copywriting
https://econsultancy.com/reports/email-marketing-copywriting/
Econsultancy | Email Marketing Best Practice: Optimisation
https://econsultancy.com/reports/email-marketing-optimisation/
Econsultancy | Email Marketing Best Practice: List Quality and Deliverability
https://econsultancy.com/reports/email-marketing-list-quality-deliverability/
Econsultancy | User Experience and Interaction Design
https://econsultancy.com/reports/user-experience-and-interaction-design/
Econsultancy | Addressing email accessibility: The 3 key steps
https://econsultancy.com/addressing-email-accessibility-the-3-key-steps/
AccessiBe | ADA Compliance for Emails – The Complete Guide for 2023
https://accessibe.com/blog/knowledgebase/ada-compliance-emails
Epsilon | Apple’s Mail Privacy Protection update: One year in the books
https://www.epsilon.com/us/insights/blog/apples-mail-privacy-protection-update-one-year-in-the-books
Muslim Ad Network | How to Create an Ad for Muslim Consumers During Christmas
https://www.muslimadnetwork.com/2022/11/12/christmas-ad-for-muslims/
Email on Acid | Outlook HTML Emails: How to Fix 11 Common Rendering Issues
https://www.emailonacid.com/blog/article/email-development/how-to-code-emails-for-outlook/
Bureau of Internet Accessibility | United Kingdom Digital Accessibility Laws: An Overview
https://www.boia.org/blog/united-kingdom-digital-accessibility-laws-an-overview-1
Web Content Accessibility Guidelines (WCAG)
https://www.w3.org/TR/WCAG21/
Litmus | Your Guide to Bulletproof Email Buttons that Work
https://www.litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design