“If I had asked people what they wanted, they would have said faster horses.” – Henry Ford
We’ve been talking a lot about Responsive Design in the Studio lately. That’s because as web designers, it’s our job to think years ahead of our clients. It’s not like print publishing – the technology of viewing a page with your eyes hasn’t changed for quite some time. You can be fairly certain that in five years, the magazine on the shelf will still be perfectly legible and attractive.
Not so with websites, which are viewed with an ever-changing constellation of possible “eyes,” in all sort of different sizes, speeds, and orientations. In addition to a desktop or laptop computer, we have cell phones and iPads. Many folks are increasingly using services like Instapaper or Safari Reader, which strip all design away, leaving only text for your articles. And of course people view your website in far more contexts than before, often in very hurried environments which are much different than the atmosphere we design in.
But attempting to ignore these changes is a mistake. Every website needs a Five Year Plan, because that’s how long we believe a good web design should last, which means we have to anticipate those changes. The urge is to ignore that, to keep on building the same single-fixed-sized designs, to keep building faster horses. For years, that’s what we’ve been doing.
It’s time to embrace the true complexity of the web. As we’ve been doing this for our last few projects, I wanted to share some of the insights we’d gained from the process.
These are some of our helpful strategies for responsive design.
Content first. Clients have a message to convey and the job of the website is to serve that end. We’ve found that content, whether it’s writing or photography or any kind of media, is easily the most underserved and difficult aspect of pulling a good project together. Give your content the respect it deserves, and treat it as a first-class citizen. I love design as much as anybody, but almost all the time I spend on the web is still just trying to find information.
Think modularly. Break it down into “blocks” of content, and move them around. This helps you to picture how things might rearrange and fit better in different sizes. Perhaps elements can have more appropriate arrangements at a number of different viewing sizes. This makes a strong case for spending more time with wireframes, and less time with actual Photoshop type mockups.
Be willing to compromise. If you look at your website as a brochure people click their mouse on, you’ll never get there. That kind of thinking might still be just fine if you know 95% of your visitors have a big display and will continue to visit your site that way. But for most of what we make, it’s not good enough.
Iterate! If there is a “classical method” of web design, it’s presenting clients with very detailed mockups in Photoshop, then attempting to build that. This is a dead-end, and you’ll never end up with something responsive that way.
Starting next week, we’ll be talking a lot about how we redesigned our site to be responsive.
