Anatomy of the Perfect Design

Transcription

1 Anatomy of the Perfect Design Distractions, smartphones, and the mobile market are changing how and when we view our s. How we design them has to change. Marketing Guide September 2013

2 2 There are basic elements that each design should have in order to convey your message properly to your audience and bring about the desired response and results for your campaigns. Each component is part of the overall influence that design has over your open, click-through, and conversion rates. These elements make up the structure, the very anatomy of the perfect design. Do you Know Where your s are Opened? There was a time when you could almost guarantee that your s would either be opened at work or at home on a desktop computer. But today over 50% of the U.S. population owns a smartphone, and tablet penetration is growing rapidly. This means your s could be opened from practically anywhere and from a much wider range of devices. can be opened in a wide variety of environments across the three broad categories of Webmail, desktop, and mobile devices, with mobile devices becoming one of the most popular places for checking over the last few years. According to Litmus, 44% of the opens it recorded in July of this year came from mobile devices; and Google s Our Mobile Planet notes that smartphones are commonly used in a wide variety of locations including on-the-go, at work, in restaurants and cafes, and at social gatherings. 95.7% 83.8% 82.9% 82.1% Home On-the-go In a store Restaurant 71.3% 70.2% 63.7% 61.2% Work At a social gathering/ function/event Doctor s office Cafe or coffee shop 55.5% 44.9% 39.1% 4.6% Airport Public transport School Somewhere else

3 3 While mobile trends are a significant influence on design, marketers must also consider all of the other clients out there that subscribers are using. Subscribers are still reading s in Outlook, Yahoo, Gmail, and Apple Mail. s still need to look great in those clients for campaigns to be successful. In fact, looking at overall client market share, Outlook is still a hugely popular client, with 18% of all opens recorded by Litmus. Although no single Webmail client has a huge percentage of the market share, if you add them together, they do make up a significant portion of opens, and they also have their own design and coding challenges which need to be addressed. The Breaking your overall design into manageable parts helps to maintain a consistent plan for your campaigns and sets the stage for what your readers will come to expect from your communications. Here are the overall elements that make up the anatomy of the perfect design. Header Pre-header Navigation Primary message Secondary message Footer

4 4 Pre-Header A pre-header, as the name suggests, is simply an area at the very top of your , just above the header where you can insert text and links. The pre-header is important because the first piece of text within the pre-header actually shows up next to your subject line in many clients such as Outlook, Gmail, and other mobile clients. This basically acts as an extension to your subject line and has been proven to play a big part in helping subscribers determine if they want to open your or not. Unfortunately most marketers still haven t optimized this section and so the most common pre-header text is still click here to view online or Please add us to your address book to ensure you receive our s. Such links shouldn t be removed entirely. They should just be arranged so that the first line contains a message related to the content of the . It s good practice to think of your pre-header text as an extension of your subject line, and to be creative and not just repeat your subject line.

5 5 Key points to remember for your pre-header: The Pre-header text is an extension of your subject line. The first line of text in your pre-header should be a marketing message which outlines the content of your . Don t delete your view online link place it next to or underneath your marketing message. Be creative don t repeat your subject line. Header The header usually consists of your logo, navigation, forward to a friend, social media icons, phone numbers, and any other relevant or useful information for subscribers. The header is one of the first things that subscribers see when they open an . It s where people look if they want to click through to a specific section of your website or find contact details. For that reason it tends to be one of the most clicked-on areas of an . It s also somewhere that people tend to click if they don t see anything in the primary content area that they re interested in. A recommended design tip for headers is to keep them consistent with your website header. This not only makes your instantly recognizable but also makes you look more trustworthy. If your branding is off then it s possible that your subscribers could mistake you for a spammer.

6 6 When it comes to optimizing your header for mobile, it s better to simplify rather than trying to squeeze everything in, since space on mobile devices is a very precious commodity. By using a responsive design to hide your navigation and other links, you allow the subscriber to focus on your primary message. Since mobile users are often multitasking while they use their device, the less distractions you have, the better. This is a great example from John Lewis of how to optimize an header for mobile and probably an ideal solution for most companies. It used a responsive design to hide everything within the header apart from the logo and the first four navigation links. It s a simple solution and doesn t detract from the primary message, but still gives subscribers a few other opportunities to click through. Key points to remember for your header: Make sure that it contains a logo, navigation, social media links, and any other information, such as phone numbers, that might be useful for your subscribers. Keep the branding consistent with your website as this will help make your look more trustworthy and instantly recognizable. Use responsive design to simplify it for mobile users. Primary Message If you had the choice of showing your subscribers only one section of your , the primary message would be it. The reason that you are sending an , whether it s selling something, promoting a new service, or encouraging people to sign up for an event, should be very clearly shown within this section. Ideally it should just be one message; don t dilute your by trying to add as many messages as possible. You should also keep your primary message fairly concise. One or two paragraphs maximum is a recommended length. A few years ago it was quite common to see extensively long, copy-heavy s, but in reality people don t spend long enough on an to read that much text.

