Responsive Web Design

Responsive Web Design (RWD) is a technique used to craft a Web site using both HTML 5 and CSS to enable a site to respond to the abilities of a users’ device based on screen size, platform and viewing orientation. At its essence this means implementing a mix of flexible layouts, images and the use of CSS media queries.

If you have experience with designing flexible layouts and the use of percentages or ems for widths and fonts, and a solid understanding of CSS, you have the basic skill sets for RWD. I suspect that if you have experience with the design of accessible sites, you will have a head start on others that do not. What has turned out to be a surprise, has been the indirect benefit of understanding the key points of designing for accessibility and the applicable use of some of the conventions of accessible design.

RWD is not simply limited to rescaling images or providing layouts that can be accommodated by different device displays. It involves looking at the needs of the users on the various devices and planning for their intentions. Users accessing a site on a computer with a broadband connection have fewer burdens when browsing for content or navigating through information architecture complexities – a user on a mobile phone has a greater need for speed and direct access due to lower bandwidth and costs associated with usage.

ADVERTISEMENT

Designing for multiple devices necessitates an understanding of these constraints if the end result is to provide a good user experience across platforms. Good use of RWD may include changes within the overall information architecture of a site. Planning in advance for the needs of various device interfaces includes investigation of the overall organization structure, navigation systems, and searching methods. By understanding the strengths and limitations of device types we are able to create successful cross-platform Web content.

The W3C states:

“The web's usefulness and growth depends on its universality. We should be able to publish regardless of the software we use, the computer we have, the language we speak, whether we are wired or wireless, regardless of our sensory or interaction modes. We should be able to access the web from any kind of hardware that can connect to the Internet – stationary or mobile, small or large.¹ ”

Device independence is at the heart of accessible design as well as RWD. I have found that much of the process and logic used when designing a site to be accessible is directly applicable to Responsive Web Design as well. A number of the barriers that mobile users face are similar to those experienced by people with disabilities: ²

• Perceivable - Information and user interface components must be presentable to users in ways they can perceive.
• Operable - User interface components and navigation must be operable.
• Understandable - Information and the operation of user interface must be understandable.
• Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

RWD is seems to be a big win for accessibility and hopefully will prove to make the Web more universal and accessible for those with disabilities as well as to the variety of devices in current and future use.

Responsive Web design is not a blanket solution for every Web site or Web application, but it does seem to be going in direction that supports the Web’s various users and access more than ever before.

¹ https://www.w3.org/standards/agents
² https://www.w3.org/WAI/mobile/experiences