Electronic mail design is a singular follow. For one factor, there are some main variations between net and e-mail growth. However there are a lot of different components 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 commonplace recommendation and greatest practices for e-mail design. We’ll additionally reply the commonest questions on e-mail format 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 greatest 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 had 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 purchasers and rendering engines.
That’s why e-mail coding continues to be one of many trickiest issues you are able to do with Hypertext Markup Language (HTML). The e-mail purchasers we use right this moment have very totally different e-mail rendering engines from each other, and standardization could be very gradual.
Fortunately, a brand new group known as the Electronic mail Markup Consortium is seeking to change that after and for all. Discover out extra concerning the EMC’s plans for standardization.
10 questions on e-mail design greatest practices
Okay, e-mail standardization is a ache in the meanwhile, and it’s exhausting to code a one-size-fits-all HTML e-mail resolution. That mentioned, listed below are 10 widespread questions and one of the best practices we advocate for e-mail design:
- What’s the appropriate pixel (px) width for emails?
- Ought to I exploit movies in emails??
- Can I exploit any font I need??
- Ought to I exploit background photos?
- Why ought to I create responsive e-mail designs?
- Ought to I exploit 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 under.
1. What’s one of the best dimension for emails?
For those who’ve been round e-mail for any period of time, you’ve in all probability heard concerning the 600 px e-mail width. Now, is that delusion or actuality? This one is difficult: it’s a little bit of each.
As a result of smaller display sizes again within the early days of HTML emails, 600 px grew to become the commonest e-mail width.
However do you continue to want to make use of 600 px e-mail width nowadays?
Though display sizes have elevated quite a bit since then, a few e-mail purchasers, like Yahoo Mail and Outlook, might need issues with vast emails.
Most Microsoft Outlook customers use the 3-column view. This covers a lot of the display by the primary two columns, and fewer than 50% of the display stays for e-mail viewing.
In Yahoo Mail, customers use an analogous 3-column view too. On high of that, they’ve displayed banner advertisements on the appropriate aspect of the display, which takes up further house.
We performed a collection of e-mail rendering exams to find out how totally different e-mail widths behave in Yahoo and Outlook.
Let’s have a look under at an e-mail template with a 750 px width from Econsultancy.com in Yahoo Mail.
You may see that the appropriate aspect of the e-mail is lower off on the commonest 1366×768 px decision. The e-mail can be lower off in Outlook even when the viewing display dimension is similar.
Primarily based on our exams, the utmost e-mail width that may match onto the display in Outlook and Yahoo is roughly 650 px. So, if a big variety of your subscribers use these e-mail purchasers, we advocate that you simply keep under 650 px or just use the commonest 600 px width.
2. Ought to I exploit movies in emails?
Most e-mail purchasers don’t help embedded video in emails – just some e-mail purchasers, equivalent to Apple Mail or iOS, help embedded HTML5 video.
As an alternative of utilizing movies, we propose utilizing animated GIFs. With animated GIFs, you’ll be able to nearly obtain the identical impact as a video. They work in most e-mail purchasers however gained’t play in Outlook 2007-2013. There, the GIF will solely present up as the primary body of the animation. Try some artistic animated GIF examples that we like.
3. Can I exploit any font I need?
Electronic mail designers and entrepreneurs in all probability ask you for particular fonts on a regular basis. We don’t blame them: web-safe fonts like Arial or Occasions New Roman are fairly boring. Nonetheless, font help past these “web-safe fonts” shouldn’t be standardized throughout e-mail purchasers.
One resolution is to make use of net fonts which can be hosted on a server, like Google fonts. You need to use these net fonts with the CSS tags @font-face or @import. With some e-mail purchasers, you too can use the <hyperlink> methodology. Study extra about utilizing net fonts and the best way to use font stacks to construct in backup choices in case your chosen font fails.
4. Ought to I exploit background photos?
Some e-mail purchasers, significantly the desktop variations of Outlook, will robotically disable photos in your e-mail campaigns. That could possibly be particularly problematic for background photos. For instance, if you happen to use mild textual content on a darkish background picture, the e-mail copy could possibly 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’ll be able to create a bulletproof background through the use of CSS and HTML to copy the look of a background picture.
Along with utilizing a bulletproof background, at all times just remember to have a failover background colour 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 had been on cellular units. Responsive e-mail design, or the follow of constructing emails optimized for various display sizes, is a crucial a part of e-mail UX. Attain your audience by ensuring your subscribers can learn your messages on any gadget.
Unsure the place to begin? Try our responsive HTML e-mail design tutorial.
6. Ought to I exploit 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 totally different purchasers. As an alternative, we are able to counsel that you simply look into whether or not there’s broad emoji help throughout your subscriber base and observe our greatest practices for utilizing emojis.
7. What’s one of the best ways so as to add a CTA button?
We advocate 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 far more dependable throughout totally different e-mail purchasers than an image-based button. Picture-based buttons could make your click-through charges and ROI endure. In spite of everything, you’ll be able to’t have conversions in case your subscribers can’t click on in your button due to an e-mail consumer rendering problem.
Plus, if a subscriber is utilizing an e-mail consumer that has photos turned off, your CTA button will disappear. And that’s a reasonably vital factor to lose.
8. How can I add personalization with e-mail design?
When you concentrate on personalization, the very first thing that involves thoughts is solely utilizing a subscriber’s title within the topic line or e-mail copy. However you too can use e-mail design to personalize the inbox expertise.
For instance, if you happen to use a segmented checklist on your e-mail advertising and marketing, you’ll be able to tweak your e-mail design for these segments’ tastes and preferences.
Dynamic content material is an much more superior method to personalize e-mail design. t It options e-mail content material that adjustments relying in your subscriber knowledge or their conduct. That might embody their location, the time of day that they open the e-mail, and even the climate the place they dwell.
A method to do that is through the use of variable mapping in your HTML e-mail template. You need to 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 slightly 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 circumstances 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 wish to give attention to the ability of phrases, it’s fairly possible that you simply don’t want a really fancy e-mail design in any respect. In these circumstances, 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 title.
- Photos 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, fashionable 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 personal voice to achieve success within the fierce competitors right this moment.
10. Ought to I A/B check my emails?
Sure. Reap the benefits of the information you get out of your e-mail campaigns to create higher e-mail designs for future campaigns. Use A/B testing to check out totally 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 suggestions 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 totally different e-mail purchasers in seconds with Electronic mail on Acid’s testing software.
This text was up to date on July 26, 2022. It was first printed in March of 2017.
Creator: The Electronic mail on Acid Group
The Electronic mail on Acid content material crew 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 Group
The Electronic mail on Acid content material crew 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.