7 7 SC Johnson s Right@Home newsletter is a great example of a best practice primary message. It contains all of the key elements that should be included: a large bold title, one paragraph of text, a nice image, and clear call-to-action. Image Title Short decription Clear call-to-action Key points to remember for your primary message: Limit this section to the one main message that you want to get across to your subscribers. Don t go overboard and write a novel; your subscribers should be able to read your primary message in less than 10 seconds. Make sure it contains a large title, one paragraph of text, a clear call-to-action, and an image. Secondary Message Secondary messages usually sit underneath or on the right-hand-side of your primary message. There are often multiple secondary messages, and they usually contain less content than the primary message. Even with pinpointed, targeted segmentation you re probably never going to be able to please everyone with your primary message, and secondary messages give you another opportunity to add some value through additional content or products that your subscribers might also be interested in. Again, like the primary content, your secondary content should also contain a large title, a short description, a call-to-action, and an image. Many brands try to overload their s with as many secondary messages as possible, and then end up with a huge that actually deters many subscribers and dilutes the primary message. Research shows that having too many choices leads people to stall and avoid choosing altogether. The same thing applies to s. It s better to include three strong messages rather than everything from your website and blog. Plus, most subscribers are going to spend less than 10 seconds reading an . It s always a good idea to scan your to see if you are able to pick out all of the key points in under 10 seconds. If not, then you might want to think about cutting some of your secondary messages.

8 8 Key points to remember for secondary messages: Give subscribers additional stories or products to click through to in case they aren t interested in your primary message. Secondary messages should contain a title, one paragraph of text, a call-to-action, and an image. Don t overwhelm your subscribers with too many secondary messages. Call-to-Action The call-to-action simply tells your subscribers what you want them to do, whether that s to buy your latest product, sign up for an event, Like you on Facebook, or download a whitepaper. Every you send should have a very clear and well defined call-to-action. Unfortunately, you often still see Click here as a call-to-action. Obviously, this is better than not having a call-toaction, but you should really try to be more creative. Click here just isn t very compelling and doesn t really describe what you want your subscriber to ultimately do. In the example above, See s Candies uses great call-to-action phrases such as Shop Lollipops and More and Enter the Sweeps to entice its readers to click for a specific reason, and find out more information. Using large HTML buttons is becoming more prevalent, and they are also easy to click on mobile devices and can still be seen when images are blocked. Key points to remember for calls-to-action: Each primary and secondary message within your should have a clear call-to-action. Calls-to-action that are more descriptive are more effective than generic terms such as Click here. Ideally your calls-to-action should be coded in HTML and large enough to easily click on when using a mobile device.

9 9 Footer The footer is the last section of your , and it usually contains your address, phone numbers, useful links, privacy policy, and social media icons. The footer is actually an extremely important and highly-underrated part of an . Most brands don t really give it much care or attention but if it s done correctly it can significantly increase your click-through rate. If the footer contains several interesting or useful links, companies will see improved response rates. If subscribers don t see anything that interests them within the primary or secondary content sections of an , they still might want to click through to a specific section of your website or social media pages, all located within the footer. Unfortunately, the footer often serves as a hiding place for unsubscribe links within the Terms and Conditions content of an . If a subscriber doesn t want to receive your s anymore, hiding the unsubscribe link isn t going to keep them on your list; if anything, it s going to encourage them to mark your as spam, which will hurt your sending reputation. Key points to remember for your footer design: Make sure you include useful information such as addresses, phone numbers, and links back to your website. If you get it right, you can increase your click-through rate by 5-10%. Simplify your design for this section for mobile users. Don t hide your unsubscribe links.

10 10 A Word about Image Blocking According to Litmus, 67% of major desktop clients, 100% of Webmail clients, and 80% of mobile devices don t display images by default. Why? Image blocking is used by clients to combat spam s, which mainly consist of images. The idea is that if images aren t enabled by default, it will discourage spammers because it reduces the chances of their s being seen. Unfortunately, a large number of legitimate senders also like to send s with lots of images, which requires more creative approaches to getting around this issue. One way to make s stand out with images turned off is by adding colorful backgrounds to your tables and ensuring that every image has some alternative text which tells the subscriber what they would see if the images were turned on, as in this example from Urban Outfitters. Create your den Alternative text Another solution is to code your s with a good text-to-image ratio, so that most of the main messages and calls-to-action are easy to read with images turned off. Additional benefit of doing this is that it improves your deliverability. As mentioned previously, spammers tend to send image-only s, so having a good amount of HTML text within your tells Internet Service Providers that you aren t a spammer. Some brands have gone to extreme lengths to make their s stand out with images turned off. This from Playstation which shows the transformers logo with images disabled is so cleverly done that it actually went viral on Reddit. The looks so interesting with images turned off that it likely achieved a high open rate. However, it takes a substantial amount of time to code an like this, so it s not something you would do for every campaign.

