The growth of mobile visits and purchases on Detailed Image has been amazing. One of the reasons that we launched our responsive design back in April of last year was that we saw this coming. We wanted to be ahead of the curve. One of the key tenets of our redesign was that we wanted the experience to be equally good regardless of device. The primary thing that was holding our mobile experience back in my opinion was the navigation.
Here’s what it looked like prior to today when you clicked the “Menu” button on your phone:
Meh. Users have to make an extra click to find the category or brand that they’re looking for. That’s an extra click on mobile where bandwidth and load times are a concern.
Today we finally released a revamped design that shows our entire left nav at every single screen size. On mobile, the nav slides in from the left and overlays on top of the content. I’m sure you’ve seen other sites that do this.
Here’s a screenshot:
(side note: if you’re wondering why we use the word “Menu” and not the three bar menu icon, it’s because text beat icons in a split-test we did)
Integrating this type of nav into the existing responsiveness proved challenging in some aspects. One of the biggest challenges was how to handle the scenario where a user opens the mobile nav overlay and then increases their screen size to a size where the nav would typically appear on the left hand side. We ended up closing the overlay to provide a pretty seamless experience. Our breakpoint is at a width of 945px.
Here’s what you see at 945px if you’ve opened the mobile nav:
And here’s what you see when you widen the screen to 946px:
Will this ever happen in real life? Actually, yes. Opening the nav on an iPad in portrait orientation (768 x 1024) and then rotating over to landscape (1024 x 768) would trigger this breakpoint. One can only hope that attention to details like this makes a difference.
This was the first and most important part of a project I’m working on to improve usability and increase speed for mobile users to hopefully finally bring that mobile/touch experience up to par with the desktop shopping experience.
- Our Exhaustive Shipping Project – What We Learned and What New Features We Added
- Integrating Customer Reviews into our Cart
- Apple Pay and Google Pay Now Live – Step 2 of Our Braintree Integration
- Why We Removed Our Newsletter Open-Tracking Pixel
- We Recently Migrated Detailed Image to Braintree Payments: The Good & Bad From This Large, Unplanned Project