The Web Gets Responsive

- August 24, 2011 by Jonathan Faunce, Interactive Producer

If there’s one thing the web community is simultaneously able to love and hate, it’s fads. And throughout the WWW’s brief history we have experienced a number of these passing sensations. From overly interactive flash to “Web 2.0,” many trends were developed as a way of responding to new user capabilities and technologies. In the end they often follow the same path of adoption - quickly building steam until they are so rampant in projects that the original meaning or intention of the technology is lost amongst the clutter.

Now that I have properly set the grim tone, allow me to introduce the latest trend in web development. It’s called responsive web design.

What is responsive web design?

Well, you might say it’s a technique that allows designers to create a user experience that is adaptable across multiple browsing devices and screen resolutions, while empowering developers get to keep a cohesive, sometimes singular, code base. But that’s a rather lengthy definition, so let’s keep it simple. Distilling responsive web design down to its essence, you’re left with a core idea: build once, deploy everywhere.

I don’t expect that many of you reading this are developers or designers, so the magnitude of this concept may have fallen flat in the previous paragraph. Let us imagine we are able to construct a house that employs a responsive web design technique that is capable of adapting to its environment. Drop the house in the sprawling countryside, and your wrap-around porch becomes instantly available while the rooms expand to accommodate the wealth of space. Move said house to an urban scene, and watch as rooms contract and stretch to fit within the crowded confines. Layouts change and some features are reconfigured to make more sense in their new space, but when it’s all said and done you’re left with a home that should look familiar even though it might function differently. A house like this would be priceless! And that’s the potential of a build-once-deploy-everywhere technique. It could possibly save time and money when building an interactive presence that needs to work across multiple devices.

To see responsive web design in action, visit sasquatchfestival.com simultaneously on your desktop computer and mobile device. Though what you see looks different, it’s all one site running the same code that’s adapting to your browsing device. You can also see its responsiveness on your desktop by resizing your browser window. Notice how the design adjusts accordingly. Again, all the same code, just adaptive.

Of course, not everyone is a fan of this fledgling concept and the process of building a project in this manner ends up creating its own set of problems.

Primary issues

Regrettably there are many issues surrounding the deployment of a site that only considers how flexible its layout can be. Chief among them are:

• Responsive web design is not optimized web design, and when you work with mobile content, proper optimization is key.
• The backbone of responsive web design code is the CSS Media Query - a standard that is not supported very well by older browsers. I should mention that there are JavaScript workarounds that can solve this problem, but the issue of browser adoption is still important to consider.
• Last, we should know that flexibility of layout (responsive web design’s primary concern) is only a small part of the equation when working to display content in nontraditional web browsers. Everything from a user’s location to the complexity of the device or connection capabilities need to be evaluated before a content delivery strategy is established.

Responsive web design is not a silver bullet, but it is a good idea

Responsive web design has done a fantastic job of pushing designers and developers to think of their projects in a modular, more flexible sense. The foundational idea of planning your design around a grid and considering all screen sizes is a huge step forward for usability. Combined with proper content for non-desktop devices and better optimization, a responsive web design technique can be visually rewarding and save valuable production hours.

The tools we use to browse the web are changing faster than ever. Phones, tablets, game consoles and TVs are increasingly gaining popularity as web-browsing devices, and Gartner predicts mobile browsing to exceed desktop-based access within 3-5 years. For designers and developers, each of these platforms presents new challenges with varying inputs like mice, keyboards, T9 keypads, game controllers, touch interfaces, TV remotes and don’t even get me started on screen resolutions. With so many new ways to create and consume content, gone are the days of having a simple web project. Budgets and scope have grown to meet consumers where they are, and time-saving layout techniques like responsive web design should be welcomed and adopted. Just remember to not forget about the basics.

Dig this article? Get similar content sent straight to your inbox by signing up for our monthly e-newsletter below.