11 11 Here s another great example from Lego: Another option to beat image blocking is to use a tool which converts images into HTML tables. As you can see in this example, the Samsung and social media icons are still visible with images blocked. still visible with images blocked So why not convert every image in an into HTML with one of these tools? There are a few caveats: for example, converting an image into HTML will really increase the weight of an and can make it slower to download. So, it s best to stick to small brand logos and social media icons when using these tools. Key points to remember about image blocking: It really is worth putting time and effort into optimizing your campaigns for image-blocking when you consider how many clients block images by default. Whether your s are image-only or a mixture of images and text, there are many ways that you can optimize your campaigns. Ideally though, you should have a high text-to-image ratio to improve deliverability.

12 12 Optimal Measurements measurements vary widely in terms of width. You have likely received s from 320 pixels the width of an iphone to horizontal s which can be as wide as 2000 pixels, like this example from Crate & Barrel pixels Because there is such a variety of screen sizes and environments in which subscribers will read your , pixels is still considered to be the ideal width. Generally speaking, an which is between these widths will render well and be easy to read in most of them. Since the number of mobile users is only increasing, you should lean towards a skinnier width or try using a responsive design which adjusts the width of your when it s viewed on a mobile device. This will ensure that your messages are easy to read. Steps for Optimizing Design Objectively look at each section of your separately and assess where improvements could be made. For example, does your pre-header contain some useful text promoting the content of the , or does it just say Click here to view online? Does your header have a navigation and social media icons, is the call-to-action in the primary content section easy to read and click on, and most importantly, does it encourage subscribers to take action? It s also worth analyzing click maps to see where people are currently clicking on your . You should be able to identify the most clicked regions of your and areas where there is room for improvement. Most brands could probably increase their click-through rate by 5-10% by adding a cluster of useful links to the footer of their s. Heat map tools such as Eye Quant will also give you a good indication of the areas of your s which stand out the most. Ideally, you want the main call-to-action within the primary content to be the area which stands out the most. You should also use a tool like Litmus to track your subscribers and find out what devices they are actually using to read your s. You can then customize your template for those particular devices and clients.

13 13 Thoroughly testing any changes you make, in as many different clients as possible, will help you identify issues before the s reach your subscribers. Unfortunately, clients tend to render s differently so your could look great in one client and terrible in another. Testing your on a real mobile device is incredibly important to ensure it s easy to read, navigate, and click through on. This will give you a much better feel for how truly mobile-optimized it is, rather than relying on a preview tool. And finally, always make sure that you thoroughly test any changes that you make before you roll them out to your entire database. This tends to be something that many marketers forget about until the last minute, but it should be a key element of your optimization plan. To make testing seem less daunting, create mini testing plans for each section of your . Examples would be: a plan for the pre-header, another plan for the header, and so on. Then, all that s left to do is record the results and make incremental improvements. Before you know it, you ll have a best practice template which gets you much higher open, click-through, and conversion rates. Conclusion How and when subscribers view has become less and less predictable, and marketers are challenged to adapt to this ever-changing environment with design best practices that help you stay a step ahead of the expectations of your tech-savvy audiences. The rewards of doing so are significant: optimal engagement with subscribers that brings about the desired response and revenue from your campaigns. Keep these key actions in mind as you work to improve and maintain your performance: Assess each section of your current template individually how could each be improved? Analyze click and heat maps to determine where your subscribers are currently clicking. Find out what clients your subscribers are using optimize with the top clients in mind. Actually try interacting with your s on a mobile device how easy is it to navigate, read, and click? A/B split test your improvements until you re sure what works best, then roll them out to your entire database.

14 Contact North America United States Corporate HQ 6401 Hollis Street, Suite 125 Emeryville CA USA Toll-free Intl Fax Europe EMEA United Kingdom 1 Vincent Square Victoria, London SW1P 2PN Main France Sales Support Latin America Argentina Luis Maria Campos rd floor (C1426BOI) Ciudad de Buenos Aires Main +54 (11) Brazil +55 (11) Mexico +52 (55) Asia Pacific Australia Citigroup Centre, 2 Park Street, 39th Floor Sydney, NSW 2000, Australia Phone Support About Lyris, Inc. Lyris is a leading global provider of digital marketing solutions that help companies engage with customers in more meaningful ways. Lyris products and services empower marketers to design, automate, and optimize data- driven interactive marketing campaigns that facilitate superior engagement, increase conversions, and deliver measurable business value. Lyris high-performance, secure, and flexible digital marketing platforms improve marketing efficiency by providing automated digital message delivery, robust segmentation, and real-time digital channel analytics. The Lyris solutions portfolio is comprised of both in-the-cloud and on-premises offerings Lyris HQ and Lyris LM combined with customer-focused services and support. More than 5,000 companies worldwide partner with Lyris to manage and execute sophisticated digital marketing campaigns across , social, Web, and mobile channels. Learn more at Copyright 2013 Lyris, Inc. All rights reserved. lyris.com