An Agency Guide to Responsive Web Design

Responsive Web Design (RWD) is an approach to web service delivery with great promise and a high value proposition, such as providing end-users access to content across multiple connected devices. These days, a multi-device solution may seem like a "no-brainer" for a business looking to reach as many users online as possible. And though, it may be a “no-brainer” for start-ups who only have to convince themselves of the value of RWD, the approach still proves challenging to digital agencies, who have the additional burden of convincing clients of the RWD value proposition. 

To make matters more complex, RWD requires a completely different Design process than a digital Design firm is used to selling to its clients. No longer is the focus of an engagement to review and approve deliverables, but to evolve and enhance a product. Documentation is still needed to accelerate the development of the product, but not as a “check and balance” set of deliverables for the client, as is typically required to prove that things are progressing along in the right direction. Thus, a traditional “waterfall approach” to web design doesn’t work well for RWD. 

In a waterfall, the constant iteration on documentation needed for approvals slows down the progress of actual product development and refinement, by shifting focus away from the actual build-out of the product. RWD works best when both Agency and Client are looking at an ever-evolving, digital product, and continuously testing and optimizing it across a diverse array of devices. To that end, Design must quickly become code. 

Definition of Responsive Web Design –

Given the amount of misinformation and misuse of the term, it is extremely important for consultants to clearly and accurately define Responsive Web Design to their clients.

According to Ethan Marcotte, web developer and author of the book “Responsive Web Design” (published in 2011, by a Book Apart); RWD is a combination of three web technologies that enable businesses to deliver an experience that is usable on any connected, consumer device, with standard browsers:
 
1. Fluid Grid – In RWD, a fluid grid implies that content layouts are defined proportionally, not with absolute, fixed pixel values. This flexibility enables content to re-flow for different size viewports.

2. Flexible Images and Media – In order to accommodate the variance in potential device screens, in terms of size and resolution, a responsive web experience must be designed to enable the switching of images (from low to high resolution, or from one crop to another), depending on the viewing device, or viewport size. Although a single standard has not yet been established concerning “image flexibility” and RWD, best practices are emerging. For example, it seems that the best approach to serving up images, in general, is to start with the mobile resolution images first, then upscale, as appropriate, per rendering device.

3. CSS Media Queries – The cornerstone technology that enables RWD, is CSS media queries that trigger the reflow of content according to identified breakpoints in the content grid. CSS media queries may also be used to turn on, or off, specific images, at set breakpoints. Additionally, media queries may be used to modify functional components, like switching between a traditional, button-based navigational menu (on a desktop view) and a dropdown menu (on a smartphone).
 

Benefits of Responsive Web Design–

RWD isn’t the only strategy a client may adopt for multi-device delivery of web content, and Agency consultants will, undoubtedly, have to defend their recommendation of RWD. 

The following are the most widely accepted benefits of RWD:

1. “Future-Proofed UX”
By triggering the reflow of content based on the identified, natural breakpoints in the content itself, and NOT on particular screen sizes or devices, designs that employ RWD should work well on any screen. It is important for Designers to remind clients that they should be device-agnostic in the Design of an RWD experience, but rigorously test their Design on ALL devices that are likely adopted by their target audience to make sure they work well. 

2. Efficiency of Managing a Single Codebase
RWD provides the opportunity for Developers to design, code, and manage a single website, that works on a variety of platforms and devices, using a single codebase. Thus, the operational efficiency of RWD can be huge.

3. Speed to Market for Native Apps as well as Web Delivery across Multiple Platforms
RWD provides the interesting option of “hybrid” development of native applications. Hybrid apps combine UI elements and services developed using native code, with UI elements that are developed using HTML 5 (from the same codebase used to deliver services via the browser). Leveraging pre-existing components enables content producers to accelerate native app development across many different platforms.

4. Highly Collaborative Design Process 
RWD requires designers to work closely with developers, as Design decisions are made by understanding how content reflows from breakpoint to breakpoint, orientation to orientation, and device to device. Thus, developers are included as members of the Design team. Encouraging early, cross-discipline collaboration always results in a greater sense of team ownership, wider understanding of client business drivers, and increased diversity of solutions to project challenges.
 
