10 Proven Email Design Techniques
Email marketing is the use of email to promote products or services, but it is not just limited to that. You can use this resource to develop relations with current customers, and/or to reach out to potential customers. Email marketing allows all kind of businesses (e.g. TheInvestorZ crypto financial platform and Christian Dior fashion store) to keep their customers informed, and to customize their marketing messages accordingly.
81% of SMBѕ still rеlу оn email аѕ their рrіmаrу сuѕtоmеr acquisition сhаnnеl, аnd 80% for retention. (Emаrѕуѕ, 2018)
Think of email marketing as the easiest marketing automation tool to implement, one of the most cost-effective, and conversion-rich forms of digital marketing today. Its widespread usage to drive sales does not really mean that the body of the email has been optimally designed.
The body of the email should rather be persuasive enough to your store get great results. Let’s see relevant aspects to consider when creating the email design of your newsletter campaigns. Below, we will often use the term “email design” as a reference to the body of the email
# 1 – Email openers
In the digital marketing arena, it so common to collect only the subscriber email. In fact, many squeeze pages out there do not contain a name input field. The actual understanding is that gathering less information about the lead increases the chance your web visitor agrees to leave at least his email address on your capture page. This fact, however, should not prevent you from including, at least, a quick greeting in your email design.
In most email writing situations, you will want to include a quick greeting (salutation) to acknowledge the reader before diving into your main message or request. The only exception is when you are on an email chain with close colleagues, it often becomes more natural to drop the opener as well as the closing. Though it may initially feel like a faux pas, it signals a better professional rapport.
# 2 – Create attention-grabbing headlines
When someone opens an email, the headline is the first thing they will see in the email design, after the subject line that enticed them to open the email in the first place and immediately after the salutation (openers). If the headline does not grab their attention, they probably will not continue reading. You may try some free headline generators available on the web like:
# 3 – Have one focus per email
The email design must have a clear and specific purpose, such as talking about a specific info product, inviting to the next webinar, getting feedback on a presentation, or arranging a meeting with a new client. The email design should also be concise. That way, people will be more inclined to read it, rather than skimming it and risking missing critical information. If you can, boil it down to a few choice sentences.
Too many promotions in one email may decrease conversions. Instead of giving too much information and many options for purchasing something, make your email focused on one item and one offer. The reason is that you avoid confusion and increase conversions by telling your audience about one offer at a time. You can always upsell and cross-sell at the point of checkout but for the purposes of the email, make the focus on one thing only.
# 4 – Provide one link per email
Do not overwhelm your audience with ten links to different items in your emails. Instead, provide one link for the focused information that you want to get across to your niche audience. One link gives them one thing to do. Some internet marketers use two links per email, at maximum.
# 5 – Links in lists don’t have to be underlined
Some sources say that all links on any page should be blue and underlined. While others say just blue, or say that as long as they are in a clearly labeled List Of Links or Links For You then black is fine! As a usability specialist, the first answer could be: go ahead and test this design with your own users. The design that provides the best usability is always contextual and determined by two factors: your users and their tasks.
Comparing these two factors in context shows that first, the users are very different (a) on the public Web, where the users are anybody who happens to come by, and (b) on your intranet (if you have one), where the users are your employees. Second, the tasks are also very different (a) on the public Web, potential customers compare your company to others on the same SERP, to decide where to click, while (b) on intranets, employees search for either company policies or past info to their current project.
Given the differences in users and tasks, it is better to test your intranet than to draw lessons from even the biggest and most famous public websites. However, in both cases, the general guideline is to ensure a strong visual indication of where users can click. In other words, clickability should be notable, and a heading might be enough to ensure this.
Image credit: NNGroup
As an example, the NNGROUP conducted a test of 27 company intranet information architecture (IA). The following pie chart shows how the 56 intranet navigation designs colored their link lists. They found that only 7% of the intranets show lists of links without any visual treatment of the links themselves. A few intranets use subtle treatments — either black, underlined text or a link color that is only slightly different from the body text.
More than 75% of the intranets use a consistent link color (typically blue), whether the links are in-line or part of a designated list. This analysis is a strong argument in favor of using a distinct color for links in lists. On the other hand, links in lists do not have to be underlined like people usually do with individual links.
Actually, in a big list, underlining can decrease readability and — depending on spacing and typeface — it can be cluttered and ugly. At this point, it sounds easier to extrapolate the NNGROUP’s 56 company intranet results not only when designing webpages but also when building the email design containing a list of links for your subscribers.
# 6 – Use only links in blue
However, if the they are not underlined yet, the question at hand is whether the items under Links For You (see the image below) look sufficiently like links. According to NNGROUP guidelines from their user testing, such a distinction is essential. Further, their statistics say that such links typically need color. The word Links in the heading and the small triangle that points to each link are probably sufficient to signal to users that these items are links if they were to consider this list closely.
Image credit: NNGroup
Note, however, that is not the same as saying that the black color is optimal. Users do not carefully read every item on a page. If users were to ponder, say, My Alerts (see the image below), they would probably conclude that the item was clickable. But people who are quickly glancing around a page looking for the actionable areas might easily overlook this list of links.
One might thus conclude that assuming you pick a high-contrast link color with good legibility, using colored links will enhance overall usability, even when links appear in a designated list. Beyond that, we recommend you to take into account for another very important fact, not uncommon in the global population, the color blindness.
Color blindness is an often misunderstood condition. Many assume because of its name that color blind means a person can only see in black and white. In actuality, the vast majority of people with color blindness do see color, but they see a much narrower range of color.
It is estimated that a person with a normal color vision can see up to 1 million distinct shades of color, but a person who is color blind may see as few as just 10 thousand colors (1% of the normal range). What are the actual effects of color blindness on vision?
Some commonly confused colors
Image credit: Echroma
We mіght notice thеrе is a раttеrn in the above picture: аll оf thеѕе соlоrѕ соntаіn ѕоmе amount оf either rеd оr green іn thеіr ѕhаdеѕ. Fоr еxаmрlе, purple consists оf bluе соmbіnеd with rеd, оrаngе is a blеnd of red аnd yellow, pink іѕ a blеnd оf whіtе and rеd, еtс. This раttеrn іѕ whу color blindness is ѕоmеtіmеѕ also саllеd rеd-grееn color blіnd оr grееn dеfісіеnt оr rеd dеfісіеnt.
The primary symptom that color blind people experience is color confusion. Put simply, color confusion is when someone mistakenly identifies a color, for example calling something orange when it is actually green. Sir Tim Berners-Lee, the inventor of the web, is credited with making hyperlinks blue. Although accessibility may not have been on Sir Tim’s mind at the time, this color choice was an assertive, happy one.
Red and green are the colors most affected by color-vision deficiency. Almost no one has a blue deficiency. Accordingly, nearly everyone can see blue, or, more accurately, almost everyone can distinguish blue as a color different from others. According to Joe Clark – from Building Accessible Websites – it was pure good luck that the default color of hyperlinks is blue with underlining.
# 7 – Avoid using in-text images
As a general guideline, avoid using in-text images. Actually, most email programs block the automatic image downloads by default, which could cause your recipients to delete your email or even mark it as spam. In terms of email design, we have listed below the wrong use of images:
BEST PRACTICES: Dоn’t create an email design thаt iѕ essentially оnе lаrgе, sliced-up іmаgе. While these kinds of еmаіlѕ lооk pretty, thеу реrfоrm рооrlу.
- Avoid using HTML emails that contain just one big image: Mailchimp recommends a ratio of 80 percent text to 20 percent images in a campaign. However, all spam filters use different criteria for what is a healthy balance of graphics and text.
- Avoid hosting images on a local or private server: If you do work on a staging server or network drive, the general public won’t have access to those servers and images will appear broken. To avoid this, upload and host all images on a public server so that they display correctly in your email design or use the Content Studio to upload images and host them in Mailchimp.
- Avoid not using absolute paths for images and hyperlinks: Absolute paths include your domain information followed by the image/page/file name. They point back to your server so that outside applications can find and access the image/page/file. Use Absolute paths (e.g. <a href=’https://www.domain.com/text/’>Hyperlink</a> or <img src=’https://www.domain.com/image.png/’ />), instead of simply using: <a href=’/text/’>Hyperlink</a> or <img src=’/image.png/’ />
# 8 – Be concise
Would you read an email that was 1,000 words long? Probably not – most people skim emails that are on the long side. And if you add hard-to-follow sentences or mixed messages, to your draft, you are even less likely to get a satisfactory response (or any response).
I get a ton of [emails] that are just these huge blocks of text. And I understand why they do that – so you have enough detail. But it is really hard to read and I am not going to read the whole thing, says Kat Boogaard, a Wisconsin-based freelance writer. While Cole Schafer, founder, and copy chief of Honey Copy says “Nobody wants to receive a novel. You want to keep it between three, four, or five lines of text”.
Writing an extremely long email and/or unclear sales copy can be thus a waste of time. Keep it concise and focus on the matter at hand. Then end with a call to action, a requested response date, and make it clear that you are open to questions and follow-ups (if that is the case). And for emails that require more length and detail, keep it as focused as you can.
# 9 – Size in email design matters
The email design includes the sender’s text as well as attachments and other components. It is a freeform field where you insert as much text as you want, and add supporting links, images, or attachments. Even though attachments are usually displayed separately.
Gmail processes message up to 25 MB in size. This limit is applied to the sum of the message’s text and the encoded attachment. Typically, encoding makes the size of the file grow slightly. Messages exceeding the limit sent to your Gmail account will bounce back to the sender.
When you send an email message, you are not limited in terms of how much text you can use. However, email servers do have limits on how big a message they will accept. Common maximum sizes for email bodies, including attachments, are 10 MB to 25 MB. Take care of your email messages sizes to guarantee deliverability.
# 10 – Best practices when coding HTML emails
BEST PRACTICES: Iѕ уоur еmаіl readable at arm’s length оn a mоbіlе screen? Wіll thе іmаgеѕ ѕlоw іtѕ lоаd time оn a mоbіlе dеvісе? Arе your lіnkѕ easy tо рrеѕѕ with a thumb?
- Kеер уоur CSS ѕіmрlе
- Inlіnе аll CSS bеfоrе ѕеndіng
- Aссоunt fоr mobile-friendliness, іf роѕѕіblе
- Make аn email rеѕроnѕіvе if the design allows fоr it
- Avoid shorthand code (IE: #000 іnѕtеаd оf #000000)
- Avoid complex selectors (IE: dеѕсеndаnt, child or ѕіblіng ѕеlесtоrѕ, аnd pseudo-elements)
- Avоіd CSS layout рrореrtіеѕ (IE: slot, роѕіtіоn, clear, visibility, еtс.)
- Avoid compound ѕtуlе dесlаrаtіоnѕ (IE: “fоnt:#000 12px Arіаl, Helvetica, ѕаnѕ-ѕеrіf;”)
- Crеаtе еmаіl accounts across vаrіоuѕ frее ѕеrvісеѕ, аnd ѕеnd еmаіlѕ tо yourself lіkе a tеѕt
- Use оnlу аbѕоlutе lіnkѕ fоr іmаgеѕ, and hоѕt thоѕе іmаgеѕ оn a reliable ѕеrvеr (your own server)
- Don’t bоthеr with JаvаSсrірt оr Flash—those technologies аrе lаrgеlу unѕuрроrtеd by еmаіl clients
- Uѕе mеdіа ԛuеrіеѕ tо іnсrеаѕе tеxt ѕіzеѕ оn ѕmаll screens, thumb-sized (46x46px) аrеаѕ fоr lіnkѕ
- Uѕе аttrіbutеѕ (сеllраddіng, valign, width) tо ѕеt tаblе dіmеnѕіоnѕ (to fоrсе a bоx-mоdеl structure)
- Cоdе all ѕtruсturе uѕіng thе tаblе еlеmеnt. Yоu should nеѕt tables tо build соmрlеx ѕtruсturеѕ