I recently teamed up with Monetate on the short ebook, The Truth About Responsive Design (which you can grab for free). It covers the history of mobile web design, the pros and cons of responsive design and examples of responsive sites we like (both ecommerce and non-ecommerce).
Today’s post zooms in on 3 of the best practices to use when going responsive.
1. Cut Content in Context
The Boston Globe has a call-to-action to subscribe placed in the footer, which changes depending on the size of the screen being used to view the content. An icon 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 you create.
The Globe also simplifies its subscription page with laser-like focus on the value proposition and a strong CTA button.
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 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 so large that the user has to scroll up and down to connect text links and pricing with the products.
Indochino does a good job sizing thumbnails, even in landscape view. The user can easily connect the product with its price and link, all in one screen.
