Responsive Web Design: Say Goodbye To Pixels

Perhaps not goodbye, but maybe an “until next time.” Although I’ve tried my best to ignore it, responsive web design is here to stay. A List Apart seems to run a weekly editorial on it and all the big conferences are focusing on this new type of web development. I knew the time had come for me to suck it up and bite the bullet when my local web Meetup group — who I must admit isn’t comprised of the most up-to-date designers — even decided to host a talk on it.

So What Is Responsive Design?

Responsive design is a relatively new term for “fluid design”. Anyone who has ever read a book on CSS knows what fluid design is, but just to be concise, it means designing your main elements to expand to the user’s browser. I would refer to A List Apart’s article on fluid design for a more thorough explanation beyond the scope of this article.

In layman’s, a responsive design doesn’t have whitespace on the left and right margins — no matter how you are viewing it, it grows and shrinks to the dimensions that the user specifies. Our website is a great example. Responsive design means forgetting the way that we traditionally build websites. It means considering every possible device that may visit your site. Cell phones, tablets and even televisions are now becoming the preferred method of surfing for many internet users, so we must take them into consideration even before we brainstorm our first concepts.

Analysts project that sometime this year over 50% of all web visits will be conducted through some type of non-traditional web-connected device other than a computer. With so many different display dimensions to conform to, creating a standard 980 pixel width website all but guarantees that your website will never be viewed properly by a large portion of your visitors.

In layman’s, a responsive design doesn’t have whitespace on the left and right margins — no matter how you are viewing it, it grows and shrinks to the dimensions that the user specifies.

I’ll admit that at first I was hesitant, because creating responsive designs meant that I had to step away from Photoshop and into the browser. Most of today’s top designer actually jump immediately into the browser from the beginning of the project. Photoshop and Fireworks can only go so far, and their fixed-width designs don’t allow for the type of customization that designs with device responsiveness require. Photoshop and Fireworks are now assuming the role of asset-creation (graphics, photos, etc), while the browser is becoming the sandbox.

Throughout my career, I couldn’t tell you how many world-famous designers and authors I have seen instructing against beginning a project in the browser — and they were completely right at the time they said it. Even though this practice is contrary to what we’ve always been taught, it is saving developers a lot of time these days. And that, too, means money.

Making It The Standard

Incorporating responsive design into your own designs is easy, but it most-likely means you’re going to have to alter your entire process from the ground up. Begin on paper or in a program capable of creating simple graphics to brainstorm your wireframes. After you’ve settled on a suitable design, move into the browser with your wireframe, assembling the basic building blocks of your new fluid design with HTML, CSS and even Javascript for interactive elements.

After you have coded the moving parts, you can begin creating the more thorough designs to bring into your design. This includes logos, interactive elements, backgrounds and images. We’ve had the pleasure of working on a few projects requiring responsive design in last quarter of 2011, and are using it exclusively to build one of our own internal projects. Each project that we take requiring this approach only makes me more certain that this is the best way to build for the web.

Taking a responsive approach to the web has made everyone here better at our jobs, more able to conform to the technologies of today, and for that we are all thankful.