5 Immediate Tactics to Create a Seamless Responsive Experience

Transcription

1 5 Immediate Tactics to Create a Seamless Responsive Experience

2 Today s Speakers Speakers Ken Burke Founder and CEO MarketLive Jeff Hawley Director, Customer Experience Group Yamaha 2

3 MarketLive Customer Driven Commerce In Store Mobile/Tablet Advertising Direct Mail Social Web Future Channels Call Center 3

4 MarketLive Total Commerce Capabilities SHOPPING CART AVS Tax & Shipping Manager Order Processing Payment Authorization & Management Abandoned Cart Module CROSS-DEVICE COMMERCE Cross-Device Saved Cart Optimized templates Touch Enabled Complete Mobile Commerce Framework INTEGRATED CUSTOMER CARE Order Management Buying History Integrated Support Gifting Shipping Management Click to Chat MARKETING & PROMOTION Personalization Marketing Targeted Promotions Pricing Engine Retargeting Audience Segmentation CONTENT MANAGEMENT Integrated Search Video Integration Look Books Content Management & Integration SOCIAL COMMERCE Social Login Social Commerce Apps Social Contests Reviews & Ratings Customer Loyalty MERCHANDISING Localization Conversion Optimization SEM/SEO A/B Testing Optimized Site Search Faceted Navigation Dynamic Product Display INSIGHTFUL ANALYTICS PROFILING AND SEGMENTATION UNIVERSAL DATA EXTENSIBLE ARCHITECTURE 4

5 MarketLive Clients 5

6 Agenda The Case for Responsive 5 Immediate Tactics to Create a Seamless Responsive Experience 6

7 Let s Do a Quick Poll Are you using or planning to use responsive design? We ll share the results at the end of the presentation.

8 Definition 8

9 What is Responsive Design? Definition Website design & development approach Leverages a collection of technologies & design techniques Optimize the experience delivered based on a device s screen size & orientation Deliver the following from a single website a consistent experience across multiple devices an optimized experience on any device 9

10 Why Go Responsive? 20% of all retail purchases are influenced by Mobile 50% of all retail traffic is expected to come from Mobile by the end of % Increase in mobile sales in 2014 from % of sites currently online today are responsive 10

11 The Pros and Cons of Responsive Design PROS CONS Common code base Development costs Future device releases Mobile bandwidth Partial window browsing Cross browser compatibility Unified URL structure Image resizing/slower page load Source: August 2014 Webinar: FitForCommerce and MarketLive- Responsive Design for Commerce

12 Tactics 12

13 Tactic #1: Cultural Alignment Company s need to change their culture and mindset when going responsive. What has to happen in your organization for this to work: Prep your organization culturally Training Programs for internal teams Training costs required to re-skill your existing resources Budget for outside consultants or agency staff is necessary to augment and bootstrap your internal capabilities. All current designs need to be fully redesigned for responsive templates 13

14 Tactic #1: Cultural Alignment (Cont.) All design procedures are going to change: Design Elements driven by CSS The more CSS the less images will be needed Reduce image based buttons and navigation Using CSS allows you to only create the image once and use it over and over again 14

15 Tactic #2: Optimize the Path to Purchase Optimize the site based on how Shoppers use different devices along the Path to Purchase Emphasize different entry points & shopping features on different devices: Mobile, Tablet, Desktop 1. Find/Research 2. Research/Buy Develop breakpoints top to bottom and left to right Optimize for the different devices most important items on the top left Least important on bottom right V idea of scanning the page 3. Buy Desktop will be primary purchase site BUT Shoppers will purchase more on mobile and tablet with a responsive site 15

16 Tactic #2: Optimize the Path to Purchase (Cont.) Merchants need to think desktop/tablet and mobile, which translates into: Small, Medium and Extra Small breakpoints Medium is optimized for desktop, small is optimized for tablet and extra small is optimized for mobile Extra small allows merchants to hide certain elements that will bring efficiency to the mobile site Large images Elements that won t work on Mobile phones 16

17 Tactic #3: Prioritize the Performance of the Experience Recognize differences in device capabilities and then optimize Optimize imagery per device Use light graphics and optimize for each breakpoints KPI s for Site Performance Pageload time Understand reporting to determine if any of the breakpoints or screen sizes are behaving worse than the others May indicate necessary design changes 17

18 Tactic #3: Prioritize the Performance of the Experience Optimize Front-End Delivery: Combine multiple CSS and JS elements or combine images to reduce the number of roundtrip calls you make back to the server Prioritize the order of the elements Reduce the image weight with resizing and variable compression techniques CSS 18

19 Tactic #4: Develop a Mobile First Approach What is Mobile First? Designing an online experience for mobile before designing it for the desktop Web or any other device. Mobile first shifts the paradigm of a Web-site user experience. Users view sites that have been created specifically for their mobile device. Site Redesigns start with Mobile First then build backwards to Tablet and Desktop 19

20 Tactic #5: Touch Enablement Button sizes and space around links per breakpoint need to be built based on Size of element Spacing around element Recommend pixels Placement Anything that opens up on the site needs to be designed for touch enablement Carousels Buttons Modals Before After 20

21 Tactic #5: Touch Enablement (Cont.) Important items to consider for touch enablement: Tapping is not accurate Gestures are different from taps -- move the mouse down. Two (and more) finger taps High glare devices 21

22 Tactic #5: Touch Enablement (Cont.) Because of these features of the device, web designers need to: Not place clickable items too close together Avoid hierarchies that can be hard to keep open Remember there is no mouse Avoid black backgrounds that enhance the glare Keep blocks of text short for improved readability 22

23 Poll Results Are you using or planning to use responsive design?

24 QA 24