VUTURE GUIDE Email design and creative www.vutu.re/explore explore@vutu.re London +44 20 7928 6250 New York +1 646 569 9079 Sydney +61 (0) 2 82160767
Table of contents DESIGNING FOR EMAIL 3 STRATEGY 4 Objectives 4 Audience 4 Types of emails 4 STRUCTURE 5 Header or intro 5 Web version 5 Pre-header 5 Safe sender 5 Logo 6 Headline/hero banner 6 Social media 6 Salutation 6 Menu 7 Primary call to action 8 Footer 8 Lead copy 8 Body 8 Event invitations 9 Surveys 11 Publications or thought-leadership content 11 Mobile responsive 12 Content 13 Images 14 Master and sub-templates 14 BEST-PRACTICE SUMMARY 14 WWW.VUTU.RE PAGE 2
Designing for email So, you ve come to the point where you need to provide us with an email design for us to code? Clients often ask us for advice at this stage. There are so many different things to consider when you design for email. We ve created this guide to help you consider everything you need to create an amazing and effective email design. This guide includes best practices and examples of the recommendations that we make. WWW.VUTU.RE PAGE 3
Strategy The first thing to consider is the overall strategy for your email programme. What is it that you are trying to achieve? What is the goal for each stream of your email programme? Why are you sending emails? What are your desired outcomes with Vuture? These questions are important because your goals will determine the elements you should be including in your design and creative. Objectives Provide information Build relationships Drive hard sales Improve efficiency Increase client engagement Audience Existing clients New, prospective clients Internal employees Suppliers and partners Types of emails Event invitations Publications, thought-leadership content Surveys Newsletters Other WWW.VUTU.RE PAGE 4
Structure Header or intro The intro and header are critical to the success of your emails. A recent study says that you have eight seconds to catch a recipient s attention. So, it is of the utmost importance that this section of your emails is optimised and effective for keeping the reader s attention. Web version Adding a link to a web version is less important than it was a few years ago. Many companies are choosing not to include this in their emails. Many businesses haven t quite caught up with consumer technology so it s still worth including a link to a web version. Keep the copy simple such as: View online, or: View web version. Pre-header The pre-header is the area before the main content of your email. It includes the web version and safe sender along with additional real estate to extend the impact of your subject line. With many email clients now displaying the first line of the email as a preview you can add more impact. The image below shows the pre-header on a mobile device. Safe sender This is a simple-text prompt to your recipients. In this text you should encourage them to add your email address to their safe sender or address book. This means that your emails will be delivered to their inbox every time and with images switched off. This is called user-level whitelisting. WWW.VUTU.RE PAGE 5
Logo Including your logo as part of your intro is important as it can help your recipients identify who the email is coming from. Email real estate is really important so don t make your logo too large. Where you position your logo is very much up to you and is based on your brand guidelines. Headline/hero banner Since images are often turned off by default, ensure that your headline is written through, so your recipients can see the content of your email. Using a hero image or banner at the top of your email is a great way of engaging your recipients. These are the first visual element your recipients see and could impact whether they continue readying your email beyond the eight seconds or not. The photography and impact of this image is important. Social media If your organisation uses social media you should include links to your social media pages. Salutation Consider where your salutation is positioned within the email itself. Think about your audience and whether they will be expecting you to greet them with their first name or surname. WWW.VUTU.RE PAGE 6
Menu Menus can be a really useful navigation tool for your recipients. Many people use emails as a means of simply navigating to a company s site. Think about the most important pages your recipients may want to visit if you choose to include a menu. Menus are not always appropriate, particularly when thinking about mobile responsive versions. You should consider hiding your menu on a mobile version or reducing the number of menu items. Web Mobile Web Mobile Web Mobile WWW.VUTU.RE PAGE 7
Primary call to action The call to action comes back to the strategy and intentions of your email. The call to action should be above the fold and clearly state the action that the recipient should take. It should back up the objective and measure of success for that particular campaign. Footer The footer of an email is often overlooked and usually a hodgepodge of disclaimers and fairly boring text. When optimised, the footer can support your campaign. Make sure you include statements about how your recipients can unsubscribe or change their preferences to remain compliant with regulations such as the GDPR and PECR. Tell them why you have sent them this email. Particularly with the changes in the law it can be beneficial to explain how you got their details and why you have a legal reason to contact them. Include a link to your privacy policy along with your company contact details Lead copy The copy you include in your email is very important. Gone are the days where you can include reams of information within a single email. Microcopy is one of the biggest changes in the industry. Less can be more when it comes to email, particularly when thinking about how your recipients engage on mobile devices. Body The main body of your email has to be engaging. Think about how many articles or sections you want to include. Keep your emails relatively short so that your recipients don t need to scroll too much. Shorter is better. Consider how the calls-to-action for each article will appear. WWW.VUTU.RE PAGE 8
Event invitations When thinking about the structure of your event invitations the ultimate goal for any event is to bring in attendees. Driving desire and making it easy to RSVP should form a really important part of the email content. Make sure that you include a compelling reason for them to RSVP, provide details of the event and a map to where it will be held. Make it really easy for them to RSVP. Don t forget to consider the landing pages of your events and your RSVP forms. Make sure that they match the branding and design of your emails. WWW.VUTU.RE PAGE 9
WWW.VUTU.RE PAGE 10
Surveys If you are sending an email with a survey particularly one that might be a long survey you want to make sure that you give your recipients a really compelling reason why they should complete the survey. Consider including an incentive and give them a detailed explanation. Don t forget to include how long it will take. Publications or thoughtleadership content Often these emails promote a single piece of content or thought leadership. Your goal with this type of email is to encourage your recipients to click through, download and ultimately read this content. You want to ensure that you have a clear call to action. To do this, ensure that your subject line and copy is engaging and interesting to encourage action. WWW.VUTU.RE PAGE 11
Mobile responsive When thinking about your email design, make sure you consider how your recipients engage with it on their phones. Mobile screens are much smaller than desktop and being able to scroll easily is crucial to engagement. Complex email designs don t render as effectively on a mobile device. Your email will render slightly differently on each device across technologies. Responsive design allows some level of control so that your email looks great regardless of the device. Not all mobile devices or apps render the media queries or code that allows for this responsiveness. Below is a guide for your reference: Mobile Webmail Desktop Android 4.4 AOL Mail Apple Mail 10 Gmail app (Android) Gmail Outlook 2000-03 Gmail app IMAP G Suite Outlook 2007-16 (Android) ios GMX.de Outlook for Mac Inbox by Gmail Inbox by Gmail Thunderbird (Android) Inbox by Gmail (ios) Libero Windows 10 Mail Outlook (Android) Office 365 Outlook (ios) Orange.fr Samsung Mail Outlook.com (Android) Yahoo! Mail app Gmail (Android) Yahoo! Mail app (ios) SFR.fr T-online.de Web.de Yahoo! Mail *Accurate as of 13/09/2018 WWW.VUTU.RE PAGE 12
Columns typically stack with the leftmost column at the top and then each subsequent column stacking underneath the one before. Including more than a two-column snippet may cause your email to be very long on a mobile device. We suggest that you only use one or two-column snippets. We recommend your body text fonts be no smaller than 12 pt. Aim to keep your overall text to a minimum. Not all devices have every font so keep to the web-friendly fonts. We recommend not using side bars/columns in your design. They don t stack effectively on a mobile device and are no longer best practice for email. Menus can be a useful navigation tool on a desktop. On a mobile you could be taking up precious space. We suggest cutting down the number of menu items or removing the menu altogether when viewing the email on a mobile. We don t suggest stacking your menu items. To keep the overall length of the email down, think about parts of your email you could hide without affecting the overall objective. You could consider hiding some images, some articles and some of the additional extras in your email. Make sure that these links are big enough for someone to click on and that there aren t too many links, too close together. Target areas are an effective way of thinking about this when it comes to mobile devices We recommend these touch areas to be at least 46x46 px in size. Content Email copy should be succinct and simple. It is best practice to keep your emails short and then link through to where your recipients can read more. People tend to scan emails and don t read every word of your emails. Make sure that your emails are easy to scan through. Use a maximum of one or two sentences in body copy. WWW.VUTU.RE PAGE 13
The way your recipients use their mobile device, they don t click they press using their finger or thumb. The words click here as a call to action may not be applicable. Consider using different language in your calls-to-action. It s very common now for companies to use microcopy in their emails. This is short and succinct copy designed to guide people through the content more efficiently. Images The images and colour used in your email are crucial to its effectiveness. Make sure that your imagery is interesting and engaging. Don t use images that are too small and make sure they are good quality. Master and subtemplates The master templates contain all of your snippets from which you can build any type of email campaign. We ve provided an example below of the snippets you should consider when you design your templates. Best-practice summary This area summarises the main points from this document and serve as a reminder of what to include and what not to include: Include plenty of white space in your email Keep your copy short and succinct across all parts of your email Keep edges straight and at 90 degrees Call to action buttons should stand out from the rest of your email Your primary call to action should be above the fold Text should be no smaller than 12 pt Use web-safe fonts Template width 600 to 700 px wide Eager to learn how to build trust and relationships with email? Watch the webinar www.vutu.re explore@vutu.re London +44 20 7928 6250 New York +1 646 569 9079 Sydney +61 (0) 2 82160767 WWW.VUTU.RE PAGE 14