Roundarch Isobar Presents at the Chicago Interactive Designers & Developers meet-up

Roundarch Isobar UX designers Bill Welense, Michelle Dash, and Joe Hass recently presented an overview of Responsive Design at the Chicago Interactive Designers and Developers meet-up. The following post is a highlight of the discussion.

One term we?ve been hearing a lot of lately is ?Responsive Design.? It?s the idea that a single web page can appear differently depending on the device it?s being viewed up. By combining certain front-end and back-end technologies, a site running the same code can optimize how it displays its content for a phone, tablet or desktop computer.

To understand how Responsive Design works requires first understanding how the web on mobile devices evolved. In 1999, the common Web technology on mobile phones was WAP, one of the first platforms for this class of devices. WAP enabled feature phones to access content designed for their primitive browsers. Smartphones of the day had stronger browsers and were able to handle some traditional web pages, yet these still weren?t ?full? browsers, often struggling to display basic layouts.

But on June 29, 2007, Apple introduced the iPhone. Apple?s CEO Steve Jobs remarked the phone had a fully-functional version of the company?s Safari browser and could render traditional web pages correctly. As he said that day, ?This is the real Web!? However, broadband mobile networks weren?t yet supported, and Apple decided to not allow any browser plug-ins, so sites using Adobe Flash for rich content like video were not supported.

With these and other complicating factors like the size of user interface elements, it became common to build new mobile sites specifically for this new class of mobile browser. In practice though, doing so is not much different from WAP, in that specific code is written for different devices.

By 2011, three things had changed: mobile device speeds had increased significantly, the web browsers (both mobile and desktop) had become more powerful, and web programming languages had evolved significantly (specifically HTML5 and CSS3) along with a plethora of modern enhancements made possible with JavaScript. This has allowed Web technologists the ability to use these tools to create a code base that can tailor how the site or Web app presents content depending on the user?s device. Thus the term ?Responsive Design? came into being, largely attributed as having been coined by the Boston-based web designer/developer Ethan Marcotte.

Having established the lineage of Responsive Design, let?s consider three key elements it takes into account:

1. Fluid content: the idea that a piece of content can be adjusted to fit the device. Let?s say there?s an image on a screen that all users should see. If a user is viewing a site on a 1280×1084 desktop monitor, then the server should send a larger image that fills that nicely. If the user is viewing the same site on a smartphone, the image should be smaller to fit key content on the screen while also conserving bandwidth.

2. Contextual design: The site or Web app should display an interface that makes sense for how and where the user is using his or her device. There are many ways to interpret this, though one lens to view this idea through comes from UX consultant Whitney Hess: a mobile phone?s key use is checking content, a tablet?s is immersing in it, and a PC?s is managing it.

3. Browser capability: Every modern browser has adopted the set of technologies collectively known as HTML5, but each to its own degree. However, there are still a significant number of people who are using older browsers (Internet Explorer 7, for instance) which don?t support modern features of HTML5, and must fall-back to plug-ins like Adobe Flash for video playback, for example.

The challenge is how to approach Responsive Design from the design process itself. There?s different approaches to take, many of which can be combined together depending on the needs of your project. Three popular ones are:

1. Approximate designs: Create a unique design for each of the two or three major form factors the site or web app will target. Based on breakpoints in screen width, this provides the team a rough idea of what to design for and is perhaps the most simplistic approach the Responsive Design.

2. Content-driven design: Taking a holistic view of the site, especially when it comes to functionality, a designer looks at a page or even the site as a whole as a series of components that shift as needed. Instead of looking at a single piece of functionality, it becomes a puzzle with moving pieces that are exchanged and interchanged depending on the device.

3. Mobile First: Proponents of this approach argue it?s more important to figure out the core functionality your project will deliver, then enhance that feature set when a user is on a more powerful device. This is reversal from the historical approach whereby a mobile sites or web app starts by stripping away functionality from a full desktop version. The concept of designing for mobile first was championed by Luke Wroblewski in 2009, who?s since written a book on the topic, Mobile First (2011, A Book Apart).

Like any approach to technology, Responsive Design has benefits and risks. From a user perspective, it gives a cohesive experience regardless of device. It allows for targeting of critical content and functionality and can create content efficiencies, especially when a site is using a strong content management system. Using Responsive Design as a technical approach for your project can extend its shelf life.

On the flip side, Responsive Design represents a paradigm shift for those who build with it?not just for the design & development, but also both our external and internal clients. A project employing Responsive Design patterns can involve UX designers creating multiple sets of wireframes, visual designers creating multiple mock-ups and graphics assets, not to mention that developers and those responsible for testing must build and test multiple variations of code.

Is using Responsive Design on your project worth it? It depends. As with any project, factors such as user needs, technology architecture, business goals and budget size all matter. Whether or not to use Responsive Design is not a decision that belongs just to any one party involve in a project.