A 2012 Process for a 2012 Responsive Web


Expansion & Change

With the expansion of different web devices the context in which people view web design has changed dramatically. The number of people using internet-based applications and websites on their TVs, smartphones, netbooks and tablets has grown exponentially in 2010 and 2011. It was “The Year of the iPad For the Second Year in a Row“, according to Horace Dediu of Asymco Research Blog.

These changes have paved the way for how web designers think about web design as a whole. Web designers knew the way they created user experiences needed to evolve, as well as the strategy for how the content was going to be delivered. The acceptance of thinking beyond one explicit screen size is now more than just a trend, it’s the foundation for how designers think about user experience design. Responsive Web Design shows how designers are committed to giving the best experience possible no matter what the context. A plethora of information exists out there on this topic in many different forms: eventsbooksblogsgalleriesslide presentationstools and grid systems.

With this adaptive design strategy, web developers and designers now have to not only educate themselves on a technical level, but devise new processes and strategies for their teams to be able to utilize. For any size company this can be a bit of a struggle. There are budgets, timelines and client expectations to consider. Any significant leap in evolution in any area of study constitutes a significant change to the methodologies and processes that create it.

Action and reaction, ebb and flow, trial and error, change – this is the rhythm of living. Out of our over-confidence, fear; out of our fear, clearer vision, fresh hope. And out of hope, progress.
– Bruce Barton, BDO Advertising

So with that in mind, lets dive right in…

Design Process

For Galvin, our design process consists of wireframes and design compositions for those wireframes. Most project’s wireframes account for the “highest common denominator” screen size. This information comes from the World Wide Web Consortium (W3C) and basically means that we account for the highest probable number of users. A few years ago, before the dramatic change in the popularity and number of different screen sizes, developing for this common denominator was standard. The percentage of users at one given size was usually above 50. But now in 2012 with more users viewing sites on large desktop displays and small mobile devices, the common denominator has dropped to under 20%. Responsive Design allows us to account for these different screens sizes, so we can target a much wider user base and give them the best experience possible.

This new design strategy will change our process as follows:

  1. Understand targeted audiences and their contexts.
  2. Devise strategies and goals for each specified screen size being targeted.
  3. Create wires for specified screen sizes.
  4. Create comps for specified screen sizes.

Development Process

The changes to this phase will have the biggest impact on the success of a responsive site. Designers are asking front-end developers to essentially be designers and vice-versa. The way the site moves and handles elements from screen size to screen size is very organic, so the process that created those elements needs to be organic.

An example of a less responsive approach to this phase would be:

  1. The Designer creates compositions.
  2. The Coder then takes compositions from the visual designer and develops them.
  3. The Designer reviews and tests code.
  4. Lastly, the changes are made and site is complete.

This process is limited because the designer and developer have only one chance to be successful. With responsive sites there are so many different scenarios and opportunities for inaccuracies that a more agile approach is needed. Something similar to this:

The Designer creates compositions, the coder then develops them and they both test the site on different devices. That entire process continues until the project’s goals are accomplished.

Management Process

A more iterative creative process means more work and more time. The essential strategies and concepts would get flushed out in the design and development phases, so it would certainly make budgets go up and timelines widen. The biggest opportunity to overcome the hardships for these two items is to plan for them in the beginning of the project. Sales and management teams can do this by following a few key tips:

Create a Specific Question Checklist for New Clients

A. Does the client’s audience support many devices?
B. Does this application only need to support one screen size?

Get a Feel for Timeline

A. Can you deliver specific experiences to multiple devices in the allotted amount of time?
B. Are there devices that are a higher priority for a phased out approach?

Weigh the Pros & Cons

Although it would be wonderful for the client’s new site to be completely responsive with four different screen sizes, sometimes their budget and timeline just won’t allow for it. So in this case start backward for the strategy; from one screen size, to two, to three until there is a middle ground met. The great thing about Responsive Design is that it’s so easy to change in the future if you plan for it at the start.

Looking to the Future

Responsive Web Design is not only changing design for the web, it’s changing its processes. Any company that wants to create sites that are responsive has a good deal of work ahead of them. Companies, especially small ones, can’t just change overnight. It takes education, planning, commitment and even better internal and external communication. Timelines, budgets and client expectations are affected and should be accounted for from the very beginning of project conception. Even with these hardships, companies that adapt to and adopt this new optimized design strategy have a great opportunity to distinguish themselves from the rest. I encourage all development companies to overcome the fear in changing and help others advance design for the web.

Search the Galvin Blog

Latest Tweets