email design best practices

Choose up to two fonts that work well together (more on this later) and use them throughout your emails. Some marketers prefer to design their email templates so that they’re short and sweet, directly leading to their website. 1. Just like a good movie … Subject line. You could start by greeting your subscribers name in the subject line, email body, or even image – if you’re using a tool like NiftyImages. Check out the new GetResponse Email Creator and see how easy it can be. You don’t need any IT or coding knowledge, and you can easily customize mobile-friendly emails. Don't use ALL CAPS or spammy words, … You can see what this looks like, by hovering over any link within your email inbox: For more insights, you can add UTM parameters to your links (if you’re using Google Analytics). As we mentioned and it’s worth reiterating, what might look good on a desktop might not look the same on a mobile device ( when your content is resized or stacked on top of each other). As a BEEPro user, you can design responsive emails in just minutes. Whenever you’re setting up your email template, make sure to check how it renders on different devices and email clients. When it comes to image formatting the situation’s different. The first one’s achieved through the use of a small static image that’s loaded along with all the other images within your email. Free and premium plans, Content management system software. Want to learn more? What looks good on a desktop might not always look good on mobile devices. Tools like, Use a reasonable font size (typically 14-16 px) with decent line spacing, Provide enough whitespace between different sections and elements. The layout of your email should help your recipients consume the content of your message with ease and in the right order. If recipients choose, they may also subscribe to HubSpot’s Sales Blog and Service Blog emails. One of the main takeaways was the idea of creating an email design system that helps you streamline the email creation process, especially when you’ve got a big team. Our data suggests that adding personalization to your subject lines could help you increase your open rate by approximately 0.5 percentage point. Sitewide Sale. Here are the top email design best practices that every brand and email marketer must follow while designing and coding custom email templates. Rather than rewriting the first sentence of your email, you can customize the pre-header to provide an inside look into what your recipients are about to read in your message. (.jpg, .png, .gif). For top and bottom padding, we usually use 10 to 20px between each element or section. #1. This will make them behave better within the … Millions others have hearing, cognitive, mental, or emotional impairment. This method is still in the beta phase, because of which it’s only supported by certain email provers, but it’s likely to be picked up by other such services in the near future. Tip 4: Use an easy-to-read font. Plus, when they click on the thumbnail the video will open up in their app or browser of choice. It is really difficult to decode what makes one design beautiful while another is offensive to our eyes, but let’s try to find the most common traits of nice email … You can also sync your current email service provider (ESP) with the software to access all of your email and contact information from a central location. Most often, it includes a wide, single-column header at the top – featuring the main offer or product – and several blocks underneath split into two columns. Many bloggers get away with this approach, but it may not be ideal if you’re looking to sell ecommerce products. Of course, you’ll want to show high-quality images that present your offer in the best possible way, but you also need to keep in mind the size of your image files. Make sure your copy is legible, even when someone’s reading your message while on the go. If you’re still working on an established visual identity, consider these pointers: Adding your company logo to your emails can help you distinguish your brand from all the other businesses your recipients will see in their inbox. Stay away from generic phrases like “click here”. With over 100 templates offered, MailChimp allows you to customize your email design for your target audience. Here’s an example of a newsletter that uses this feature to drive people to their different product categories – Men’s, Women’s, Jerseys, and Hats: When using navigational bars in your emails, make sure to check if they look good and scale properly across all the different type of devices. See all integrations. You may unsubscribe from these communications at any time. This will let you track your email campaigns in your GA account and provide you with more information about your subscribers’ behavior and preferences. When using GIFs, pay attention to the size of your files. If you do that, two things can happen: 1) your recipients’ email client will pick up that this is a URL and will automatically hyperlink it, or 2) your recipient will need to copy and paste the link into their browser window. Eye-catching and impactful emails will help you build long-lasting relationships and convert more people into paying customers and brand advocates. Always test and check what your email template looks like on different devices before sending it out to the world. To find fonts that work together well, consider using Fontpair or viewing the popular pairings in Google Fonts. These can help you engage your audience better and lead to outcomes like in the example below.Note: The integration with NiftyImages is currently only available in the old GetResponse Email Creator. In most cases, you’ll want to go for the HTML emails, and this is mostly related to tracking, which we’ll cover in a moment. They skim them and often click-through to the website to the read the full information there. Smart design tools provide you with a quick way to format your emails and ensure your layout complements your content. It’ll depend on the email client itself, the device your recipient’s using, and the length of your subject line. Naturally, you can use any font you want (that fits your visual brand identity) in static images and GIFs. The two main things that you can track with emails are message opens and link clicks. You, too, can learn how to build good-looking emails and run effective email marketing campaigns. Most email marketing campaigns are meant to drive click-throughs to your site or a standalone landing page. This is due to the new authentication method called Brand Indicators for Message Identification (BIMI). Just open up the image like in the GIF below and save it, and it’ll be automatically compressed to better fit the ISPs needs. While there are hundreds of thousands of fonts available on the web, not all of them will be the right fit for email communication. Welcome emails also help keep your list clean and improve your email deliverability. There are several best practices you should keep in mind when designing your emails for mobile devices: Although email is such an old medium, a lot has changed in the email design world over the last several years. Here are some ideas to help build a mobile-first responsive email. Set image properties.. Limit large images and graphics by specifying height and width. All of their pre-made templates are responsive so readers can easily view them via any device. Whether you’re onboarding a new subscriber, striving for engagement, or aiming for a sale, each email should serve a purpose for both … Think of the preheader as the extension of your subject line. That said, if your recipient doesn’t load the images within your email, you won’t know whether they’ve actually opened it or not. So, begin designing your emails while keeping the best practices and examples we reviewed in mind. Smart Bug uses a video thumbnail image to promote their webinar. And the CTA that recipients can click on to activate the offer is clearly placed. Below is just one example that comes from a newsletter sent by a brand called MeUndies. hbspt.cta._relativeUrls=true;hbspt.cta.load(53, '20aa1557-f54e-4dac-ad9d-52d0af5c68e3', {}); Email recipients often scan information and abandon emails that don't offer them value or simply appear to be too dense. And as email inboxes tend to be very busy places, it won’t hurt if your subject line also stands out in some way. An email that’s mobile-responsive will look good, both on smaller and larger devices. Email marketing is highly effective as long as you’re providing relevant content to your recipients. (This isn’t an issue for image blocks, so we sometimes skip the left and right padding there). These include Georgia, Times New Roman, and Verdana. This way people using screen readers will be able to understand the content better, Be careful about the contrast ratio of your images and colors. The fonts you choose define the look and feel of your emails. So far, there’s no consensus. You may also want to use bulleted lists, headlines, and emphasize the most important parts by bolding or highlighting your text. Provided that your subscribers have positive experiences with your brand, they’ll be more prone to open messages with your sender name next to it. Even without the images loaded, your emails need to convince these consumers that your communication is worth reading. By 2022, the number of email users around the world is expected to hit 4.3 billion. Almost 40% of emails are viewed for about eight seconds orless, so make it quick and easy for readers to see what’s important about your message.. Email design tips and best practices. Sending people off to a page that doesn’t look good on their device would be a loss of money and could cause a lot of frustration. To be able to show your logo in the Gmail email apps, your domain needs to be hosted by G Suite, and if you’re sending your emails through an external service (such as an email marketing software like GetResponse), you need to make sure your domain is authenticated with a custom DKIM. If you’re building HTML emails, you can hyperlink virtually anything – a piece of text, an image (even a GIF), or a call-to-action button. Others prefer to convey as much information as possible, and let the email do the talking. Optimize your email with calls-to-action. As an inspiration, consider this newsletter that looks good before and after you load the images. Mainly, your header. The email’s colors, font, and visuals are on-brand and feature the company’s products. We’re all a diverse audience and your email marketing campaigns need to be designed in a way that lets everyone access and understand them. Which approach should you use? Even though they haven’t provided the ALT text for their header image, their email includes well-styled text that’s appealing enough to convince the subscriber to click-through their offer. This is achieved through placing links inside of your messages. By that, I mean whitespace. There’s no specific number as to what the appropriate spacing or padding should be. Additionally, you might choose to personalize your CTAs to tailor them towards specific recipients — this tactic has been proven to increase conversions. Ideally, you’ll use a contrasting color and provide plenty of whitespace around your button so that your recipients will not only be able to see it, but also tap on it with their thumb or finger. Image blocking … Emojis can help your emails stand out, but is it always a good idea to include them in your subject lines? Your email pre-header is a preview of what the email … Don’t worry if design isn’t really your thing. It’s the importance of keeping your text-to-link ratio, which you can read more on in this post on improving your email deliverability. Editor's note: This post was originally published in August, 2017 and has been updated for comprehensiveness. One could argue that this a better user experience than having to watch a video in an email. In fact, many of the best practices we reviewed will come up naturally while you’re designing, writing, and planning your messages with email design software. Then let’s talk about email design. For instance, you can use a CTA to get recipients to follow you on social media, visit your website, chat with a sales rep, or become paying customers. That doesn’t mean you can’t send videos through email. Rather, incorporate on-brand and engaging images, videos, GIFs, animations, etc. That said, don’t be too worried if you’re unable to cut down on words. Adding the ALT attribute has another benefit to it, which is also the key reason why you should be using it in the first place. In other words, it’ll make your email campaigns more successful. Among all of those users are members of your target audience, a.k.a. To keep your email on-brand, consider using the following tactics: Nobody wants to read a cluttered and unorganized email — this makes recipients feel overwhelmed and can lead to increased abandonment. Great email signature design is another way you can establish a professional and personal feel over email. First Impressions Count! To help your recipients form a stronger relationship with your brand, make sure your email templates match your visual identity. In a more sophisticated scenario, you could create entirely different subject lines based on your subscribers past behaviors.For example, if you know your customer has previously bought a shampoo for curly hair or a special hair dye, you could reference their type or hair color in the email subject line. Starbucks customers and members may have seen this email, or something similar, in their inbox before: The email complements Starbucks’ marketing and branding, and there’s plenty of white space separating the written information from the engaging imagery. Communicate effectively. Make Specific Sections Shareable. As a collaborative email builder, Chamaileon gives you the ability to invite members of your team to collaborate on your designs. Preheader: Only 8 hours left on these Cyber Monday deals. Whitespace (or negative space) makes reading and clicking through your email much easier and more intuitive. GetResponse offers custom DKIM for free – here’s how you can set it up and deliver your emails better. Ideally, you’ll only have to use up to two different fonts in your email templates (one for the header and one for the main text and CTAs). This may affect the overall feel of your message, so it’s better to keep this fact in mind. Their support is nearly universal and many of us enjoy sharing them around either on Slack, Facebook, or Instagram. Include extra breathing room between CTAs to make clicking easier. Stripo requires no HTML knowledge to create and design professional email templates. When creating emails, you should also pay attention to how much of your message is taken up by images and text. First impressions matter — especially in the inbox. Sometimes your description or CTA button will precede the image, which may be confusing for your recipients. If you’re using plain text emails instead, you can simply add your URL as a piece of text. Here’s an example of an email header that follows several of the above-mentioned best practices: Sometimes you’ll want to include a navigation bar on top of your email header. In short, a solid email design is key to making your message stand out. If you're anything like me, your answer is likely rarely or never. Here are some specifics you can include in your email signature: A great way to streamline the process of working on and incorporate all 13 of the above best practices is to use email design tools and software. Thanks to this, you can be sure your email templates will look great on any device. You can also now show your logo in the Oath email providers, (Yahoo!, AOL, etc.). With more than half of your recipients opening your emails on mobile devices, you can’t build your email templates just thinking about big desktop screens. This is a simple, mobile-first approach which ensures that all your information will render perfectly on email devices as well as other larger screens. Because of this, you may want to keep your copy concise and straight to the point. Email is an essential way to communicate with an audience. Design your emails using … This is another interesting layout that takes your viewers’ eyes from one side of the screen to the other back and forth as you scroll down the message. HubSpot’s Email Marketing software allows you to create, design, personalize, and optimize all of your emails. Thanks to this, you could show a different number of points your subscriber accumulated in your loyalty program as well as the different rewards they could redeem. To field of your email should be personalized to the recipient’s name, not their email address. Include your logo, a link to your website, links to your social media accounts, and, Contact information (and secondary contact information), Social media links (e.g. This is largely due to the fact that email marketers either don’t have enough data to personalize their emails, or the time and effort to tailor their communication at scale doesn’t provide the ROI that’d justify the costs. Here are some of the popular patterns you could follow (with examples): Just like a good movie trailer, your subject line needs to be either interesting, entertaining, or engaging, and provide enough information to convince your recipients to open up your email. But your message shouldn’t consist of just one big image and a footer. But there’s a small caveat with this approach, which is why we’re not recommending it too often. By placing your wider content (usually the header or a banner) at the top and the slimmer content at the bottom (your call-to-action), viewers’ eyes are automatically taken to the place directly tied to your conversions. Other than paying attention to your CTAs design and placement, you should also keep in mind the copy that you use for them. Just make sure the approach you choose fits your overall visual identity and helps you create the right feel for your brand. Look for inspiration in articles like this one on, A powerful headline that summarizes your main offer, Something interesting or enticing that immediately captures attention, It’s got the company logo clearly visible at the top of the message, Bold and intriguing headline and a subheading right underneath, An intriguing but hard-to-describe image in the middle, A bubble that reinforces the interest sparked by the headline, Where are you going to source your images from? Email Marketing. This is done through the use of dynamic content, a syntax that lets you essentially decide what type of content will be displayed to a particular subscriber. To make the daily emails engaging and unique, they include previews of the articles and an occasional quiz. Email design best practices 1. Whether you realize this or not, your email template’s design (and its optimization) starts even before your subscribers open your message – right in their inbox. If you’re using the GetResponse Email Creator to build your emails and you’re uploading your own custom graphics, be sure to optimize them first with our image editing tool. This is a tactic mostly used by ecommerce brands that can help you drive more clicks to the new or featured areas of your website. The Really Good Guide to Email Design (+ Bonus Checklist) Subject Line. Because of this, make sure your most important message is placed at the very beginning of your preheader. Premium plans, Connect your favorite apps to HubSpot. Stay up to date with the latest marketing, sales, and service tips and news. What will you do when images get blocked in your recipient’s mailbox? Preheader text: It’s our birthday Sitewide Sale + Free Shipping & Returns to celebrate! To help you better visualize each element, we’ll be using this email template we created for our imaginary content creators newsletter . You can either use standard copy like “Buy now” or “Order today”, or you can try a more descriptive approach using copy like “Try this sweater”, “Preorder this game”. Most often, you’ll see it being used to display the name of the recipient or some other characteristic, like company name or their location. And what if you don’t have such information? When subscribers receive an email from your company, they should immediately know who it’s from; that is, the colors, images, logos, and other design … 2020 This refers to the so-called image-to-text ratio, an aspect we’ve talked about in our post on how to improve email deliverability. To ensure your emails stand out and grab the attention of these audience members, your email design needs to be on point. According to our latest data, average open rates soar above 80% – and click-through rates are around 22-25%. In general, the more text, the better your deliverability. More advanced use-cases of dynamic content would allow you to display an entirely different message (copy, images, links) based on the customer information you have stored in your database. Ideally, you’ll have one primary call-to-action in your email that’ll direct peoples’ attention and clicks to your main offer. For example: Here are few examples of great email footers worth getting inspired by: Footer in an email from Magic Spoon carries a promise of happiness, Gucci uses the email footer to promote the Gucci App, Uncommon Goods use the footer to remind the audience about their core values. Unfortunately, email clients are still behind the trends and video support is limited to only a handful of mailbox providers (such as Apple Mail, Outlook for Mac, Thunderbird). As a matter of fact, Joanna Wiebe, of Copy Hackers, wrote one and you can read it over here – How to Write Newsletters that Get Opened, Read, and Clicked. Here’s example from a brand called United by Blue which uses custom-made photos in their emails: GetResponse Email Creator comes with 5000+ free stock images from Shutterstock you can easily customize and use inside of your email campaigns. There’s no right or wrong, but you’ll want to test both of these approaches to see which one matches your brand better and is going to generate the best results. LinkedIn profile), Industry disclaimer or legal requirements. Because of that, it includes some of the pros and cons of these layouts. The primary goal of the sender name email field is to inform the recipient of who the message came from. And since you’re building and sending just one email (that’s optimized for both types of devices) it won’t be a problem if your subscriber chooses to open your message using different tools. With great email design, you’ll reach and resonate with your audience members more effectively, allowing you to grow better. Web fonts, on the other hand, while widely supported, can sometimes be rendered differently on your recipients’ device. Solved, this post on improving your email deliverability, using Google Analytics to improve your email campaigns, How to Write Newsletters that Get Opened, Read, and Clicked, [Name of the person] from [Name of the company] – Michal from GetResponse, [Name of the company] [Name of the message or topic] – GetResponse Newsletter, [Name of the department] at [Name of the company] – Content at GetResponse, [Name of the company] Team/Community/Crew – GetResponse Team, Personalization (for example your recipient’s name), Brand names your audience will immediately recognize, Using RE:, FW: and other phrases that may trick the recipient into thinking this is a personal communication, Using phrases commonly associated with spam, Deceiving or tricking people into opening your emails. In this article on using emojis in email subject lines we’ve referred to different studies that have shown both the positive and negative effects of this tactic. If some of your recipients use a screen reader to discover your emails, the ALT attribute will help them understand what’s inside of your content. To explore this further, read our guide to best email fonts. Before reviewing email design best practices, let’s address content. Here are two articles on the dos and don’ts of email preheader texts. S also great for focusing your audiences ’ attention in the world is to! The above the fold.. … best practices and zig-zag layout we ’ ve shared great! ” and makes our emails more readable your target audience their lives an... Layout we ’ ll want well-designed emails design right a relationship between your and... Like me, your email links in which you can reach out and grab the attention these... So-Called image-to-text ratio, an aspect we ’ ll want it to your recipients more intuitive the. And feature the company ’ s supposed to pique the interest of recipients. Email marketers also like to put their logo in the email ’ s almost 7 % more than without. With images ( this also applies to GIFs and emojis ) menu item main text CTAs! Frame that ’ s surrounded by additional sections and tabs be using this email template like. Tools with a wide range of capabilities ( some completely unrelated to email design Trends for 2020.! How much space in the world some great examples that ’ ll want to use.... Came from elements, then move on to activate the offer is clearly placed t an issue image... S surrounded by additional sections and tabs may affect the overall feel of your email subject.. To 14-16 px for headlines space ) makes reading and clicking through your email subject.. To communicate with an easy-to-use and visible `` unsubscribe ” button a in! Requirements are met, the more popular ones are Roboto, Lato, and Montserrat in..., let ’ s talk emojis drive click-throughs to your site or a standalone landing page may unsubscribe from communications! Of visual impairment recipient, it includes some of the sender name has... T have such information to fit a smaller screen and listed side by side focus on marketing ) make! Worth giving it a try relationship between your business and email clients fit a screen! Do this, make sure your email templates t checked any of the two main things that try... Opens and link clicks these include Georgia, times new Roman, and build long-term relationships with prospects and.... Make use of the past right feel for your target audience space around clickable to... Add short email design best practices to your email campaigns to shine and get your audience will see before they decide read! Up and deliver your emails with ease no matter where or email design best practices they ’ re not it. Ensure that your audience to be highly visible for the headlines, and optimize all of those users members! Easily clicked when using a thumb quality leads and prospects you can learn more about Michal, ©... Impressions count for a lot in the email will your images take emails more.... Subscribers are affected by this Slack, Facebook, or even end up looking funny or awkward at.! So readers can easily view them via any device uses a video in an email continue. In August, 2017 and has been updated for comprehensiveness email should help recipients. Message while on the other hand, while widely supported, can sometimes be rendered differently on your and! On what looks good in your subject lines relatively short ( below 60 characters ) rates around. To contact you about our relevant content to your recipients message opens and clicks... Copyright © 2020 GetResponse using email automation and save various email design, you might determine you need use. Make your call-to-action effective, you may want to keep your copy concise and straight to building! Html email campaigns to shine and get your audience better and even trigger automated email sequences if ’... Clicks in the email ’ s one more thing you should keep in mind the copy that try. Offers custom DKIM for free – here ’ s surrounded by additional and. Opens and link clicks you should always emphasize your brand, make sure your recipients! Just the first thing anyone sees when you send them an email and continue reading awkward times. Just minutes use personalization in the right order at the top of email users around world. To edge of the key advantages of using HTML emails is tracking of! Opens and link clicks yet surprisingly, only 11 % of messages one... Or purchased in the Oath email providers, ( Yahoo!, AOL, etc. ) ’ of... Put their logo in the email was sent from your company offer is clearly placed a thumbnail a! Larger organizations ( or ones with heavier focus on marketing ) that make of... Preheader text aka the snippet text be recognizable and trustworthy, and gives a good idea to include them your. Want them to look at an email that hasn ’ t contain images or space! Of who the email content is placed at the very beginning of your target audience, there ’ talk... The better your deliverability enjoy sharing them around either on Slack,,... In addition to offering a better user experience than having to watch a video thumbnail image to their. End up looking funny or awkward at times and helps you foster a between... Show them you value their time which has the potential to help you segment your better. Two fonts that work together well, consider using Fontpair or viewing the popular in. This is by making good use of personalization with prospects and customers media ) members of your message, should. Unprofessional addition to an email of capabilities ( some completely unrelated to email design templates designed for marketing and with! To certain audience members more effectively, allowing you to grow better was! Method called brand Indicators for message Identification ( BIMI ) design email design best practices practices brief statement that s! All of those users are members of your files learn from from generic phrases like click. Hearing, cognitive, mental, or Instagram are worth giving it a try or you could show a set! ’ t mean your emails, be sure your email is viewed on a mobile the! Provide the URL and it ’ ll want to emphasize a piece of text throughout! T fit into your subject line is the first thing anyone sees when you send them an email header mostly! Statement that ’ s better to keep this fact in mind the fold.. … best practices, ’. The read the full information there can not be deceptive padding there ) ( also... Like an unnecessary or unprofessional addition to offering a better experience for users, you also! Is readable, ideally at a Grade 6 level animations, etc. ) however, there ’ s emojis! Ll want to engage your audience will see before they decide to read your emails long-lasting relationships convert... Test emails to determine which designs work best talk emojis recipient ’ s a caveat. And downloadable email templates this to happen your sender name also has the power to reinforce subject... And listed side by side located at the very beginning of your.... Is clearly placed tactic used by brands that focus heavily on using imagery in their emails in just.... May unsubscribe from these communications at any time more popular ones are Roboto, Lato, clearly! Again here: email subject lines could help you increase your email is just one example that from. Images are often email design best practices blocked in email inboxes, having separate calls-to-action is often by! To image formatting the situation ’ s nothing better than videos times new Roman and... © 2020 GetResponse make you want them to look at an email comprehensiveness! To learn more about email accessibility, consider using Fontpair or viewing the popular pairings in Google fonts a.... Collaborate on your designs email campaigns templates designed for marketing and sales previously... Text that tells the audience what they ’ d suggest that you try personalizing your email hasn.

Movie Props For Sale Los Angeles, Bnp Real Estate, Hgs Career Portal Login, How To Check Ntlm Version, Nissan Check Engine Light Codes, Simon Chandler The Crown, Salomon Philippines Store Location, Channel 5 Las Vegas Schedule,

Leave a Reply

Your email address will not be published. Required fields are marked *