A few days after I was thinking about frameworks, Brad Frost published an article about Responsive Strategy. It’s a solid summary of different approaches to building a responsive site. In it he pulls together the various ways and looks at the pros and cons of each.
Mobile First
My favourite (and how we do it at Flow) is Mobile First: build a new Front-end from scratch, and start with mobile. This approach is difficult and can be lengthy, but there are many benefits for the site, the business, and the developers. One important point is that it makes it easier to build a more Future Friendly site: preparing your site to go anywhere.
Second prize
This approach isn’t possible for every project, though. Another viable option is to update an existing m dot site to responsive (like the team at the BBC are doing), with the goal of eventually “turning off” the desktop site. One of the pros that Brad lists (emphasis mine):
Learning to be flexible – Designers can learn how to think more fluidly. Developers learn about the myriad quirks of old Android devices. Management can learn to let go of pixel-perfection. A responsive m-dot can serve as an important sandbox for learning.
Achieving pixel perfection was always a myth, something that designers and developers forced on to the web, but it’s become obvious that the old ways of doing things are broken. Even across the desktop, the number of browser and operating system combinations make it impractical to have the design looking identical across them, even if it that were a desirable goal (Pro tip: it’s not).
Piecemeal
The trickiest way of doing a responsive site is bit by bit. Although it lets you get quick wins by making the most frequently visited pages better, the continuity problem breaks this approach for me. The flow from old to new pages runs the risk of confusing the user, at best making them wonder what’s going on, and at worst making them think they’ve left the site and gone somewhere else. This problem is exacerbated if the move to responsive is also accompanied by a design realignment (Good Designers Redesign, Great Designers Realign).
Conclusion
Doing things Mobile First, from scratch, is the the best way, but it’s not always possible. Legacy code and problematic Content Management Systems sometimes get in the way. Starting from an existing mobile site can be a good alternative, and will help you learn some important lessons along the way. Be wary of approaching a responsive redesign piece by piece: you might confuse your users.