REDESIGNING FOR MOBILE What Marketers Need to Know

Transcription

1 REDESIGNING FOR MOBILE What Marketers Need to Know Getting Ready for Canada s Anti-Spam Law 1 Redesigning for Mobile - What Marketers Need To Know 1

2 REDESIGNING FOR MOBILE What Marketers Need to Know A threshold has been crossed, and it s a significant one for marketers: more s are opened on mobile devices than on desktop computers. You read that correctly MOST s are read on mobile devices, not computers. The staggering popularity of mobile devices for viewing, and the dramatic differences in how a given might look when opened on a computer vs. on an Android phone vs. on an iphone, makes design more important to the overall success of marketing campaigns than at any point in recent memory. As marketers, we all have to understand what our messages look like, how easy they are to read, and how easy it will be for recipients using different devices to accept our calls to action, download our white papers, register for our webinars, etc. This primer provides an overview of how your messages can be optimized for mobile devices. The first part discusses a Mobile-Aware approach for organizations with basic web design resources. The second part explores Responsive Design, a more advanced approach to mobile optimization that requires more advanced skills. Desktop Webmail Mobile The percentage of s opened on a Mobile device crossed the 50% threshold in late As of August 2014, 51% of s are opened on a Mobile device. Source: Litmus Analytics (September April 2014) iphone Gmail ipad Outlook Apple Mail Android Jan Outlook.com Yahoo! Mail Windows Live! Mail AOL Mail client usage worldwide, collected from 927 million opens. Two of the top three programs are mobile-only, and the third, Gmail, is PC and Mobile. Source: Redesigning for Mobile - What Marketers Need To Know 1

3 First Step: Understand Your Audience s Mobile Usage Understanding YOUR recipients mobile behavior is a vital first step in tailoring content to optimize their mobile experiences. More precisely: Mobile will account for 15 70% of your opens, depending on your target audience, product and type. Many Service Providers (such as Real Magnet) offer behavioral tracking functionality that helps marketers better understand how their messages are being consumed. These are some of the important data points to consider: Open Percentages Mobile vs. PC Opens by Program Opens PC vs. Mobile by Day of Week Opens PC vs. Mobile by Time of Day This type of data allows you to answer important questions like how many recipients are viewing my messages on a mobile device? How many on a PC? What type of Mobile devices are they using and which are the most popular ones? How prominent are Outlook users? Non-Outlook users? Etc. Monday, Ultimate Mobile Stats (2014) With these questions answered, you can now focus on deciding how much influence mobile should have on your design strategy. 1,783 recipients opened the . 1,396 opened it on a PC and 387 opened on a mobile device. Source: Real Magnet Message Tracking. The Mobile Challenge: One Message, Many Devices Mobile design wouldn t be such a big deal but for one intractable fact: your messages render differently on different mobile devices and clients. The examples below show the same message as seen on the native clients of four different devices. Samsung Galaxy S4 Apple iphone 6 HTC - One (Windows) Blackberry Q10 So how, then, do we go about optimizing our s for Mobile? How do we improve the recipient s experience? Redesigning for Mobile - What Marketers Need To Know 2

4 Start with a Mobile-Aware Strategy Use of a few key Mobile-Aware tactics can help you design messages that will improve the experience for the vast majority of your mobile recipients. In this section, we will walk you through seven different Mobile-Aware design concepts each illustrated with examples of both the recommended design concept and the less-desirable alternative. Use a One Column Layout Use Article Excerpts Rather Than Entire Articles Use Flat (not realistic) Design Avoid the overuse of images, shadows, textures, etc. Redesigning for Mobile - What Marketers Need To Know 3

5 Use Stylized Text Rather Than Images Use Buttons for Links Provide Easily-Tappable Calls To Action Use Background Colors Rather Than Borders Provide Distinction Between Content Segments Redesigning for Mobile - What Marketers Need To Know 4

6 Use High Contrast Text and Background Colors Use Pre-header Text Many programs display a small portion of the message body in the in-box near the From Field and subject line. Use it wisely to encourage more opens. The Mobile-Aware approach can be accomplished with an internal or external team that possesses basic design skills. You have likely, however, heard of another option that many marketers are using to optimize their messages. This option, Responsive Design, expands upon the basic principles of Mobile-Aware design and requires resources that have a strong understanding of CSS and HTML code. Redesigning for Mobile - What Marketers Need To Know 5

