Mobile-ready what s working & what s not

Transcription

1 Mobile-ready what s working & what s not

2 What We ll Cover 1. Fresh mobile stats 2. Mobile-ready techniques: Scalable & Responsive 1. 8 real-life examples in mobile redesigns 2

3 About Matt & Yes Lifecycle Marketing 14 year veteran of marketing Founder of the longest running, dedicated design agency in the industry, since 2000 Yes Design: designers & copywriters in 4 teams Portland, Chicago, San Francisco & New York Clients: ebay, Marriot Rewards, Intel, Visa, Sees Candy and 30+ more 3

4 1 Mobile Stats from Yesmail s Compass Report Based on 5.4 Billion sent in Q across 12 verticals. Purchase behavior analysis from After-the-Click tracking (Yesmail s proprietary technology tracking -generated revenue by device). See the full report at

5 Mobile Opens Q % Mobile Opens 5.4% Increase YOY 5

6 Mobile Clicks Q % Mobile Clicks 17% Increase YOY 6

7 Mobile Revenue Q % Mobile Revenue 22% mobile revenue for retail-only clients 86% Desktop Revenue 78% retail-only clients 7

8 Click to Open Q % Mobile 18% Desktop 8

9 Average Order Value Q $ 73 $ 61 Desktop Mobile 9

10 Mobile Purchases / Conversion continued 10

11 Summary & Findings s opened on a mobile device have considerably lower click-to-open rates (7% vs 18%) Mobile conversion rate has grown by 7% - consumers are increasingly more likely to purchase on mobile While the click rate for mobile is 2.5 times lower than that for desktop, the average order value on mobile trails desktop by less than 20% 68% of all mobile orders are completed on ipad 11

12 2 Mobile Design Techniques

13 First what we mean by mobile-ready design 13

14 Scalable the pumped-up layout A layout, that when reduced to half its size (on the phone) is still 100% readable and 100% fingertip clickable. 14

15 15

16 16

17 Responsive An that is aware of the size of the screen it s opened on and uses queries to render two different layouts (PC + mobile). 17

18 18

19 19

20 Responsive Tips to Remember 1. Parent-Child Relationship: The big version makes the smaller version 2. The 3 Rs of Responsive Resize, Reformat, Remove 20

21 Mobile Design is almost Common

22 Mobile-ready s in the Inbox Big growth in mobile-ready s: Scalable, Responsive or both 5% % % 2014 * Responsive or Scalable s divided by total s from large pool of marketers in 12 verticals. 22

23 Who s sending responsive s? More responsive s than ever before However, only a few marketers have entirely responsive programs And many are still not responsive yet 23

24 Responsive vs. Non-responsive s Many marketers are missing out on the extra clicks brought in by s employing responsive design 24

25 TIP 1: Responsive = Templates Responsive coding is time intensive Testing alone can take days If you re going to invest in responsive: YES - Responsive coding for a master template, that can make ALL your s NO - responsive coding for one-off 25

26 TIP 2: Go Big with Responsive Plan and organize to convert all existing s in phases: - Day-to-day promo - Triggers - Transactional All created from one master template 26

27 TIP 3: Design into Code Once master template is created creators should be designing into code Design into Code: the act of creating an , from a master template, by choosing sections/modules that match your content. Then simply updating copy, images and URLs. The first proof is send-ready No Photoshop slicing/coding Responsive Images off optimized 27

28 TIP 4: Master Templates Ownership & Versioning Avoid: Fixing the same thing repeatedly Once the master template is completed: Clear ownership of the master should be established All should be created from it Errors should be fixed in the then in the master The master should be versioned Ex v2.4 fixed Hotmail button break It s breaking in Hotmail again 28

29 3 8 Real-life Examples of Mobile-Ready Design

30 Words vs. Pictures There seems to be a trend in performance based on the type of layout Q: Is the word-based or picture-based? Words Pictures 30

31 Word based s vs. Picture based s Services Newsletters Consulting B2B CPG Education Entertainment Financial Hospitality/Travel Insurance Pharmaceuticals Retailers Real Estate Some CPG Some Entertainment 31

32 3 Examples: Picture-based s ebay Journeys Duluth Trading Co

33 1. ebay 7 s Tested December 2012 Responsive vs. Non-responsive opens clicks purchase 33

34 2. Journeys 1 Welcome Message (sign up online & in-store) 3-week test Responsive vs. Non-responsive opens clicks purchase 34

35 3. Duluth Trading Co. Master template system Responsive vs. Non-responsive opens clicks purchase 35

36 So you redesigned and metrics unchanged Mobile-ready s are a huge improvement in company perception Way better for Android users Android in box doesn t scale down is then cropped and requires side scrolling Responsive is the key to good Android rendering 36

37 5 Examples: Word-Based s VSP Charbroil Intel Dominos Visa

38 1. VSP Vision Care Responsive vs. Non-responsive opens clicks purchase 38

39 2. Charbroil Newsletter Scalable only not responsive opens clicks purchase 39

40 3. Intel Responsive Newsletter Responsive vs. Non-responsive test opens clicks purchase 40

41 4. Dominos Responsive postcard Responsive vs. Non-responsive test opens clicks purchase 41

42 5. Visa VIP Welcome Series Redesigned to be responsive The click-through rate was between 4-10 times average opens clicks purchase 42

43 Summary: Picture-heavy responsive layouts: May not always improve response all the time But are immeasurably better with user presentation, usability & company perception Word-based responsive layouts: Show significant promise with mobile openers 43

44 4 What s Working? What s Not?

45 WORKING: Responsive s: tend improve engagement and conversion Bonus: Responsive s with good content Master Template: key to making entire programs mobile-ready Design into code make s from responsive master template Pure hybrid layouts all copy and buttons are pure HTML Bulletproof buttons Web fonts (mostly) HTML navigation Images off views in the design phase Responsive REMOVE & simplifying objects to make for mobile version (preheader, logo, navs) Gifs, Testimonials, Maps 45

46 NOT WORKING: One-off responsive campaigns: Too labor-intensive for just one , complicated coding Instead, create a responsive master template Multiple templates, instead ONE master Gmail does not render responsive (media queries) Copy as an image Designing s in Photoshop 46

47 Summary: Chapter One Mobile Metrics Mobile opens high 50% Mobile clicks decent 37% Mobile conversion needs to improve, and is 17% Mobile click-to-open rates much lower than desktop 7% vs. 18% 68% of all mobile orders are completed on ipad Chapter 2 Mobile Techniques 2 techniques for mobile Scalable & Responsive One Master Template is key responsive Chapter 3 Examples Picture-heavy responsive layouts: May not always improve response all the time But are immeasurably better with user presentation, android & company perception Word-based responsive layouts: Show significant promise with mobile openers 47

48 Thanks More resources at Matthew Caldwell VP Creative & Agency