A marketer s guide to Responsive Web Design. Patrick Collins President, 5th Finger, a Merkle Company

Transcription

1 A marketer s guide to Responsive Web Design Patrick Collins President, 5th Finger, a Merkle Company

2 Agenda Who is Merkle Mobile and 5th Finger? Some trends we re seeing with the mobile web A primer on Responsive Web Design. Pros and Cons A new approach: Transformative Responsive Web Design (don t rebuild your site!) Some Results 2

3 Merkle Mobile Group Mobile User Experience Development Team (50 staff) iphone / Android App Platform Responsive Web Design Mobile SEO services Mobile Analytics Mobile Contact Strategy Team (8 staff) Contact Strategy Development SMS database development SMS campaign effectiveness and MMA compliance Mobile Optimization Push Notification Contact Strategy and Execution Digital Media Team (16 staff) Mobile Advertising Mobile Paid Search Mobile Display Optimization Mobile Search Geolocation 3

4 Some of our most innovative work Strategic engagement Services Convenient customer access to coupons and deals across app and mobile App Development, Mobile Site, AB testing and analytics Acquisition based alert program mobile site, mobile app with over a 1,000,000 opt-ins Platform Services Retainer - Text Messaging, Mobile Internet, App, mcoupons, Scannable Codes Build a tablet site for llbean.com 5th Finger Responsive deployed to adapt their existing website. Comprehensive Mobile Marketing Contact Strategy. For Disney we provided a comprehensive marketing plan for their mobile marketing strategy including audience segmentation and SMS database marketing strategies. Review Wells Fargo s Mobile Analytics capabilities for best practice After 14 stakeholder interviews a mobile best practices gap assessment led to recommendations of a new analytics platform. 4

5 30,000 foot view The Mobile and Tablet Web Phenomenon

6 Mobile Traffic as a % of Global Internet Traffic 6 Source: StatCounter Global Stats, 5/13

7 Mobile and tablet must be your first priority! 7

8 Most Brands reaction to tablet traffic on their sites

9 ipods changed the media industry iphones ramped even faster ipad growth (3x iphone) Leaves Siblings in Dust 9

10 Android Phone Adoption Has Ramped even faster 4x iphone 10

11 Despite Tremendous Ramp So Far, Smartphone User Adoption Has Huge Upside 11

12 But now, is the best time to act! Responsive Design is here. According to Ethan Marcotte, Responsive Web Design is: A flexible grid (with flexible images) that incorporates media queries to create a responsive, adaptive layout.

13 Why It s A Game Changer REASON 1 For the first time, Responsive is enabling the practical realization of omni-channel marketing and e- commerce. Prior solutions were not maintainable. REASON 2 Responsive unifies silo ed teams (mobile vs desktop) and helps foster a more customer centric view of your web channels. REASON 3 Resources and budget are constant hurdles faced by marketers and responsive is in a position to ease the pain.

14 Video of Responsive Design Examples Let's take a little closer look as to what makes these sites successful responsive design executions. HM Insurance You'll notice as the screen gets smaller a few things change. For a start, the menu collapses under a recognizable little affordance button which expands down. A common tool being used by everyone from Facebook to Disney. Additionally, The image choices on the homepage carousel get neatly cropped in on for mobile without looking odd. Nice choice of images, and no need to use separate images. First Merit Bank Again as we cross the breakpoint here between PC and tablet you see the whole navigation structure change <resize quickly back and forward between the PC/tablet breakpoint a few times> As the move down to mobile you'll notice that the navigation focusses on content useful for customers on the go. Locations, Customer Service and Login. (again toggle quickly between tablet and PC) You'll also notice that the quotes and columns from their desktop site become one rotating image on mobile. They are using all their assets, but in a smart mobile friendly approach. Capital One (Show skimming through tablet site in background) Other major Financial companies like Capital One are investing in responsive to address their tablet customers. While they currently retain their m.capitalone.com for mobile customers, you can bet they will be working on transitioning them to their responsive site in the near future. Disney Disney's responsive site launched recently and was lauded as an example of Web simplicity and perfection with it's clever use of Responsive Desgin. Disney is a brand with an immense amount of brands under its umbrella, so responsive is a natural draw to try and combat deep-linking issues when linking from s, Facebook and other sources. While the company is still undergoing what is surely a multi-year project to make its entire site responsive, it has already done a great job of addressing a number of disney.com pages. The site s UI elements are stripped free of ornament and embellishments, putting the focus squarely on the content. Videos and games are the star of the Disney show. You can easily swipe through the content <show the neat carousel through the characters> For the Disney team, maintenance costs and time spent managing different sites have significantly improved. Microsoft The responsive microsoft site has a mobile first design approach. Simple text and imagery has carries across mobile, tablet and desktop. You will notice that the desktop version has a mobile feel with their style of drop-downs and clear columns. An approach that saved them iterations. A hero imagery easily crops and scales was chosen to minimize time investment All of these examples are traditional responsive web design, now lets look at something a little more transformative for sites who were not ready to rebuild from scratch.. 14

