Gary Bacon

Making a Case For Responsive Web Design

Responsive Web Design or Progressive Enhancement.
Both terms have the same goal in mind.

The Goal

Responsive Design / Progressive Enhancement has one goal: provide a universal, future-proof, device independent experience.

Anything beyond that is speculation on approach, resources, and implementation; techniques to achieve the goal.

As our world constantly evolves and technology grows at a rapid pace, our best practices in creating websites has to evolve with it. This is a step in that direction. Awhile ago, there was no such thing as a Kindle Fire. Now that device has its own browser with dimensions different than say an iPad. How do we make sure we cover the unknowns? How do we future-proof our websites? Responsive design is a step in the right direction.

Wireframing Stage

A great article at UX Booth mentions the importance of research and scope in designing a website with responsive design. This phase is key.

I prefer to break it up into three “buckets” when creating wireframes for responsive design. Desktop, tablet, and mobile as shown above. The exact dimensions can be determined by looking at your site’s stats. A good rule of thumb is 1200×800 for desktop, 800×600 for tablet, and 320×480 for mobile.

The above three categories are great when presenting your options or various layouts visually in the approval process of creating a website. The more planning that can be done upfront the better as it saves overall front-end development time. The same steps are for any website, however with responsive design your wireframes should also include scenarios for different size resolutions.

The Good News

From a cost and time perspective, with proper planning, responsive design adds little to the overall scope. Really it is more about the approach and methodology behind the design. The implementation itself isn’t the “hard part”; it just supports the initial planning phase.

There are tons of resources online about implementation, this was simply to make the case of why you should consider responsive design. The links that I mention below, give more resources on the how of responsive design.

Resources

For further reading on the technique, case studies, and general resources check out the links below: