Emerge Interactive

There's a lot of chatter on the webs about how Responsive Design is the "next big thing," and while it's certainly reaching buzz-word status, what exactly is it and why should you care?

Put succinctly, responsive design is the idea where a website is designed with a variety of screen and browser sizes (viewports) and platforms in mind. The goal is to use the same overall design and user interface but have it slightly adjust itself in order to be optimized for everything from a mobile phone to a desktop with a 22" monitor.

Responsive design has come about largely because of the rise of tablets. In our rush to accommodate them, we've risked regressing to the frustrating days of building more than one version of the same website, only now replacing different browsers with different platforms, screen sizes, orientations, etc. The goal of responsive design is to let you build one website that works on all or most devices and is optimized for each.

Unfortunately, much as the term "Web 2.0" was co-opted and branded to mean something totally different than its original meaning, it's important to stress that responsive design is not a magic wand to be waved around. While several tools are used that can greatly help the process, it's more about conceptualizing how a website's look and feel and UI can and should be shifted to accommodate different experiences, rather than any kind of one-size-fits-all (ha-pun intended) shortcut.

Responsive Design Starts with Design

At its most basic level, designing for desktop, tablet, and mobile all at once may seem like the way to go. The idea is that you allow the website to snap into place for each device, once a certain threshold has been reached in the size of the browser window. However, when done well, responsiveness also thinks of every device in between-the website can literally respond to its environment and adjust accordingly. This does, however, create some amazing challenges for the UX designer to overcome. Designers need to literally think outside of the box, since today's design tools (such as Adobe Photoshop and Illustrator) still try to force us into pixel and print constraints. Working closely with the front-end development team is the only way to overcome this and effectively translate designs to working mock-ups and prototypes.

The Tools

As mentioned, there are a variety of great tools that can get you about halfway to responsive design. CSS3 media queries are a great start, since they let you set thresholds at which styles should change and adjust. Jquery can also greatly assist in optimization and rewriting the DOM as a user moves from one device to another. But even without these tools, stepping back to the accessibility days of full-width percentage-based layouts will get you more than halfway there, since a side bar that takes up 33% of the screen will take up that same percentage of screen real estate in every viewport.

There is an arsenal of tools and techniques to allow for an innovative, dynamic, and of course responsive design. My current favorite CSS framework YAML4, which was already loaded with media queries and ingenious styles that adjusted almost seamlessly. Other CSS platforms have followed suit and provide an initial level of responsiveness built-in, especially Twitter's Bootstrap for quick site development and prototyping.

Above all, it was our team's goal of treating the site as responsive from the beginning and all through the design and implementation process that allowed for the final product to excel on a variety of platforms using the exact same code-base and look and feel. We worked hard not to succumb to the temptation to develop device-specific solutions to issues that could be solved responsively, and the result is a site which will display optimally not only on devices we know about, but also on those that haven't even been invented yet.