7 Using Responsive Design The Responsive Design concept originated in 2010 and was intended for, and limited to, websites (not ). Today, it is used to make both websites and s more visually appealing on PCs, Tablets, and Mobile devices. Essentially, Responsive Design relates to the use of flexible and fluid layouts that adapt to the screen on which the content is being viewed. So if a message is opened on a PC, the content is optimized for that PC. If the same message is viewed on a mobile device, it will be optimized for mobile. The idea is one message, many renderings. What is possible with Responsive Design? Responsive Design s power is demonstrated in the examples that follow. We show you a variety of ways in which it can alter how the content of a given message is rendered. We provide examples of how the same content can appear on a large (computer) and a small (Mobile device) screen. Scale: On Mobile devices the content of the message will scale to the screen size. This means that images and text will be easily read on smaller screens without requiring the recipient to zoom or scroll horizontally. on Desktop: 650px wide on Mobile: px wide Stack: On Mobile devices multiple columns can stack one on top of another in order to provide a more streamlined, one-column view. Redesigning for Mobile - What Marketers Need To Know 6

8 Switch: In certain situations, designers can override the normal stacking pattern of left column over the right column and switch the layout to display the right column above the left. Hide: Since the mobile view provides less screenspace than the desktop view, you may want to hide certain items that don t contribute to the meaning of your message. The example below hides navigation items four and five. Expand: This is a more advanced technique (based on CSS) that requires coding knowledge. On Mobile devices lenghty text sections can be hidden behind a read more link. Redesigning for Mobile - What Marketers Need To Know 7

9 Image Swap: On Mobile devices a certain width will trigger the default image to be swapped out for a mobile-friendly image. This technique is great for increasing the readability of text in your images. Image Crop: On Mobile devices the image will be cropped in order to focus in on the main action in the image. Images can be cropped from the center (shown below), left, right, top or bottom. Responsive Design Limitations/Considerations It s important to note that at present, Responsive Design techniques are compatible with only some devices or clients. The most notable exclusions include applications like Outlook, Gmail, and Yahoo. Responsive Design also requires a careful evaluation of your content. You ll want to plan for every possible layout scenario to ensure that your content displays correctly on all devices and clients. Redesigning for Mobile - What Marketers Need To Know 8

10 Final Marketing Takeaway Acknowledging that mobile is now AS important as PCs for viewing, Matt Byrd of Litmus, in his September 2014 keynote address to the Real Magnet user conference, advocated taking an Any Inbox, Any Device marketing strategy. This means truly understanding the viewing behavior of recipients, employing better design practices like Mobile-Aware and Responsive Design, and taking fuller advantage of non-design capabilities such as the use of Pre-header Text. While some organizations may not have the resources to exploit the full capabilities of Responsive Design, you re like to have (or should acquire) design resources to execute on a Mobile-Aware approach. As competition for inbox attention intensifies and becomes fiercer, providing a positive, no-friction experience to mobile viewers is no longer an option. It s a requirement. REAL MAGNET Founded in 2000, Real Magnet is a leading Marketing and Marketing Automation service provider. Its SaaS-application fully integrates , social, and mobile messaging with marketing automation, event registration and survey capabilities all in a single, comprehensive digital marketing platform. Real Magnet is a privately held company based in Bethesda, MD with over 1000 customers worldwide, including NASDAQ, the National Association of Home Builders, Viacom (MTV/BET Networks), Accor Hotels, the American Hospital Association and ComScore. In December, Real Magnet is adding Marketing Automation to its platform. Ease of use is what distinguishes its version of Marketing Automation from others. Real Magnet has taken the common campaigns used by marketers - welcome campaigns, event promotions, renewals, etc - and created templates for them. Simply answer a few questions (e.g. Whose in the campaign? How many messages, etc.) click submit, and your campaigns are up, running, and automated! You don t have to be a Fortune 500 company to benefit from Marketing Automation. Learn more about the Real Magnet digital marketing application by calling or sales@. www. Redesigning for Mobile - What Marketers Need To Know 9