5 Immediate Tactics to Create a
Seamless Responsive Experience
Today’s Speakers
•
Speakers
Ken Burke Jeff Hawley
MarketLive – Customer Driven Commerce
3
Future Channels Mobile/Tablet
Web
Social In Store
Direct Mail
Advertising Email
MarketLive – Total Commerce Capabilities
INSIGHTFUL ANALYTICS
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
MarketLive Clients
Agenda
The Case for Responsive
•
Let’s Do a Quick Poll
Are you using or planning to use
responsive design?
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
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
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
Tactic #1: Cultural Alignment
13
•
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
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
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
• 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
• Desktop will be primary purchase site BUT
• Shoppers will purchase more on mobile and tablet with a responsive site
•1. Find/Research
•2. Research/Buy
•3. Buy
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
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
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
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
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
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
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
