5 Immediate Tactics to Create a Seamless Responsive Experience
Today s Speakers Speakers Ken Burke Founder and CEO MarketLive Jeff Hawley Director, Customer Experience Group Yamaha 2
MarketLive Customer Driven Commerce In Store Mobile/Tablet Email Advertising Direct Mail Social Web Future Channels Call Center 3
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 Email 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
MarketLive Clients 5
Agenda The Case for Responsive 5 Immediate Tactics to Create a Seamless Responsive Experience 6
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.
Definition 8
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
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 2014 79.4% Increase in mobile sales in 2014 from 2013 9% of sites currently online today are responsive 10
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
Tactics 12
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
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
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
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
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
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
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
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 28-32 pixels Placement Anything that opens up on the site needs to be designed for touch enablement Carousels Buttons Modals Before After 20
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
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
Poll Results Are you using or planning to use responsive design?
QA 24