Since the birth of the Web in the 1990s, there have been a few things that we as web designers and developers thought we could take for granted, and therefore we built websites for what we thought were “typical” users. We designed our websites for the most common web browsers and the most typical screen resolutions (usually 1024×768). At the height of our insanity, we went so far as to proclaim the specific browser and screen resolution that our visitors should have. However, with the proliferation of smartphones, tablets, “ultrabooks,” and other devices, we’ve finally come to our senses and have realized that there is no “typical” user. We now know that we have to build smarter websites that look great on any device, using any web browser. We have to be responsive!
What is Responsive Web Design?
According to Wikipedia, Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).
Ethan Marcotte first coined the term “responsive web design” in his seminal article on A List Apart. He laid out the theory behind this “new” approach and provided code examples that established the foundation for building websites that will work well on any device. By making your web design flexible and using CSS media queries to determine the screen and window size, orientation (portrait like a smartphone held normally, or landscape like a typical computer monitor), display resolution, and other characteristics of the user’s device, we can design websites that reformat themselves, help with readability and improve the overall user experience. A number of high profile websites have launched responsive redesigns since Ethan’s article was published in 2010, including The Boston Globe, Microsoft, Starbucks, and Harvard University. To see how responsive designs work, open any of these sites in your web browser on your computer and slowly resize your browser window.
Why is Responsive Web Design Better?
Most websites today solve the mobile vs. PC dilemma by creating two different websites optimized for each type of device and directing users to each site based on the type of device they are using. Often, the mobile website is a stripped-down version of the main website with access to only some of the site’s content and none of the bells and whistles. Users are given a link so they can switch between the two sites in case the information they want isn’t available on the mobile site or if they run into an issue and are directed to the wrong site.
Having a separate mobile site causes a litany of problems including:
- Mobile users are often given a “crippled,” less functional experience with less content.
- Mobile devices are not all created equal: they have a wide range of screen sizes and capabilities.
- Tablets don’t fit neatly into the mobile vs. PC paradigm; often they have screen sizes similar to PCs, but they function like mobile devices.
- Users often get directed to the “wrong” website either because they opened a link to the mobile site from their PC (or vice versa), or because the website failed to correctly detect the type of device.
- Companies have to maintain two versions of their websites.
Responsive web design solves these problems by eliminating the second website and by optimizing the layout based on the capabilities of the device instead of trying to guess the type of the device. This means no more trying to guess if the user is on a smartphone or tablet or PC, and no more links to content that doesn’t exist on one version of the site or the other. There is only one website, and it looks great on any device.
Finally, responsive design isn’t just about mobile. Many users have larger-than-average screens on their PCs. While many websites will stop resizing once the window reaches a certain size, a good responsive design will take advantage of all of the screen real estate available. Smashing Magazine, a website for web designers and developers, does a good job of filling even the largest screens.
Building responsive websites requires designers and developers to think differently about what we create. Steven Allsop said it best in his classic article, “A Dao of Web Design:”
“The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must accept the ebb and flow of things.”