design and creative

Transcription

1 VUTURE GUIDE design and creative London New York Sydney +61 (0)

2 Table of contents DESIGNING FOR 3 STRATEGY 4 Objectives 4 Audience 4 Types of s 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 PAGE 2

3 Designing for So, you ve come to the point where you need to provide us with an 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 . We ve created this guide to help you consider everything you need to create an amazing and effective design. This guide includes best practices and examples of the recommendations that we make. PAGE 3

4 Strategy The first thing to consider is the overall strategy for your programme. What is it that you are trying to achieve? What is the goal for each stream of your programme? Why are you sending s? 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 s Event invitations Publications, thought-leadership content Surveys Newsletters Other PAGE 4

5 Structure Header or intro The intro and header are critical to the success of your s. 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 s 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 s. 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 . It includes the web version and safe sender along with additional real estate to extend the impact of your subject line. With many clients now displaying the first line of the 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 address to their safe sender or address book. This means that your s will be delivered to their inbox every time and with images switched off. This is called user-level whitelisting. PAGE 5

6 Logo Including your logo as part of your intro is important as it can help your recipients identify who the is coming from. 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 . Using a hero image or banner at the top of your 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 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 itself. Think about your audience and whether they will be expecting you to greet them with their first name or surname. PAGE 6

7 Menu Menus can be a really useful navigation tool for your recipients. Many people use s 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 PAGE 7

8 Primary call to action The call to action comes back to the strategy and intentions of your . 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 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 . 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 is very important. Gone are the days where you can include reams of information within a single . Microcopy is one of the biggest changes in the industry. Less can be more when it comes to , particularly when thinking about how your recipients engage on mobile devices. Body The main body of your has to be engaging. Think about how many articles or sections you want to include. Keep your s 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. PAGE 8

9 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 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 s. PAGE 9

10 PAGE 10

11 Surveys If you are sending an 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 s promote a single piece of content or thought leadership. Your goal with this type of 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. PAGE 11

12 Mobile responsive When thinking about your 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 designs don t render as effectively on a mobile device. Your will render slightly differently on each device across technologies. Responsive design allows some level of control so that your 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 Gmail app IMAP G Suite Outlook (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/ PAGE 12

13 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 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 . 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 on a mobile. We don t suggest stacking your menu items. To keep the overall length of the down, think about parts of your you could hide without affecting the overall objective. You could consider hiding some images, some articles and some of the additional extras in your . 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 copy should be succinct and simple. It is best practice to keep your s short and then link through to where your recipients can read more. People tend to scan s and don t read every word of your s. Make sure that your s are easy to scan through. Use a maximum of one or two sentences in body copy. PAGE 13

14 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 s. This is short and succinct copy designed to guide people through the content more efficiently. Images The images and colour used in your 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 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 Keep your copy short and succinct across all parts of your Keep edges straight and at 90 degrees Call to action buttons should stand out from the rest of your 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 ? Watch the webinar explore@vutu.re London New York Sydney +61 (0) PAGE 14