A Website That Fits Its Context: Understanding Responsive Design
- Date:
- Jan. 12, 2012
- By:
- Dustin Dahlberg
- Topic:
- Design
As the web evolves and more people begin accessing websites using multiple devices, web designers are having to become more adept at helping the form follow function. These changes in web design have resulted in the creation of Responsive Web Design.
A Brief History
Since the beginning of the graphical web, designers have been creating websites to function within a "context": the screen or device on which a person would view or interact with the web. That context has changed over time: from the early years, where a monitor's pixel width resembled the specs of a modern smartphone, to the myriad of devices where users can explore the web today.
For most of the web's history, however, contexts have been fairly uniform, with designers really only accounting for the smallest, most commonly used screen size so that the web users would have a quality web experience. We worked with "what we had" and we designed for a single context, much like designers would do with print design.
Fast forward to 2012. Despite a website having multiple contexts, from the number of varied desktop screen sizes to the growing number of smartphones and tablets, the web design community has largely stuck with this way of thinking about design—design for one context.
Enter Ethan Marcotte
Three years ago, a web designer named Ethan Marcotte wrote an article about the fluid grid. This article explored design that changed depending upon the context. It's this article that eventually evolved into his defining "Responsive Web Design".
Essentially, a fluid grid is a layout created by making columns of content that have widths determined by a percentage of the browser window. This means that as the size of the "context" (in this case, the browser window) changes, so does the content.
This idea--of having a design that fluidly changed to match the context within which it was viewed--meant that regardless of the device, a web user could see the same "essential" content on a website page without losing the consistency of style or brand. This was truly a revolutionary yet needed concept.
HTML5, CSS3, and Media Queries Explained
Over the last few years, the W3C (World Wide Web Consortium) has been developing HTML5 and CSS3, markup languages for the web. Web designers rely on markup languages to turn design files into interactive, functional design on the web. Modern browsers support these new standards to varying degrees at this point, but when it comes to changing a design depending on its context, the other important element to consider are media queries.
Media queries allow web designers to change out the CSS depending on screen size, browser window size, or even the device being used to view the site. Combining media queries with the fluid grid gives us web designers the ability to create websites that truly respond to its context without sacrificing the user experiecne.
Since responsive design—even for print design—is user-centric, your web users will be able consume or interact with your content easily and efficiently. As web usage via mobile and tablet devices continues to grow, content needs to be as accessible as possible. Therefore, it becomes vitally important to design websites that lay out the content for easy consumption no matter the context.
What About a Mobile Website?
Designing a separate mobile website version of any desktop-accessed site is certainly an option, and if you have recently done a website redesign, you really should consider doing a mobile site soon.
However, consider a responsive design, especially during a website redesign process. First, you will only need to create the content on one site (rather than for a desktop and mobile versions), since having a responsive design keeps your core content available. Also, creating a responsive design cuts down development costs. Since HTML and CSS are doing all the heavy lifting, you only need a single backend structure for your website, instead of having to build new pieces into the backend just for "mobile", or even an entirely new backend.
It's important to note that there are websites that need different content depending on the context, especially if users of your mobile content expect different types of content or only certain content pieces to be available from a mobile device. In this case, carefully consider your content strategy for the different platforms on which your content is being viewed.
Content is King, but Context is Queen.
Just because your website has a spiffy new responsive design doesn't guarantee it will be successful. Unless the content can be consumed in every context, your website won't succeed. This is where your content meets your understanding of your audience:
- Will our users want to read this on their smartphone?
- Will most people want to, or be able to, fill out this form on their mobile device?
- Will their eyes gloss over when they see this page and move on to playing Angry Birds instead?
- How easy is it for our users to access the content they want to find?
Starting with the mindset of "content first on mobile" will help ensure that a responsive design will better succeed.
The strength of responsive design is that it also prevents us from content bloat on the desktop site, as it aids a website's success in all contexts.
The ultimate goal when designing a successful website is to create a quality user experience no matter where it is being viewed. This is why web agencies—and web clients—need responsive designs.
See Responsive Design in Action
Here are some websites created with a responsive design. Try viewing these on different contexts or devices to see how they flex:
Ethan Marcotte's new book Responsive Web Design is now available for purchase.
Food for Thought:
- How does design impact how you interact with websites: on your computer or mobile device?
- What is the one thing you want to tell web designers about what you "see" on the web?