15 The Traditional Approach to Mobile Web ( ) m.safeway.com

16 Poll Question: Do you have an existing m.site?

17 Mobile Web Design Options Comparison Separate Mobile Site Traditional Responsive Design Device Optimized Device specific touch events and features Ease of Maintenance Easy to update and maintain means lower costs Single URL allows Deep Linking Links from & Social work on all devices No website rebuild Quick to launch No Site rebuild required Maximized SEO 20% Increased organic traffic

18 If only we could get the benefits of Responsive Web Design without rebuilding the website

19 Transformative Responsive Web Design what is it? Transformative Responsive Web Design - allows the code of an existing site to be morphed into a flexible multi-device Responsive solution.

20 Transformative Responsive Web Design what is it? Transformative Responsive Web Design - allows the code of an existing site to be morphed into a flexible multi-device Responsive solution.

21 Transformative Responsive Web Design Transformative Web Design takes the best features of Responsive Web Design Adaptive Web Design (also known as Progressive Enhancement) and Modern HTML to manipulate pages RWD + + Modern HTML It allows the code of an existing site to be morphed into a flexible multi-device Responsive solution.

22 Video of LL bean, NARS, 1800 (2 minutes) 22

23 5th Finger Responsive Technology On Any Existing ecommerce Platform Step 2 5thFinger.js tags are added into the existing website s HTML code. Step 1 Define layout flows for device breakpoint (typically 3 or 4). 5thFinger.js Step 3 When the site is loaded, 5thFinger.js re-flows pages dynamically, hiding or expanding any content.

24 Mobile Web Design Benefits 5th Finger Responsive Web Platform Device Optimized Device specific touch events and features Separate Mobile Site Traditional Responsive Design 5 th Finger Responsive Ease of Maintenance Easy to update and maintain means lower costs Single URL allows Deep Linking Links from & Social work on all devices No website rebuild Quick to launch No Site rebuild required Maximized SEO 20% Increased organic traffic

25 Which one is right for me? m.site Quick to market A blank canvas to start from The cost to develop is reasonable Traditional Responsive Consistent branding and messaging across all channels Supports all devices, from the smallest mobile to a large plasma TV It's ready to support any newly released devices in the future Transformative Solution All pros under traditional responsive +plus No rebuild necessary A completely separate style sheet ensures the retrofit won t interfere with existing desktop styles Less costly responsive solution Two/Three websites to maintain Dilution of SEO / SEM investments and rankings Deep Linking Fail A rebuild from scratch is costly and time consuming Hard to tailor to individual device situations. An existing site with muddled code and patchwork can extend implementation time The content of some existing sites do not format well for smaller screens

26 Case Studies

27 NARS Cosmetics We initially engaged with NARS because they were concerned that they were behind their competitors as they had no mobile site or presence. Where NARS saw a challenge, 5th Finger saw an opportunity for NARS to leapfrog their competitors with a next-generation mobile solution Responsive Design.

28 NARS Cosmetics

29 NARS Cosmetics

30 NARS Cosmetics

31 NARS Cosmetics vs.

32 NARS Cosmetics Through extensive collaboration with NARS and the powerful 5th Finger Responsive framework, we were able to launch NARS mobile and tablet site experiences within just 14 weeks.

33 NARS Cosmetics 54% Increase in Checkout Conversion

34 NARS Cosmetics 48% Increase in Checkout Conversion

35 Tablet: Before

36 Tablet: After

37 1-800 CONTACTS Responsive WINS: mdot: 10.6% conversion rate Responsive: 11.5% CONTACTS now has full control of the Responsive codebase and technology no more black box provider.

38 Take Aways Mobile Web Traffic will hit 30% of all traffic by Many brands experience 30% tablet traffic already. Responsive Web Design is the clear winner for mobile and web tablet sites development. If you are unable to rebuild your site, Transformative Responsive Web Design is the best option over a traditional m. site. It has higher conversion rates, lower costs of maintenance, better SEO benefits and a much richer experience. 38

39 THANKS! 39