5 Things You Need to Know About Responsive Design in eCommerce

1,695 views
1,530 views

Published on

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.

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,695
On SlideShare
0
From Embeds
0
Number of Embeds
545
Actions
Shares
0
Downloads
19
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide
  • 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.
  • 5 Things You Need to Know About Responsive Design in eCommerce

    1. 1. Hi. Matthew Bertulli CEO and Co-Founder Demac Media @mbertulli Ben Burmaster President and Founder Snuggle Bugz @SnuggleBugz
    2. 2. About us
    3. 3. Some Of Our Clients
    4. 4. • Canada’s Baby Store • Began selling online in 2008 • Magento Enterprise • Trajectory growth of 300-400% • By 2012, 1/3 of traffic was mobile
    5. 5. 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.
    6. 6. 6 MONTHS 1,500+ HOURS
    7. 7. NEARLY HALF OF CONSUMERS USE MULTIPLE DEVICES WHEN SHOPPING * Internet Retailer
    8. 8. Today’s Theme Responsive design has a “multiplier effect” on many parts of your business both good and bad.
    9. 9. Mobile as % of Revenue Did going responsive even have an impact on mobile as a % of total revenue? August (pre-responsive) December (post-responsive)
    10. 10. Mobile Conversion Rate December 2013: • Significant increase in mobile conversion rate as compared to tablet and desktop. • 52.51% increase. • Largest increase in mobile CR of 2013.
    11. 11. 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…
    12. 12. 1 Responsive requires far more planning.
    13. 13. 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?
    14. 14. 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
    15. 15. 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
    16. 16. 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
    17. 17. 2 User Interaction parity across devices.
    18. 18. 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
    19. 19. 1. Responsive Design in eCommerce Requires a lot more planning. SnuggleBugz – Since Launching Responsive User Interaction Parity2
    20. 20. 3 Problems arising from responsive redesign.
    21. 21. 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.
    22. 22. 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
    23. 23. 4 Consistency across communication channels.
    24. 24. 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
    25. 25. 1. Responsive Design in eCommerce Requires a lot more planning. Communication Channel Consistency4 Examples of Responsive Email Display
    26. 26. 1. Responsive Design in eCommerce Requires a lot more planning. Communication Channel Consistency4 Examples of Responsive Email Display
    27. 27. 5 Overhead of running responsive.
    28. 28. 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.
    29. 29. 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
    30. 30. 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.
    31. 31. 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
    32. 32. ? Questions? Hello@demacmedia.com Matthew Bertulli Demac Media @mbertulli Ben Burmaster Snuggle Bugz @SnuggleBugz

    ×