You’ve probably read the opinions floating around about how the term “responsive web design” isn’t an adequate name for the technique. A lot of smart folks have weighed in, providing critique, explaining what they would call it if they had written the article, some even stating that it’s a great name.
Our team has these conversations all day long. We’re passionate about this business and this industry and we care about the language we use to discuss our passion. Recently, I’ve had a change of heart on this topic, resulting in the post you are now reading.
The original definition of responsive web design required a fluid grid, flexible media, and media queries. Most of the arguments I’ve seen revolve around the use, or non-use, of the fluid grid. Let’s face it, leaving out the fluid grid is the easiest way to make a site respond to the browser width without giving up the fixed-width mentality. We have done this on several sites (including this one) at higher resolutions. I advocated that we do this to maintain control of the design. I’m writing this to say that I’ve officially changed my view: fluid grids are a critical ingredient in this technique. Without them, we are still making decisions about the “supported resolutions” based on common devices, not our content.
Now, before you get your commenting fingers limbered up, please hear this: I don’t think it’s wrong to make a site that doesn’t use a fluid grid, but uses media queries to get some responsiveness. I do believe it is embracing the ideals of web design at its core to provide the best reading experience at all resolutions. A fluid grid is one way to do this. Zeldman posted a call for the elevating of the term “responsive” to a more comprehensive status. I agree more with Clarke, that this should just be web design—how it was meant to be.
Get to the Point
At Sparkbox, we talk a lot about Web Standards. However, we don’t follow Web Standards for the sake of standards. We use them as a tool for generating clean code, for combatting human error. We type every line of HTML and CSS by hand. When you do that it’s nice to have a validator out there to check against. And, we agree with the intent of standards, to unite browser manufacturers and web designers making everyone’s life easier.
We also talk a lot about great design, but we don’t do design to win awards. We do our best to prioritize solving a problem—our client’s problem—with our design. I believe this is a fundamental difference between us and our competition and I believe it’s relevant to this discussion.
We do responsive web design, but we don’t do it for the sake of being trendy. We do it because we believe it’s the way websites should be made. This is an opportunity for us to finally embrace the dynamic medium we build for. The web is not fixed width. I recognize that I’m saying this on a site that doesn’t use a fluid grid. We’re still learning, and if you’re reading this, you’re probably still learning too.
How About Responsible?
I’ll wrap it up by saying this: if you want to build a responsive site, make sure you build it responsibly. If I am viewing your site from my iPhone, I don’t want to download whatever big images you have in your CSS for a 1000+ pixel width browser and the smaller image you have in your CSS for a less-than 600 pixel width browser. Don’t serve me both of them, only serve me the right one.
Again, I’m saying this as someone who is still learning. We’ve built plenty of sites that start big and get small with media queries. However, the research has been done—start small, and grow the site with media queries. This way you are being responsive and responsible.
