Responsive Design Overview, Resources and Tools

Jun 11, 2013

Responsive Web design refers to a fluidly constructed Web page layout that scales from handheld device displays to large, high-resolution computer displays using flexible typography, flexible images, fluid grids, and CSS3 media queries.

For years, most Web teams designed for the desktop. Branding, navigation, work flows – the overall look & feel of online applications – were all considered reasonable areas to distinguish one’s online presence from others. Things have changed so dramatically over the past few years that starting with the desktop may now be the backwards way of creating a web site. We have to be able to think in systems. Mobile is a helpful wedge there, because you just see the panic on people’s faces when they say, “What do you mean, I have to support the iPhone and Android and Blackberry and tablets … and is this ever going to get better?”

No, it’s not going to get better. The interactive landscape is increasingly complex. It includes a vast array of mobile devices (feature phones, smartphones, tablets), highly-specialized devices (eReaders, TVs, Internet of things) and more traditional digital devices (desktops, laptops, netbooks). Plus, we don’t know what’s right around the corner. So the question becomes clear: How do we design for all these devices? The only way we’re ever going to support all those things is if we have a reusable content store that is flexible, intelligent, and nimble.

Read: Small, cheap devices will disrupt our old-school UX assumptions (The Coming Zombie Apocalypse) which discusses how the coming wave of cheap electronic devices will end up disrupting the old user experience assumptions.

Why Use Responsive Web Design?

From a mobile user experience perspective, forcing the use of separate mobile versions of websites or mobile apps presents a problem, specifically with the consistency and continuity of following hyperlinks. Often links to desktop web content break when a mobile redirect is inserted without the intelligence to find the equivalent mobile version of the content in question. Worse, if a mobile user tries to access a hyperlink and is presented instead with a full screen advertisement to go to their app store and download the mobile app for the organization they’re trying to get at, they are inconvenienced with either having to go through all the downloading and installation steps and waiting, or else they are going to have to click out of the advertisement and hope that they can still access the content they intended to see. Why not just deliver the content to the user in a tidy mobile format with a single URL that is intelligent enough to reformat the layout based on the dimensions of the screen being used to access it?

In addition to the user experience considerations, mobile versions of websites and mobile content apps are arguably an unnecessary additional expense and effort to maintain, and mobile applications developed using native APIs such as Objective-C require additional skills to develop. Moreover, the development team is subject to the whims of the approval process of the app store in question to publish and distribute their apps and any maintenance updates.

Finally, using responsive design techniques means that your web layout stands a stronger chance of being able to adapt to the wide range of screens currently available, as well as future devices that haven’t hit the market yet.

Future-friendly Theming

  • The base content and default presentation are mobile, and optimized for the very simplest devices first. We’ve defined this as ‘basic’ support.
  • Devices with small screens and media query support are served an enhanced layout—and occasionally—more complex content. We’ve called this ‘mobile’.
  • Finally, the layout and content are smartly enhanced to reflect the ‘desktop’ context.

Images

Tables

Tools

Other Responsive Resources

Originally posted by Jacob Parcell on Jun 11, 2013

GSA | Washington D.C.

Jun 11, 2013