What Is Responsive Web Design?

Posted by in Design, Mobile Devices, Software Development, UX Design, Web Development

If you have paid any attention to the world of web design lately, you’ve likely heard of responsive web design.

It’s the new Big Thing, and as such it’s seen its fair share of hype as well as backlash. What designers need to understand about responsive web design is that it’s essentially a screen-size solution, not necessarily a full mobile solution.

Desktop Only is no Longer Enough… but Neither is Desktop and Mobile

A couple years ago I might have started a blog post like this by saying “mobile usage is on the rise,” but today it’s much more than just that. While the usage of smartphones has indeed grown by leaps and bounds, people today are using a multitude of devices to connect to the web. Smartphones and tablets are just the tip of the iceberg: users browse the web on e-book readers, smart TVs, video game consoles, portable video game players, even car dashboards and smart refrigerators. The number of possible screen sizes is extensive, and the number of devices that connect to the internet is growing by the day.

It’s clearly not enough to just make a desktop-optimized website anymore. A desktop site might render perfectly on an iPhone, but the user will be forced to use pinch and zoom maneuvers to be able to read and navigate. In the past, web designers have used server-side device detection to detect a mobile phone browser and serve the user a separate, dedicated mobile website. Relying on user agent sniffing is not perfect, however, and with a growing number of screen sizes, a “mobile” site is not always the right solution for the user. If you’ve ever been forced to use an iPhone-optimized site on an iPad, with no option to view the desktop version, you know what I mean.

Responsive web design is a new tool which attempts to address this problem.

What is Responsive Web Design?

Responsive web design is a technique for adapting web layouts to fit various screen sizes. Responsive designs use fluid (percentage-based) layouts, fluid width images, and CSS media queries to achieve a design that is ideal for the user at any screen width, whether it’s a smartphone, a desktop computer, or a big-screen TV.

Unlike separate “mobile” sites, a website that utilizes responsive web design serves up the same site to every device, but formats its layout to fit the screen of each device. For example, a sidebar might move from the left side of the main content on a desktop browser, to below the main content on a mobile device. Or a grid of images might be seen on a desktop browser with four images per row, but reformat on a smaller screen to two images per row. One of the first sites on the web to do this was Simon Collision’s website. If you’re reading this on a desktop browser, visit Colly’s site and resize your browser window to see it change. A device with a small viewport width, like an iPhone, will load the small-width version by default, rather than showing the user a shrunken-down website and forcing them to zoom in.

This reformatting with the magic of media queries. Media queries allow a designer to specify style rules that are only triggered when the browser detects a certain screen size. This technique can be quite powerful, essentially allowing a designer to craft an entirely different user experience depending on the size of the user’s browser window.

Since Ethan Marcotte’s seminal article on responsive web design nearly two years ago (which was expanded into a book), a slew of redesigns have hit the web, taking advantage of this new and exciting technique. Some notable examples include:

Why Responsive?

The reasons for using responsive web design are many. A designer can craft a mobile version of a website without having to build a separate code base for each target device. Depending on the complexity of the site, it can potentially be a quick and easy way to optimize layout for smaller screens.

Since media query-based style changes are dependent only on viewport size, there is no need to rely on user agent detection to detect specific devices. Making a mobile site work smoothly via user agent detection can be tricky, and when it goes wrong, the results can be disastrous. Responsive web design will theoretically work on any device, at any screen size, even the ones that don’t exist yet.

In addition, one single URL for a web page can be used across devices, rather than redirecting to a “mobile” subdomain, which can be beneficial for SEO as well as bookmarking, link sharing, and usability.

So…Great, Let’s Use it for Everything!

Not so fast. Like I mentioned earlier, responsive web design is a small-screen solution, not necessarily a full mobile solution. What’s the difference? Optimizing a website for a mobile device means more than just adjusting the layout to its screen. Other considerations include bandwidth (mobile users may be on a slow connection, and may also have a monthly bandwidth limit imposed by their service provider), user context (a user on a mobile phone may want different information than a user on a desktop computer), and various elements that might not resize easily, such as graphs, data tables, ads, and 3rd-party widgets.

User Context

A mobile context means more than just layout. A user on a mobile device may want different things than a user on a desktop. However, we shouldn’t make assumptions about user context. Just because a user is viewing a website on a mobile phone, it doesn’t necessarily mean they’re running down the street in a hailstorm trying to catch a cab, and all they need from the website is the business’s address and phone number. Hiding content from users based on assumptions about what they might want is a bad idea. That said, if the website in question is more of a web app, or if we want to explicitly tailor the mobile experience separate from the desktop/laptop/tablet experience, then it may be better served by a separate mobile site.

Bandwidth

Limited bandwidth is always something to take into consideration when optimizing a site for mobile, and it can’t be forgotten when building a responsive site. A slideshow with half a dozen splashy, 1000px-wide images might look great in a desktop view, but on a 320px-wide screen, even if the CSS is shrinking the dimensions of the images, all those huge image files are still being downloaded, potentially over a relatively slow mobile connection.

There are a number of attempts at solving this issue, such as Adaptive Images, Sencha.io Src, and a proposed <picture> element. None of these solutions are perfect, but they’re a start.

Of course, a small screen doesn’t always equal a slow connection, and vice versa. Ultimately, a web designer should always be aware of site speed and performance, regardless of the user’s screen size. The faster a site can load, the better, whether it’s on a phone in a hailstorm, or on a desktop at home with a cup of hot cocoa.

RESS to the Rescue?

A new technique combines responsive web design with server-side device detection. It’s called RESS (Responsive Design + Server Side Components). Rather than using server-side detection to redirect the user to a wholly separate site, it uses responsive web design to serve the same URL to each device, while using server-side detection to serve up various components of the site for differing devices. For example, a site may present a separate version of its navigation for small-screen devices, or a more optimized version of a big splashy slideshow. The same pitfalls of user-agent detection still apply, but it does help patch up a lot of holes that both responsive design and dedicated mobile sites leave open. If it’s not enough to just optimize images with your responsive site, then RESS may be worth looking into.

Think About the User Before Diving In

The choice to go with a dedicated mobile site with server-side detection, responsive web design only, or a combination of the two will be different for every project. Consider the users of the site and what they want. If you can, make these decisions based on hard data rather than trying to make assumptions. Additionally, remember that screen size, bandwidth, and device capabilities are all separate things.

A Brave New World

A “website” is no longer something that is 960px wide and viewed on a desktop by default. In truth, it never was. John Allsop’s article The Dao of Web Design urges web designers to “not hold fast to shapes,” as expressed in the Tao Te Ching—and that article was written 12 years ago.

The web, by its very nature, is fluid, flexible, adaptable, and not held down by the constraints of print. It’s a medium that is fully alive, and responsive web design recognizes that. We shouldn’t think of responsive web design as a way to “make a mobile site.” It’s a way to design for the web, the way the web is today, and the way it will be tomorrow.

Further Reading

Mightybytes is a Chicago-based digital agency and Certified B Corporation. Connect with us on LinkedIn or get in touch via our contact form.