Our Entire Navigation Menu, Now on Mobile

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:

Old DI Mobile Navigation

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:

New DI Mobile Navigation

(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:

DI Responsive Nav 945px

And here’s what you see when you widen the screen to 946px:

DI Responsive Nav 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.

Update 8/7/14: – Today I implemented FastClick, a library that eliminates the 300 ms delay on touch screens that’s in place to check if a tap is actually a double-tap. Holy cow, the difference was very very noticeable. I had it side-by-side on my iPad and couldn’t believe the speed improvements that 300 ms makes. Every javascript click event (the menu, add to cart, product filters, etc) is now much much faster. Marcelo from Happiness Boutique suggested this to me a while back. Had I known the difference FastClick makes I would have done it sooner!