Electronic mail design is a singular follow. For one factor, there are some main variations between net and electronic mail growth. However there are numerous different elements that electronic mail builders and designers want to think about when creating eye-catching and efficient campaigns.
On this article, we’re going to cowl some customary recommendation and greatest practices for electronic mail design. We’ll additionally reply the commonest questions on electronic 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 electronic mail
Earlier than we dive into electronic mail design greatest practices for builders, let’s roll again to the darkish ages of electronic mail historical past.
Electronic mail was born within the very early days of the web. Business gamers have been in a giant rush to seize as many electronic mail customers as potential, with little curiosity in cooperating to construct appropriate or standardized electronic mail shoppers and rendering engines.
That’s why electronic 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 right this moment have very totally different electronic 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 trying to change that after and for all. Discover out extra in regards to the EMC’s plans for standardization.
10 questions on electronic mail design greatest practices
Okay, electronic mail standardization is a ache in the mean time, and it’s exhausting to code a one-size-fits-all HTML electronic mail answer. That mentioned, listed below are 10 widespread questions and one of the best practices we advocate for electronic mail design:
- What’s the fitting 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 pictures?
- Why ought to I create responsive electronic mail designs?
- Ought to I take advantage of emojis?
- What’s the easiest way to make use of a CTA button?
- How can I add personalization to my electronic mail?
- Do I even must 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?
In case you’ve been round electronic mail for any period of time, you’ve most likely heard in regards to the 600 px electronic mail width. Now, is that fantasy or actuality? This one is hard: it’s a little bit of each.
As a consequence of smaller display screen sizes again within the early days of HTML emails, 600 px grew to become the commonest electronic mail width.
However do you continue to want to make use of 600 px electronic mail width lately?
Though display screen sizes have elevated lots since then, a few electronic mail shoppers, like Yahoo Mail and Outlook, might need issues with huge emails.
Most Microsoft Outlook customers use the 3-column view. This covers a lot of the display screen by the primary two columns, and fewer than 50% of the display screen stays for electronic mail viewing.
In Yahoo Mail, customers use an identical 3-column view too. On high of that, they’ve displayed banner adverts on the fitting aspect of the display screen, which takes up further house.
We carried out a sequence of electronic mail rendering exams to find out how totally different electronic mail widths behave in Yahoo and Outlook.
Let’s have a look under at an electronic mail template with a 750 px width from Econsultancy.com in Yahoo Mail.
You may see that the fitting aspect of the e-mail is minimize off on the commonest 1366×768 px decision. The e-mail can be minimize off in Outlook even when the viewing display screen dimension is similar.
Primarily based on our exams, the utmost electronic mail width that may match onto the display screen in Outlook and Yahoo is roughly 650 px. So, if a major variety of your subscribers use these electronic mail shoppers, we advocate that you simply keep under 650 px or just use the commonest 600 px width.
2. Ought to I take advantage of movies in emails?
Most electronic mail shoppers don’t help embedded video in emails – just some electronic mail shoppers, corresponding to Apple Mail or iOS, help embedded HTML5 video.
As an alternative of utilizing movies, we advise utilizing animated GIFs. With animated GIFs, you may virtually obtain the identical impact as a video. They work in most electronic 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 Occasions New Roman are fairly boring. Nonetheless, font help past these “web-safe fonts” shouldn’t be standardized throughout electronic 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 electronic mail shoppers, you can too use the <hyperlink> methodology. Be taught extra about utilizing net fonts and find out how to use font stacks to construct in backup choices in case your chosen font fails.
4. Ought to I take advantage of background pictures?
Some electronic mail shoppers, notably the desktop variations of Outlook, will robotically disable pictures in your electronic mail campaigns. That might be particularly problematic for background pictures. For instance, in case you use gentle textual content on a darkish background picture, the e-mail copy might 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 may create a bulletproof background by utilizing CSS and HTML to copy the look of a background picture.
Along with utilizing a bulletproof background, all the time just be sure you have a failover background shade in order that your electronic 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 electronic mail opens have been on cellular units. Responsive electronic mail design, or the follow of constructing emails optimized for various display screen sizes, is a vital a part of electronic mail UX. Attain your audience by ensuring your subscribers can learn your messages on any machine.
Undecided the place to start out? Take a look at our responsive HTML electronic 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 any case, emoji help differs dramatically throughout totally different shoppers. As an alternative, we are able to recommend that you simply look into whether or not there’s broad emoji help throughout your subscriber base and comply with our greatest practices for utilizing emojis.
7. What’s the easiest way 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 electronic mail shoppers than an image-based button. Picture-based buttons could make your click-through charges and ROI undergo. In any case, you may’t have conversions in case your subscribers can’t click on in your button due to an electronic mail shopper rendering challenge.
Plus, if a subscriber is utilizing an electronic mail shopper that has pictures turned off, your CTA button will disappear. And that’s a fairly vital factor to lose.
8. How can I add personalization with electronic mail design?
When you consider personalization, the very first thing that involves thoughts is just utilizing a subscriber’s title within the topic line or electronic mail copy. However you can too use electronic mail design to personalize the inbox expertise.
For instance, in case you use a segmented listing to your electronic mail advertising, you may tweak your electronic mail design for these segments’ tastes and preferences.
Dynamic content material is an much more superior strategy to personalize electronic mail design. t It options electronic mail content material that adjustments relying in your subscriber knowledge or their habits. That might embrace 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 electronic mail template. You should use the shopper knowledge in your databases, like names or buy patterns, and map these onto variables in an HTML electronic mail template.
If that sounds a little bit too technical for you, no worries. There are some nice options that may assist with including dynamic content material to emails. They embrace NiftyImages, Movable Ink, and Zembula.
9. Do I even must 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 electronic mail is text-heavy and also you actually need to give attention to the ability of phrases, it’s fairly probably that you simply don’t want a really fancy electronic mail design in any respect. In these instances, you may think about using a light-weight HTML electronic mail template that appears virtually like a plain-text electronic mail. You may focus your image-use on the fundamentals:
- Your brand: Showcase that the given electronic mail belongs to your model. This is a wonderful alternative to showcase your organization title.
- Photos of your services or products: May you think about a pure textual content electronic mail from Bestbuy? Most individuals count on to obtain image-heavy, visually interesting, fashionable emails with good footage from companies.
- Social media icons: Promote your different on-line communication channels to your electronic mail subscribers.
Earlier than you begin designing your first electronic mail template, take a look at the type of emails that your opponents ship to assist yours stand out from the gang 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. Benefit from the information you get out of your electronic mail campaigns to create higher electronic 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 electronic mail campaigns.
Wrapping up
With these 10 suggestions and methods, we hope we’ve helped you keep away from some main pitfalls. Undecided how your electronic mail will look? Preview how your electronic mail will seem on totally different electronic 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 printed in March of 2017.
Creator: The Electronic mail on Acid Crew
The Electronic mail on Acid content material crew is made up of digital entrepreneurs, content material creators, and straight-up electronic mail geeks.
Join with us on LinkedIn, comply with us on Fb, and tweet at @EmailonAcid on Twitter for extra candy stuff and nice convos on electronic mail advertising.
Creator: The Electronic mail on Acid Crew
The Electronic mail on Acid content material crew is made up of digital entrepreneurs, content material creators, and straight-up electronic mail geeks.
Join with us on LinkedIn, comply with us on Fb, and tweet at @EmailonAcid on Twitter for extra candy stuff and nice convos on electronic mail advertising.
