Digital Business Marketing
Strategy

Case Study: Winning With Responsive Design

Google has recommended responsive design as its preferred mobile approach since last year. What it took one business to migrate off a separate mobile site.

By /

Featured image for “Case Study: Winning With Responsive Design”: Responsive Design

Ethan Marcotte coined the term “responsive web design” back in a 2010 A List Apart article, describing a single layout that reflows to fit any screen using flexible grids and CSS media queries instead of separate templates for separate devices. Google formally recommended it as the preferred approach to mobile back in 2012, over maintaining a separate mobile-specific site. What that recommendation looks like in practice, and what it costs to act on, is easier to see through one illustrative example than through the abstract case for it.

Where the business started

Picture a mid-sized regional retailer running two entirely separate websites: a full desktop site and a bolt-on mobile version living at a separate “m.” subdomain, built a few years earlier when mobile traffic was still a small slice of total visits. By this point mobile had grown to a substantial share of traffic, and the two sites had drifted out of sync, new products and promotions routinely appeared on the desktop site days before someone remembered to add them to the mobile version.

The problem that forced the decision

The mobile site wasn’t just neglected, it was actively costing sales. A promotion that ran correctly on desktop showed outdated pricing on mobile for most of a week before anyone noticed. Customer service started fielding complaints from people who’d seen one price on their phone and a different one in-store. Maintaining two sites had quietly become more expensive, in lost sales and staff time, than maintaining one properly would be.

What the migration involved

Moving to a single responsive site meant redesigning around content priority rather than screen size first: deciding what absolutely had to appear on a small screen versus what could be revealed only on larger ones, rather than just shrinking the existing desktop layout down. Product images needed multiple sizes served depending on device, navigation needed a complete rework for touch and the team had to accept a slower initial rollout than a quick mobile patch would have taken, in exchange for permanently retiring the duplicate site afterward.

What changed once it launched

With one URL structure instead of two, every promotion, price change and new product update went live everywhere at once, because there was only one place to update it. Mobile bounce rate dropped meaningfully within the first couple of months, and mobile conversion rate improved enough that leadership stopped treating mobile as the secondary channel it had effectively been treated as for years.

What this illustrates for anyone considering the same move

The upfront cost of migrating to responsive design is real, and it’s higher than the cost of a quick mobile patch. What the patch doesn’t show up as a line item is the ongoing cost of keeping two sites synchronized indefinitely, which tends to be exactly where things quietly break. For a growing business with real mobile traffic, that ongoing cost is usually the bigger number, even if it’s the one nobody puts in a single upfront quote.


More on Marketing Strategy, or browse everything from 2013.

Newsletter

The marketing brief, every week

One email a week: the sharpest new guides, tool reviews and Awards updates. No fluff, unsubscribe anytime.

We respect your inbox. Read our approach.

Keep reading

Related articles

All Strategy →

Explore more topics