Today's post zooms in on 3 best practices when going responsive.
1. Cut content in context
The Boston Globe has a footer call-to-action to subscribe, which changes depending on the size of screen being viewed. It also stays anchored to the bottom of the screen as you scroll up and down each page.
Compare the desktop version (shown above expanded to display additional content) to the mobile CTA which skips the detailed content and gets straight to the point - Get Access Now.
This is the perfect example of removing content depending on user context. If you're going to convert a mobile user, the more words you throw on the tiny screen, the more friction it creates.
The Globe also simplifies its subscription page, focusing like a laser on the value proposition and a strong CTA button -- though I do feel the value prop on this one is a bit comical!
Don't be afraid to strip your responsive mobile designs to MVC: Minimum Viable Content.
2. Mind your menu manners
I've recommended against using the triple-line menu icon on mobile designs, at least for now until the convention becomes entrenched with users.
Sony labels its menu button as such, clearly indicating it's an expand/collapse menu (avoiding drop-downs for longer lists).
3. Scale thumbnail images with usability in mind
Image resizing is a major part of responsive design, both for screen size and orientation. But keep in mind that users need to connect product names and pricing with thumbnail images on category pages. Bigger images are not necessarily better if they're large enough that the user has to scroll up and down to connect text links / pricing with products.
Indochino does a good job sizing thumbnails, even in landscape view. The user can easily connect product with price and link in one screen.
We'll be covering more tips on responsive design for ecommerce in the coming weeks on Get Elastic, leading up to the Shop.org Merchandising Workshop July 15-17. I'll be speaking on Mobile Commerce: Is Responsive Right for Retail? Join me!