Electronic mail design is a novel follow. For one factor, there are some main variations between net and e-mail improvement. However there are numerous different elements that e-mail builders and designers want to think about when creating eye-catching and efficient campaigns.
On this article, we’re going to cowl some normal recommendation and finest practices for e-mail design. We’ll additionally reply the most typical questions on e-mail structure and clarify why some issues work and others don’t.
However first, enable us to set issues up with a brief historical past lesson…
A short historical past of e-mail
Earlier than we dive into e-mail design finest practices for builders, let’s roll again to the darkish ages of e-mail historical past.
Electronic mail was born within the very early days of the web. Trade gamers have been in an enormous rush to seize as many e-mail customers as attainable, with little curiosity in cooperating to construct suitable or standardized e-mail shoppers and rendering engines.
That’s why e-mail coding remains to be one of many trickiest issues you are able to do with Hypertext Markup Language (HTML). The e-mail shoppers we use at this time have very completely different e-mail rendering engines from each other, and standardization may be very sluggish.
Fortunately, a brand new group referred to as the Electronic mail Markup Consortium is trying to change that when and for all. Discover out extra concerning the EMC’s plans for standardization.
10 questions on e-mail design finest practices
Okay, e-mail standardization is a ache in the intervening time, and it’s arduous to code a one-size-fits-all HTML e-mail answer. That mentioned, listed below are 10 widespread questions and the very best practices we suggest for e-mail design:
- What’s the best pixel (px) width for emails?
- Ought to I take advantage of movies in emails??
- Can I take advantage of any font I need??
- Ought to I take advantage of background photos?
- Why ought to I create responsive e-mail designs?
- Ought to I take advantage of emojis?
- What’s one of the best ways to make use of a CTA button?
- How can I add personalization to my e-mail?
- Do I even have to ship fancy HTML emails?.
- Ought to I A/B check my emails?
Let’s go over every of those beneath.
1. What’s the very best dimension for emails?
If you happen to’ve been round e-mail for any period of time, you’ve most likely heard concerning the 600 px e-mail width. Now, is that delusion or actuality? This one is hard: it’s a little bit of each.
Attributable to smaller display screen sizes again within the early days of HTML emails, 600 px turned the most typical e-mail width.
However do you continue to want to make use of 600 px e-mail width nowadays?
Though display screen sizes have elevated quite a bit since then, a few e-mail shoppers, like Yahoo Mail and Outlook, may need issues with vast emails.
Most Microsoft Outlook customers use the 3-column view. This covers many of the display screen by the primary two columns, and fewer than 50% of the display screen stays for e-mail viewing.
In Yahoo Mail, customers use an identical 3-column view too. On high of that, they’ve displayed banner adverts on the best aspect of the display screen, which takes up additional area.
We performed a collection of e-mail rendering exams to find out how completely different e-mail widths behave in Yahoo and Outlook.
Let’s have a look beneath at an e-mail template with a 750 px width from Econsultancy.com in Yahoo Mail.
You may see that the best aspect of the e-mail is reduce off on the most typical 1366×768 px decision. The e-mail could be reduce off in Outlook even when the viewing display screen dimension is identical.
Based mostly on our exams, the utmost e-mail width that may match onto the display screen in Outlook and Yahoo is roughly 650 px. So, if a big variety of your subscribers use these e-mail shoppers, we suggest that you simply keep beneath 650 px or just use the most typical 600 px width.
2. Ought to I take advantage of movies in emails?
Most e-mail shoppers don’t help embedded video in emails – just some e-mail shoppers, similar to Apple Mail or iOS, help embedded HTML5 video.
As an alternative of utilizing movies, we recommend utilizing animated GIFs. With animated GIFs, you possibly can nearly obtain the identical impact as a video. They work in most e-mail shoppers however gained’t play in Outlook 2007-2013. There, the GIF will solely present up as the primary body of the animation. Take a look at some artistic animated GIF examples that we like.
3. Can I take advantage of any font I need?
Electronic mail designers and entrepreneurs most likely ask you for particular fonts on a regular basis. We don’t blame them: web-safe fonts like Arial or Instances New Roman are fairly boring. Nonetheless, font help past these “web-safe fonts” just isn’t standardized throughout e-mail shoppers.
One answer is to make use of net fonts which are hosted on a server, like Google fonts. You should use these net fonts with the CSS tags @font-face or @import. With some e-mail shoppers, you may as well use the <hyperlink> methodology. Be taught extra about utilizing net fonts and learn how to use font stacks to construct in backup choices in case your chosen font fails.
4. Ought to I take advantage of background photos?
Some e-mail shoppers, significantly the desktop variations of Outlook, will robotically disable photos in your e-mail campaigns. That may very well be particularly problematic for background photos. For instance, for those who use mild textual content on a darkish background picture, the e-mail copy may very well be unreadable if the background picture doesn’t load (leaving a clean/white background).
Attempt to keep away from background picture use and create designs the place textual content and pictures are nicely separated. As an alternative, you possibly can create a bulletproof background by utilizing CSS and HTML to duplicate the look of a background picture.
Along with utilizing a bulletproof background, at all times just be sure you have a failover background shade in order that your e-mail messages will show even when your background doesn’t.
5. Why ought to I make my emails responsive?
As of 2019, 60% of all e-mail opens have been on cell gadgets. Responsive e-mail design, or the follow of creating emails optimized for various display screen sizes, is a crucial a part of e-mail UX. Attain your target market by ensuring your subscribers can learn your messages on any gadget.
Unsure the place to start out? Take a look at our responsive HTML e-mail design tutorial.
6. Ought to I take advantage of emojis?
To emoji or to not emoji – that’s the query! We don’t have a agency line on this one. In spite of everything, emoji help differs dramatically throughout completely different shoppers. As an alternative, we will recommend that you simply look into whether or not there’s broad emoji help throughout your subscriber base and observe our finest practices for utilizing emojis.
7. What’s one of the best ways so as to add a CTA button?
We suggest utilizing a bulletproof button so as to add a Name-to-Motion (CTA) or different clickable buttons. Like bulletproof backgrounds, bulletproof buttons depend on CSS and HTML to render buttons. This makes these buttons rather more dependable throughout completely different e-mail shoppers than an image-based button. Picture-based buttons could make your click-through charges and ROI undergo. In spite of everything, you possibly can’t have conversions in case your subscribers can’t click on in your button due to an e-mail shopper rendering subject.
Plus, if a subscriber is utilizing an e-mail shopper that has photos turned off, your CTA button will disappear. And that’s a reasonably essential factor to lose.
8. How can I add personalization with e-mail design?
When you consider personalization, the very first thing that involves thoughts is just utilizing a subscriber’s identify within the topic line or e-mail copy. However you may as well use e-mail design to personalize the inbox expertise.
For instance, for those who use a segmented listing in your e-mail advertising and marketing, you possibly can tweak your e-mail design for these segments’ tastes and preferences.
Dynamic content material is an much more superior approach to personalize e-mail design. t It options e-mail content material that adjustments relying in your subscriber knowledge or their habits. That would embody their location, the time of day that they open the e-mail, and even the climate the place they reside.
A method to do that is by utilizing variable mapping in your HTML e-mail template. You should use the client knowledge in your databases, like names or buy patterns, and map these onto variables in an HTML e-mail template.
If that sounds just a little too technical for you, no worries. There are some nice options that may assist with including dynamic content material to emails. They embody NiftyImages, Movable Ink, and Zembula.
9. Do I even have to ship fancy HTML emails in any respect?
There are some use instances when minimalistic, plaintext emails work higher than design-heavy ones. For instance, B2B (chilly) emails and transactional emails are sometimes largely simplistic of their design.
In case your e-mail is text-heavy and also you actually need to concentrate on the facility of phrases, it’s fairly probably that you simply don’t want a really fancy e-mail design in any respect. In these instances, you would possibly think about using a light-weight HTML e-mail template that appears nearly like a plain-text e-mail. You may focus your image-use on the fundamentals:
- Your emblem: Exhibit that the given e-mail belongs to your model. This is a superb alternative to showcase your organization identify.
- Photographs of your services or products: May you think about a pure textual content e-mail from Bestbuy? Most individuals anticipate to obtain image-heavy, visually interesting, trendy emails with good photos from companies.
- Social media icons: Promote your different on-line communication channels to your e-mail subscribers.
Earlier than you begin designing your first e-mail template, try the sort of emails that your rivals ship to assist yours stand out from the group and discover your individual voice to achieve success within the fierce competitors at this time.
10. Ought to I A/B check my emails?
Sure. Make the most of the info you get out of your e-mail campaigns to create higher e-mail designs for future campaigns. Use A/B testing to check out completely different designs amongst subsets of your subscribers and see which one works higher. Take this into consideration and iterate on it for future e-mail campaigns.
Wrapping up
With these 10 ideas and tips, we hope we’ve helped you keep away from some main pitfalls. Unsure how your e-mail will look? Preview how your e-mail will seem on completely different e-mail shoppers in seconds with Electronic mail on Acid’s testing instrument.
This text was up to date on July 26, 2022. It was first revealed in March of 2017.
Creator: The Electronic mail on Acid Workforce
The Electronic mail on Acid content material workforce is made up of digital entrepreneurs, content material creators, and straight-up e-mail geeks.
Join with us on LinkedIn, observe us on Fb, and tweet at @EmailonAcid on Twitter for extra candy stuff and nice convos on e-mail advertising and marketing.
Creator: The Electronic mail on Acid Workforce
The Electronic mail on Acid content material workforce is made up of digital entrepreneurs, content material creators, and straight-up e-mail geeks.
Join with us on LinkedIn, observe us on Fb, and tweet at @EmailonAcid on Twitter for extra candy stuff and nice convos on e-mail advertising and marketing.
