Article first published May 2017, up to date February 2019. Want an email that appears striking and converts like crazy?We joined forces with the proficient crew from Really Good Emails to take the guesswork out of designing a superb email with this email design guide and guidelines that’ll make every email you send more extraordinary. In this guide, we’ll cover email design best practices for all of the different components of your email campaigns and feature an advantage guidelines for you at the end. So let’s get to it. Subject LineWhile not a standard “design aspect” your discipline line is regarded one of the most critical elements in getting your email opened so your subscribers can see your sweet design so make it attractive, personal, and applicable.
Remember, that overuse of CAPS and needless punctuation, as well as some words, can cause spam filters so recognize your subscribers and don’t go there. Use these words instead. Bonus: CoSchedule has a superb Headline Analyzer that could also be utilized to email subject lines. Is longer better?When it comes to email field lines longer isn’t always better. It’s essential to bear in mind that your subscribers use a variety of various browsers and email consumers as well as mobile gadgets to consume your emails.
According to data from Return Path, 65 characters looks a sweet spot for email area lines, which is about 15 characters greater than the common area line. When subject lines are 61 70 characters long, they are inclined to get read. However, most email subject lines are between 41 and 50 characters. What about symbols in field lines?The saying “an image is worth a thousand words” may never be truer than when it involves emoji. And emoji in email discipline lines can have an enormous impact. Not only can they take where of words, be interest grabbing, and add a definite charm, they’re able to augment your open rates.
A report by Experian noted that 50 six percent of brands using emoji of their email subject lines had a better unique open rate. Remember: Gmail has to have some phenomenal considerations when using emoji. You may notice in Gmail when you use emoji in the field line the icon will look various in the inbox view and after the e-mail has been opened. This is because of the inbox view using the Android version of the emoji, meanwhile, the opened email view uses Google’s own emoji style. While the emoji basically look an analogous, it’s still worth checking out to ensure the same sentiment is expressed in both versions. In addition, for Inbox by Gmail, it’s presently not feasible to insert emoticons in Inbox messages using the browser edition.
PreheaderYour preheader can be visible in the inbox preview and in the body of your email, or just in the preview pane if you want to save email real estate. Preheaders add helpful context to your discipline line and may help your open rate. Keep it short between 40 70 characters and to the purpose. Use this space to help your customer know why the e-mail is useful to them. Your subject line and preheader text should work in combination.
PersonalizationEmails with personalized field lines are 26% more more likely to be opened. Go beyond just using your subscriber’s name in the discipline line and use other data you need to fuel super relevant messages. Adding agency name, last purchase, or other data lets you customize the email in the perfect way for each subscriber. But incredible personalization involves greater than just injecting a first name. Think about how you could completely change the e-mail based on someone’s information.
Stop taking into consideration emails as one to many and look at them as one to one—where each email is customized to every subscriber. Humanization / Contextual MarketingA term that’s been getting established is contextual marketing or humanization which focuses on making the e-mail more of a 1 to 1 engagement as opposed to a 1 to many type email that’s one size fits all. This leads to emails particularly adapted to the subscriber that can lead to higher engagement. Spotify is an excellent instance with their year end campaign showing each subscriber what their most listened songs were and where they ranked in their favorite artists’ fan rankings based on how many times they listened to their music. Making your email feel more “humananized” and adore it was built for every subscriber has many benefits adding elevated engagement, better relationships along with your subscribers, and even people getting excited to acquire and open your email. Dynamic ContentFor those desirous to get extreme with personalization, you can even dynamically change entire sections of content within your email to make all of the campaign more relevant and more appealing to subscribers.
A common use case for this may be showing menswear to your male subscribers while showing womenswear to female subscribers. Check out how Adidas did it during this email:Email LayoutYour email layout can help the viewer know what they need to take a look at first, and where they are able to go from there. They could be in a position to scan the email quickly using a logical hierarchy with large headlines and pictures focusing the attention. Use layout to get a divorce space and help create chunks of content. Inverted PyramidWe’re big fans of the inverted pyramid model.
It’s essentially a framework for structuring the components of your email campaigns headers, imagery, buttons, etc so they work together to draw people in, deliver the key messages of your crusade and get them to click through. By guiding a subscriber’s eye down the page to your CTA, you’ll encourage them to click through to discover more of what you must offer, resulting in better brand awareness, more web traffic, and ultimately more sales. Zig ZagAnother efficient design grid is an angular one with a zig zag layout. According to the picture designer, Mary Stribley, an “angular layout is both enticing to look at as well as practical to order a lot of information and imagery. ”You can create these angles through using imagery or color blocking if you want to guide the reader via each step of the e-mail. This not only creates a visually attractive layout, it also helps to simplify each section of the email so that it is easy to read.
One ColumnOne column emails work great on computing device and mobile. These mobile first emails usually adapt to desktop and scale images. It helps buyers navigate the email with out overwhelming them. The one column design makes it apparent what information is important and what you desire a client to do next. Email WidthTo ensure that your email renders well in every email client, we can push the envelope on our email widths to as a minimum 640 pixels. At widths wider than 640px Gmail doesn’t show any heritage color that would appear in the margins at most least expensive browser sizes which you could see them if you stretch your browser to wider than 1200px.
For our designs, 600px is generally the sweet spot. Plus, email consumers don’t use the total width of your screen to show an email message. Some show ads or have navigation or a menu so there are obstacles to the real estate on a screen. ImagesWhen using images in your emails, it’s essential to keep here in mind:Dimension – most emails are 600 640px wide. However, to maintain your image crisp on high decision displays, you should make your image 2x the size ie.
1200px and use the picture attributes and CSS to keep the picture at the width you want. File Size – It’s easy to forget about file size in an email but you want to make sure your images are optimized. Especially since more than 50% of emails are opened on mobile devices. The bigger the email, the longer it’ll take for mobile subscribers to view and thus create a terrible adventure together with your email. Read more about best practices for image heavy emails here. Alt Text – If your image doesn’t load or breaks someplace along the sending process, Alt Text is the text that will display as an alternative.
This is another area that many email marketers fail to see. Add in effective Alt Text that adds to your message in the case that your image doesn’t load. If your image has text on it, I usually write the protecting text as the alt text. This way if the picture doesn’t load, the text will still be read. Including ALT text also makes your email more accessible.
Use images that supplement the e-mail – Your email should not be a group of imagery placed in combination. An image should add to the e-mail and messaging—not be the messaging. A simple way to test here is to view your email with images turned off. Does the email still make sense?Is the message still clear?Our chums at Email Monks offer some solid advice on the premiere text to image ratio. Stock Images – Stock imagery can once in a while take your audience out of the messaging. Keep your images on brand and exact.
Take the time if you be able to create specific imagery to your email crusade!If not, use imagery from paid sites like stocksy. com or free sites like deathtothestockphoto. com. Here are a few more to check out. Images and Alt TextAlt text is just the alternative text displayed with a picture. Think of it as the backup text that adds some context about what your image is, for those that have images blocked or turned off by default.
Many entrepreneurs find out about alt text the hard way by forgetting to use it and ache the consequences. Don’t be that person. As that you would be able to see from the example below, when images are blocked, subscribers see what seems like a broken image, or a red “X”. In this case, alt text shows that there’s a picture and offered a little context in regards to the image to inspire subscribers to “turn on or enable” images in the email. For more on Alt text have a look at our design guide and this post by our pals at Litmus. Web Fonts + FallbacksWhen it comes to email marketing, it’s best observe to use web fonts anywhere which you can, nonetheless it, it’s vital to keep in mind, that not all email clients offer common aid for web fonts.
Example: Uses @import + @fontface to herald Clobber, Gotham Book, Gotham Medium, and Montserrat fonts. Google Fonts is a very good resource to add web fonts to your emails. We indicate using live text when feasible for better legibility across gadgets and constant brand experience from email to online page to add web fonts to your emails. @[email protected] url pen+SansCurrently, the @import method is not supported in AOL using IE11 and Android 2. 3. The method is fully supported among the email clients listed above.
Web font services will come up with the href value to use in your web font of choice. If you’re internet hosting your individual web font, you’ll have to change the href value to where you’ve hosted your web font. @font face @media screen } Think of the @font face method as a direct to the source form of method of importing your web fonts. It can be more reliable to import the internet font without delay from the source as that you would be able to choose which format of web font you want to import. Especially if you’re given a call, which some web font suppliers do have. If web fonts aren’t supported there are fallback fonts that could be seen as a substitute.
When surroundings fallbacks, be aware to use a “web safe font”. System fonts like Calibri aren’t always supported across all consumers. Each email client also has a well-liked or default font which users would see instead of your preferred web font. If a webfont fails in Outlook, it ignores the fallback fonts and just comes to a decision to render every thing in Times New Roman. If this happens, add this CSS to your email and also you may be good to go. body, table, td, p, li, a Add other parts like p, li, a, etc.
if you deserve to fix Outlook rendering Times New Roman on those elements too. For more help imposing web fonts in your emails, check out our guide here. White SpaceWhite space is the blank area around your paragraphs, images, and contact to action buttons. Adding ample white space around the parts in your email encourages click throughs by keeping apart them visually from other parts in your email and helping focus the reader’s attention on them at the correct time. It may also augment the legibility of your email and improves the eyes’ ability to follow the content material.
Use your best judgment to make sure your copy and CTA button are separated enough to stand out, but close to enough that your readers know they’re connected. Mobile OptimizationEmail opens on mobile contraptions just keep increasing year after year. The latest stats are that over 68% of email opens occur on mobile. Making your emails mobile pleasant is simpler than ever by:Using a mobile friendly templateKeep your field line shortUse preheader textUse minimal body copyUse one clear and straightforward to click CTA button According to a contemporary MIT study, the common size of an adult index finger is between 1. 6cm and 2 cm, which interprets to among 45 x 45px and 57 x 57px on a mobile device. Multiple CTAs can be confusing and cause overwhelm, which you definitely want to avoid.
Increase the size of body copy if it’s small on desktop emails. 16px is an effective size for mobileMake sure your images aren’t too small or hard to see when on mobileCoding Mobile EmailsIf you are coding your emails, there are two approaches to mobile emails: responsive and hybrid. ResponsiveResponsive uses media queries and CSS to override the existing styles when the email is viewed on a small show. @media screen and max width: 480px . responsive image }HybridHybrid gets a little more complicated but relies on using a fluid layout that will shrink and grow with the dimensions of the display. Plus, it doesn’t rely on media queries which can be a big bonus if you’re targeting email consumers that don’t assist media queries.
CTAs + Bulletproof ButtonsAn ideal CTA button has three main elements that work together to create an outstanding conversion point for the reader:Copy – be certain and focus on the benefitDesign – stands out, accurately sized, has whitespace around itPlacement – the ideal placement of the CTA button is relative to the complexity of the offer. If the offer is more complex, you may wish more explanation copy before the CTA. It’s always good to have a couple different button types for different priorities in your email. For example, having an orange button with white text to your main CTAs and light gray buttons with dark text for secondary elements. However, it’s essential to keep the number of CTAs to a minimum in your email.
Focus on where you want people to go and remove any unneeded noise. Here are a few things you have to agree with when crafting your button:Size – Keep your buttons big enough that people can tap on them on their phone. Typically that means around 50 pixels tall. Color – Most brands match the colour of their button to their brand’s colors, contrasting in opposition t the background color and the gap around it. Hover outcomes altering color when one scrolls over is supported by most email consumers and is being used more often. Frequency – The variety of buttons you have in an email is determined by what number of actions are possible to take.
For dealers, that can be assorted merchandise with each have their very own button. For others, that can be only one to focus on the most crucial message. Language – The button is there for viewers to take action, so an active verb is usually used to help them take that action. Because many email clients will block image loading by default, designing your buttons as images may have a terrible effect. Using a “bulletproof button” a small snippet of HTML and in line CSS will ensure that your button is rendered when images are turned off.
You can use this tool to create one:LinksCheck every link in your email on mobile and computing device. Things to look for include if it goes to where you wanted it to, does it have UTM tracking, is it clear in the e-mail that it’s a clickable link, are any email browsers changing the color of your links?Also, regulate dates in your email. Even though you don’t link them, Gmail and Apple want to “help” by turning them into blue clickable links. You can use CSS to override the link style to appear to be steady body text. How to forestall Apple from making links blue:a VideoIt’s common to think that if you happen to use video in email, that the video will simply play, right contained in the email.
That can be a mystical thing, very similar to a rainbow unicorn, but many email clients like Gmail, Outlook, Thunderbird, and others don’t support the technical necessities needed to play video contained in the email. But over half of email clients aid HTML5 so that you could definitely embed video in your email or many ESPs enable you to have a static image with a play button that links to the hosted edition of the video. You also can use an animated GIF as an alternative. Pro Tip: Use a video thumbnail with a play button or GIF teaser of the video to get more clicks. GIFsAnimated GIFs are an excellent option to using video if you are looking to add moving content to your emails.
Animated GIF files can get rather large the more animation, frames, and colours there are in the picture. To keep them as small as feasible, only animate what you need to animate, keep it short, and don’t use every color in the book. It’s really helpful to maintain your GIF file size as near 1MB as possible. Under is perfect. A little over remains to be okay too.
Copy/ToneUnderstand your audience to know what kind of language will work best. Some subscriber lists are more formal whereas other are casual and okay with the odd profanity inclusion tread lightly here unless you are one hundred % sure your audience can handle it. Writing a high appearing email crusade isn’t hard if you stay true to your brand and optimize the key parts of your email. Spelling/GrammarAlways send a test of your email to as a minimum two folks who can check your email top to bottom with fresh eyes and search for typos, grammatical errors and other mishaps. You can use this preflight email guidelines to circumvent common errors before you push send. A/B TestingA/B trying out can be utilized to many components of your email however the field line is among the foremost, and easy things to test.
Most ESPs make this super simple and come with it as a part of their system. Some interesting things that you would be able to test in your area lines include:Length – Test short discipline lines vs. longer field lines here is the subject of much debate in the marketing worldTopic – Test two completely alternative topics as the area line, to see what content material is of most interest to subscribersPersonalization – Add personalization to exact area lines to see if a primary name greeting, for instance, gets a much better response. Promotion/Offer – See what type of promoting works best by providing “Free Shipping” vs. “15% Off”Bonus: CoSchedule, uses Campaign Monitor to send their popular email newsletter The Content Marketing Update.
See how they systematically A/B test email discipline lines to discover what works for their audience. And get the free guide to A/B checking out your campaigns. FooterLegalYour email will need at the least the address of the agency that is sending it and an unsubscribe link to be compliant with govt regulations around the world. Your legal team will probably want to add in another information comparable to terms and conditions too if it applies to your messaging. It is usually good to get a sign off from a manager or suggest to make certain that you have everything essential to protect your rights. Social LinksEven though it might be a small percentage of clicks from your email, it is usually a best practice to expose your viewers where else they can follow your agency.
Each social media platform has its own intention, which your email may not be enjoyable. Select those that your agency uses the main there’s no need to show each social profile your agency has. Social icons that match your branding or anything else of the e-mail is a nice touch. Be sure to show the difference of social share vs. social page icons.
AppConsider adding a link to down load your app when you have one. ReferralWant to spread the word about your product or carrier?Include a referral link portion of your brand has an incentive application set up. It’s a good module to include in transactional emails. SupportContact us or assist links. Ask for comments about the email.
If your email is a [email protected] then give your clients a clear way they need to reach out to you. Shows brand has a buyer assist focus and gives clients the chance to speak up about their studies. BONUS: Email Design ChecklistUse the guidelines in the post along with this email design guidelines for every email crusade you send. Wrap upDesigning terrific emails is easy in the event you follow the guidelines during this email design guide and guidelines. For more awesome email advertising design tips take a look at our resources at Campaign Monitor and Really Good Emails.