5. Cost 
Although initial pricing of an RWD solution may be higher than a single, fixed desktop website Design, the cost to Design responsively IS competitive, compared to the sum total cost of a business’ multi-device initiatives. Again, it is important for consultants to help clients see the long-term value of RWD, versus the short-term costs to implement it.

6.  Visibility to Mobile Search 
Mobile searches have quadrupled last year (2011), from the previous year, according to Google. As this trend steadily increases, businesses must realize that their services have to be findable via mobile web search. RWD is a good option for a business to make its content and services findable via web searches across a variety of mobile browsers. Consultants need to remind their clients that having a website that is responsive does not preclude them from developing platform-specific, native applications that support device-specific behaviors and needs.

Challenges of Responsive Web Design –

Understanding the pros and cons of RWD is extremely important for consultants, as they face challenges in client adoption, as well as in the design and implementation of RWD solutions. 

It is important to realize that the following challenges are not insurmountable, and, therefore, should not be used to rule out RWD as a viable option for multi-device, content delivery via the web:

1. Performance
Without a workflow or plan for the dynamic loading of optimized images based on the viewing device, a website that utilizes RWD may suffer from performance issues if it is constantly loading high resolution images for each device that accesses the website. 

2. Change of Standard Web Design Process
As stated previously, it takes a cultural shift, and change of mindset, for clients to accept that they will be reviewing an actual product in various states of evolution, versus static representations of the product represented in wireframes and comps. This change may be counter to accepted workflow, review, and governance processes.

3. May not be the Right Solution for the Redesign of Existing, High-Profile Sites 
Clients with sites that get loads of traffic and ecommerce revenue may opt for less-destructive, “adaptive” web design solutions (ones that use CSS to swap fixed layouts targeted to specific platforms). An adaptive approach may provide platform-targeted solutions more quickly, if the client doesn’t want to completely redesign their web experience. However, if a business is introducing a new or significantly redesigned service to the public, with the need to be accessible on as many devices as possible, RWD has an extremely high value proposition.
 

Real Client Interactions and Feedback – 

One of the most critical components for successful client adoption is making sure the client feels like an active participant in the team. Through the course of RWD initiatives, Empathy Lab has used client interactions and feedback as a way to curate and improve upon our own processes. 

Some specific examples – 

Determining which devices to plan for:
The client knew they desired several platforms, but their business was in transition and they could not determine which device was the priority to lead a waterfall process. By moving to RWD, we were able to retain agility for their business and track with them as they refined their direction (some of the shifts being quite large).  All of this happened within the course of weeks.

Showing in-product proof of concept:
We had been discussing several options for social integration into a product.  The client had a meeting with their executive team and came back to Empathy with an immediate need. Client: “We need to show social and how it fits into the product.” EL: “We agree. It is central.”  Client: “But we need to show it in the product. It can’t just be PowerPoint slides.” EL: “No problem.”

Kicking off and reviewing every experience development sprint:
It is likely that the RWD delivery process will be new to your client. It was to ours. Ensuring our client’s expectations are set and met throughout the process is critical. So we make sure to kick-off and review each sprint together. Participants of a sprint kick-off review a relevant set of use cases, breakpoints, and technical integrations with the client. The Experience Development Team then white-boards a user interface that supports the use cases at each breakpoint.  From there, the design is quickly prototyped in the browser. After each sprint, we hold a review with the client, to look at the working prototype; making sure that the relevant use cases are supported. Additional optimization and issues are then identified, captured, and prioritized.

Conclusion –

Agencies need to understand that RWD isn’t a “magic bullet”. Clearly, RWD works best when a client’s web content needs to be consistently delivered across many diverse, connected devices. RWD doesn’t work when there is a strong use case for a platform-specific solution. That is, there is still a need for native mobile applications with functionality that can only be achieved with access to device-specific features (a mobile camera, accelerometer, GPS, etc.). Therefore, RWD should be proposed to clients, only after careful consideration of their business needs, as well as the likely behavior of their end-users.