You did your job. You intrigued your prospect. You captured their attention. Your call to action worked and they want to buy. Now. So they do it from their phone. Oops. Too bad you spent all of your time and effort designing that slick user interface that doesn’t work in mobile environments. Simply put, responsive design is critical to eCommerce success. Don’t believe us? Check out this presentation. You’ll be convinced and informed to respond yourself.
7. • Canada’s Baby Store
• Began selling online in 2008
• Magento Enterprise
• Trajectory growth of 300-400%
• By 2012, 1/3 of traffic was mobile
8. Some Context (our story)
• Combined redesign with improved infrastructure / server
environment to support responsive
• Lots of bumps & bruises and the lessons that come from them
• Cornerstone piece of long term “omni-channel” strategy
We’re going to use the
2013 SnuggleBugz.ca
responsive redesign project
and results to give some
context to this talk.
12. Mobile as %
of Revenue
Did going responsive even
have an impact on mobile
as a % of total revenue?
August (pre-responsive)
December (post-responsive)
14. User Interaction parity across devices.
Problems arising from responsive redesign.
Consistency across communication channels.
Overhead of running responsive.
1 Responsive requires far more planning.
2
3
4
5
THE 5 THINGS…
16. 1. Responsive Design in eCommerce
Requires a lot more planning.
Responsive Requires More Planning1
Part 1: What are the desired outcomes from going responsive?
Part 2: What impact is a responsive site going to have on my business
back-office functions?
Part 3: Small changes can have massive impact on a regular site.
Every change now requires you to think of more screen sizes.
Part 4: Can easily spend hundreds / thousands of hours fine tuning user
interactions on each screen size. What are your limits?
17. 1. Responsive Design in eCommerce
Requires a lot more planning.
Responsive Requires More Planning1
You start your planning with user interactions.
What are they? How many?
Normal Sites
• Content Pages / Templates
• Registration / Login
• Account Management
18. 1. Responsive Design in eCommerce
Requires a lot more planning.
Responsive Requires More Planning1
eCommerce Sites
• Content Templates
• Registration / Login
• Shopping Cart
• Wish List
• Registry
• Checkout
• Rewards Points
• Account Management
• Order Management
• Product Reviews
• Product Listing Templates
19. 1. Responsive Design in eCommerce
Requires a lot more planning.
Responsive Requires More Planning1
Can a responsive redesign impact your business in
the back office?
Key: Your customers “touch” much more than your site.
Marketing
Processes
Customer
Service
Fulfillment
Retail Store
Impact
21. 1. Responsive Design in eCommerce
Requires a lot more planning.
User Interaction Parity2
Example: Think about how hard it is to pay on your phone! (digital wallet)
What is the best
way to handle
user interaction
parity?
Are there features
& functionalities
that belong on only
certain devices /
screen sizes and not
others?
Core differences in
the types of user
interactions.
(hover/mouse over,
drop down menus,
right click, complex
fields etc…)
ONE TWO THREE
22. 1. Responsive Design in eCommerce
Requires a lot more planning.
SnuggleBugz – Since Launching Responsive
User Interaction Parity2
24. 1. Responsive Design in eCommerce
Requires a lot more planning.
Challenges & Problems Encountered3
Screen sizes… oh screen sizes!! 130+ of them..
The first week post-launch was pretty hard on our
customer service team. Lots of inbound requests as
a result of new site problems.
Forgotten features…
yup, even after a lot of planning.
25. 1. Responsive Design in eCommerce
Requires a lot more planning.
Challenges & Problems Encountered3
• Snuggle Bugz had 5 employees dedicated to responsive testing once it was
deployed
• Reimagination of the desktop navigation
27. 1. Responsive Design in eCommerce
Requires a lot more planning.
Communication Channel Consistency4
Responsive
Emails
More than doubled the amount of time required to
design and build an email message.
• Had to re-think everything.
• Totally new approach.
Image hosting overhaul
• SVG graphics and scripts
• Utilizing smybolset icon fonts
28. 1. Responsive Design in eCommerce
Requires a lot more planning.
Communication Channel Consistency4
Examples of Responsive Email Display
29. 1. Responsive Design in eCommerce
Requires a lot more planning.
Communication Channel Consistency4
Examples of Responsive Email Display
31. 1. Responsive Design in eCommerce
Requires a lot more planning.
Overhead of Running responsive5
Customer
Service
Customer service and in-store associates now need to
have an understanding of responsive in order to handle
requests effectively.
32. 1. Responsive Design in eCommerce
Requires a lot more planning.
Overhead of Running responsive5
Multiple Images &
Key Site Assets
Train Your Team
in Responsive
• Produce Multiple
or Produce Smart
• What is it?
• Common problems
33. 1. Responsive Design in eCommerce
Requires a lot more planning.
Overhead of Running responsive5
Content Type Section Priority
Logo Branding Site Wide 1
New Products Rev Gen Site Wide 1
Customer Reviews Informative Page Specific 3
A new content strategy was developed to rank pieces of the
page and how they’re arranged since every device has
varying real estate.
34. 1. Responsive Design in eCommerce
Requires a lot more planning.
Overhead of Running responsive5
IE8 and Earlier
• Lack of support for CSS media queries
• We monitored our GA traffic to decide if this was a good use of
resources
• Usage of IE8 was 2.8% for February 2014
• National average for February 2014 is 4.34% according to Awio
Web Services
Navigation on sites tends to be horizontal along the top of the page. Snuggle Bugz has a large drop down upon mouse over with dozens of options. Obviously there is no such thing as mouse over on mobile. There is no simple canned response. We experimented with multiple responsive design patterns. Desktop, iPad, and iPhone for example all have different menus.
While there may not be an official solution for images, we found some great solutions to keep consistancy across all channels. Using SVG graphics (which is a vector format) we were able to keep files sizes and load times to a minimum. This also keeps image quality high for those using retina displays.Smybol set icon fonts adapt seamlessly between screen sizes and devices with minimal load time and no additional programming.
Although respond.jspolyfill is a good solution that offers more or less backwards compatability, we found internet explorer traffic of IE8 or lower was less than 2.8% of desktop traffic so we decided it was time to gracefully let go. Every business is different so you need to look at your own data to make this decision however. Don’t forget that in a worst case scenario, the site still looks reasonable on older versions of IE, it’s not as if a 404 error appears.