Revisiting The Pillars of Successful Email Design
Trends come and go. With December commanding our attention with year-end projections, it is tempting for marketers to squint their eyes upon specific hotspots in currency, often at the expense of missing the wood for the trees.
Speaking of email marketing, email geeks are keen on leveraging the trendiest email design paradigms set to dominate 2024. Now, it’s not unwise to follow a trend. Any marketer worth their salt ought to know how the wind blows. However, it’s equally wise, if not wiser, to stand back and prospect the whole picture while seeking to incorporate the trends.
We will take the latter route in this post. We will revisit the fundamental pillars of email design and discuss the less-discussed design aspects. So, let’s get cracking!
Table of Contents
First Things First: The Objective of Design
Irrespective of whether you are experienced, the temptation always is to jump the gun. That’s fatal to email design. Design is not a standalone enterprise in email marketing. It works within a context and is part of a broader vision.
Accordingly, your first step would be to appreciate the motive of design.
It will vary from client to client and from project to project. To begin with, consider the primary goal of the email. Discuss it with your client. Familiarise yourself with the brand aesthetic. Try to internalise the tenor of the brand. Understand what exactly the email is trying to communicate to the subscribers. All this will define your design strategy.
“It’s important to be on the same page with our marketing team because that sets the stage for evaluating what works, what doesn’t, and what we can do better next time. By starting with a clear understanding of the goal, we lay a solid foundation for the project and open the doors to future improvements,” says Noelle Grimes, Art Director at Meet Marigold.
Going forward, you want to harmonise a client's particular objectives with the general goal of email design, which is, among other things, to foster personal, meaningful engagement with the client’s target demographic.
Choosing The Most Liberal Email Clients
Now we know that the Web employs the same technologies (HTML and CSS) as email. This has often led email designers to take a uniform approach to both.
However, unlike the synchrony among web standards, email designers must still contend with the idiosyncrasies of various email clients.
Designers must wrestle with clients who still use outdated rendering engines, frequently at the cost of responsive design techniques not supported by such clients. Frustratingly enough, no two email clients render the same email similarly.
The best action would be to determine which clients make the most sense for you as a designer. Equally, consider listing the top ten email clients according to their usage and market coverage.
Ah, but what if you are working for a client who uses Gmail or Outlook, those two dinosaurs of the email world? In that case, probe the limitations of the email client and fine-tune your design approach accordingly.
Even after setting the premise, you may come across outmoded email clients, depending on the urgency of a particular project. Webmail clients can be equally problematic. Gmail would be one such client. It does not allow media queries and document-level styles. It strips out any code that seems to gatecrash its rendering model (more on this later.)
- Berman, Alex (Author)
- English (Publication Language)
- 212 Pages – 05/16/2022 (Publication Date) – Independently published (Publisher)
Determining The Size of Your Email
There is no one right size for an email. Campaign goals and email type determine the size of your email. Let’s talk about width first.
The width refers to the horizontal extension of the email. The industry standard is 600-640 pixels. Depending on brand requirements, you may compromise on the maximal limit. However, you must then test it on various email clients. Given how conservative specific email clients tend to be, a template that wide may not be widely supported.
For mobile viewing, the standard template width is 320-480px. At the same time, it is essential to note that if your template is 480px wide, viewers must flip their phones horizontally to see the email entirely.
Coming to the height of the template, there are no limitations. Your template can be as long as needed. The standard template is 1500 px long, but you can go higher if the email has a lot of content. Use intelligent formatting to break up your content and increase readability.
One thing to note: the longer your email, the greater the tendency of the viewer to stray and ultimately lose interest. Therefore, placing the most important details at the top, preferably within 350-500 pixels.
Finally, the weight of an email. Email clients typically don’t support heavy emails. The standard file size is 75 KB. Accordingly, the HTML weight of your template should be within 20-102 KB. If you want to reduce the weight of your email, try to cut off unnecessary content. By content, we mean the body copy, NOT images, videos, or animated GIFs.
Establishing A Clean Template Hierarchy
Hierarchy is the most crucial element in email design. It affects scanability and readability. It is what determines the viewing experience.
“Hierarchy is the most important design tool we have when it comes to email. We know we only have a limited amount of time with each subscriber, and hierarchy is key to ensuring they can focus on the most important takeaways of our message,” says Megan Fletcher of Meet Marigold.
Now, the standard email hierarchy is something like this: first, a tempting headline, followed by a vivid hero image, body copy, and then a bold, prominent CTA. Notwithstanding trends, brands usually stick to this arrangement. It is the most practical and, so far, the most useful.
A clean hierarchy also demands a simple layout. A single-column format is accessible to design, looks nice, and renders well because it does not require much reflow to operationalise the content effectively within a relatively narrower viewport. Even a double-column layout is relatively easy to align with smaller viewports.
Multi-column layouts may be complex for some email clients to handle. Mobile rendering will be complicated because a multi-column structure will have a more complex, potentially more chaotic markup.
We recommend using single-column layouts in email design unless you need multiple columns. A clean hierarchy makes it easier for the viewer to distinguish the most relevant portions of the email from the least relevant ones. It concentrates the viewing experience, minimising cognitive depletion.
Preheader, Header, Content Blocks, CTA, Footer
(Logically, we’re still talking about hierarchy.) The hierarchical paradigm in email consists of the preheader (or email preview), header, content blocks, CTA, and footer.
After the subject line, the preheader is the most critical part of inbox viewing. You may also add the preheader inside the email. A preheader longer than 100 characters (that is, over 65 pixels) is not recommended.
The header's standard width and height are 600-800px and 200px, respectively. You may determine the number of content blocks as per requirements. However, avoid keeping long content blocks, which leads to email abandonment. You want to keep each content block within 200-300 pixels in height. Longer is fine, but not over 1200 pixels.
As far as CTA buttons are concerned, they should be approximately 200-300 pixels wide and 50-75 pixels long. The CTA should be large, extra-prominent, and well-padded for mobile viewing.
Should the CTA be square-cornered or round-edged? We recommend round-edge buttons since they point inward, directing the attention toward the CTA text. But you can also combine round and square in a single template.
Generally, an email template consists of primary CTAs and secondary CTAs. The primary CTA is the main action you want the subscriber to take in the context of the email.
Your secondary CTA, usually placed below the fold and therefore less prominent, is any further action you might want the viewer to take. We recommend color-filling the primary CTA to make it stand out. Use bold and large text. An excellent trick to call attention to the primary CTA is applying a lot of negative space around the button.
There is another way of creating client-friendly CTA buttons. Instead of using images, you can use code to build your CTA button. It’s an excellent way to get around image-blocking. Subscribers who have their photos turned off can still view the CTA button.
The footer of an email is typically short. But we have across brands whose email footers are almost a quarter of the template and chockablock with information written in a very low font size. Nevertheless, keeping the footer no longer than 100 pixels is best.
- Kothand, Meera (Author)
- English (Publication Language)
- 132 Pages – 05/20/2019 (Publication Date) – Independently published (Publisher)
Understanding CSS Inlining in Email Design
There are three ways to create styles in email: external stylesheets, embedded styles, and inline styles.
Web clients widely support external stylesheets but are unsuitable for email design. Embedded styles, while popular, are not supported by clients like Gmail. Gmail tends to strip out the CSS styles in the <head> tag of the HTML document, resulting in a messy display of your email.
(Gmail will strip out the entire HTML formatting upon encountering an error. For instance, Gmail strips out <style> tags that contain a @declaration within an @declaration. It’s not for nothing that Gmail is one of the least-loved email clients among developers.)
So we’re left with CSS inlining, which is the safest regarding compatibility across several email clients. Inlining moves the formatting instructions in the style block in the head to the body of the HTML, resulting in an adequately rendered body.
Balancing Text And Image In Your Template
Another sticking point regarding email design is how much of it should be visual and how much textual. Again, it depends on the type and motive of the email.
For instance, a Policy Update email doesn’t require a hero image, for one thing. It’s primarily text-based. On the other hand, a promotional email is mostly image-oriented, with as little text as possible, to reduce the template’s HTML weight.
(As an aside, speaking of designing based on what kind of email you have in front of you, don’t forget to redesign emails for automated campaigns when you are redesigning templates.)
Now, it’s essential to realise that the end goal of balancing text and image is to make it simpler for the viewer to navigate the template. To that end, it is good practice, where a lot of text is necessary, to arrange it in the form of bullets. You can try colour blocking to reinforce visual interest when transitioning from one paragraph to the next.
We recommend using live text rather than incorporating it in an image if you must convey something important via email. There are two reasons for it:
- The effect of visuals is panoramic. In other words, the impact of a visual is less focused than live text. One is only passively involved in appreciating a visual. On the contrary, live text demands more focused parsing from the viewer. So, it’s more info-friendly.
- Images may not always be visible to particular email recipients. If all information is confined within ideas, viewers won’t be able to access it. It is no better than a blank email!
“You just don’t know how your subscribers are experiencing your emails, and you want to give your subscribers the best experience no matter what. And that is impossible with all-image emails,” asserts Carin Slater, Email Marketing Specialist at Litmus.
The mantra is simple: the type and motive of the email determines the text-to-image ratio. Second, use live text to communicate the most essential details of your email.
Design Styles, Minimalism, Consistency
In his much-acclaimed book, 10 Principles of Good Design, German designer Dieter Rams courts minimalism, asserting that good design is often as “little design as possible.” Now, it has been widely misunderstood. Regardless, his principle is relevant to email design in more ways than one.
Minimal implies less distractive. Among his other nine principles, Rams favours design, which uses his phrase, “unobtrusive.” It’s worthwhile to quote him in full:
“Good design is unobtrusive. Products fulfilling a purpose are like tools. They are neither decorative objects nor works of art. Their design should, therefore, be both neutral and restrained to leave room for the user’s self-expression.”
The last few words could be misinterpreted, leading to cerebral connotations. Regarding minimalist design in email, the two most important words are “neutral” and “restrained.”
(Restrained does not necessarily mean you must compromise your brand image. Imagine a brand like Shinesty ‘restraining’ their design! No; in fact, designing according to your brand image limits the palette instead of flirting with lurid colour tones – which, we reckon, is the point Rams is trying to make.)
Another common misconception about email design is that design, by default, involves using images. That’s far from fiction! Colour blocking, button padding, font styles, arrangement of content blocks, etc., all contribute to design. Indeed, an email that has no image can be well-designed.
These elements allow a brand to achieve that all-important thing: consistency. In one of his blog posts, celebrity marketer Seth Godin says, “We call a brand or a person authentic when they’re consistent when they act the same way whether or not someone is looking.”
Consequently, brand consistency fosters trust and reliability. Regarding email design, we recommend developing a brand library consisting of photos, images, icons, graphics, etc., to ensure that a brand is consistently represented across campaigns.
Optimising Font And Typography
This section will first discuss font and typography relative to email renderability, which is rarely discussed.
Renderability is a significant concern among email designers and marketers. In fact, as per Litmus, the most popular email apps update every 1.2 days! If you are a designer, you know what the implications of that are. It’s almost an invitation to vanilla design.
Ultimately, the designer faces two options: web fonts and web-safe fonts. Web-safe fonts, including Helvetica, Arial, Times New Roman, Georgia, and Verdana, are typically subscriber-friendly. On the contrary, web fonts may require additional development bandwidth and testing. These are also rarely render-friendly.
At the same time, the variety of web-safe fonts is limited, unlike web fonts, which allow for more creative enterprising. Our suggestion? Have a dedicated font stack in place. You can fall back on your in-house font stack during a crisis.
Now, it is essential since, with this, you can display your emails in the default font of email clients. Outlook, for instance, will render your email in Times New Roman, whereas Gmail will show a sans serif font.
I am coming now to typography with readability/accessibility. We recommend using serif and sans-serif fonts. These are the most readable and accessible fonts. Avoid using script and display fonts, except for headlines, occasionally.
The following are the most popular fonts used in body copy. They are also widely supported by email clients.
| Serif Fonts | Sans serif Fonts |
| Courier New | Arial and Arial Black |
| Georgia | Helvetica |
| Palatino | Trebuchet MS |
| Times New Roman | Verdana |
| Georgia | Tahoma |
| Arial Narrow |
Another good rule of thumb to increase readability is to left-justify your copy. Left-justified text is widely recognised as reader-friendly. It benefits readers with visual impairments who rely on screen readers and other assistive devices to read web content.
(If you want to know more about reader-friendly design, head over here.)
As per the recommendations of the World Wide Web Consortium, line spacing should be 1.5-2 times the size of the text. The standard font size is 14px. If the size is less than 14px, it will be automatically enlarged by some mobile devices.
Rigorous Testing
Testing is indispensable. Always test your code rigorously before sending your email to ensure it renders effectively across clients. You can do this in the following ways:
- Send the test email to your service provider to view it as the subscriber would.
- Take the help of a designated email service to send and view the test email quickly.
- Use a task runner tool to test each component of your email.
- Build a device lab to test your email directly on various platforms. (This is more resource-intensive than the rest.)
Feel free to take any of the above testing routes. (If you are using an ESP to send your email, remember that some ESPs could change the code upon sending, potentially leading to rendering issues.)
Finally, don’t forget the spam test. Realising that you can no longer depend on avoiding specific spam-triggering phrases to bypass spam filters is essential. Factors determining email deliverability are far more multifaceted than you might assume.
Google announced that by February 2024, bulk senders must authenticate their emails, enable easy unsubscription, and stay under the spam threshold.
“Nobody likes spam, and Gmail already includes many tools that keep unwanted messages out of your inbox. To add another protection, we’ll enforce a clear spam rate threshold that senders must stay under to ensure Gmail recipients aren’t bombarded with unwanted messages. This is an industry first, so you should see even less spam in your inbox,” says Neil Kumaran, Group Product Manager, Gmail Security & Trust.
Wrapping up!
In this post, we looked at the evergreen paradigms of email design. We recommended various best practices for multiple aspects of email design, along with the justifications thereof.
As we mentioned at the beginning, it is crucial to maintain sight of the paradigm of email design in the pursuit of following ever-changing trends. As we close, our final recommendation would be to incorporate the latest trends into email design, considering the importance of context, narrative, and design objectives in every email.
Last update on 2024-05-19 / Affiliate links / Images from Amazon Product Advertising API
