When I began designing websites in 1997, the average Internet user was dialing up on a 28.8k modem and viewing webpages with a Netscape browser on a 15-inch monitor with a 256 color palette. With those limitations we understood the most important aspect of web design was to create a positive user experience.

Were users able to navigate quickly to the information they were seeking? Did pages load fast enough? Did the site render properly in different browsers on a PC or a Mac? We knew users were quick to abandon poorly designed websites.

In 2000, with the release of browsers that supported the use of Cascading Style Sheets (CSS), designers gained more control of the user’s experience. CSS allowed designers to control color, font, text alignment, size, borders, spacing, and layout with a single document that applied to all of the pages of a website. With the advent of CSS, the philosophy of web design began to evolve.

In April of that year one of the most influential articles on web design appeared, “A Dao of Web Design.” In the article, web designer John Allsopp wrote these prophetic words:

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.

In 2008, a study by ABI Research predicted that mobile web browsing was poised to grow from 76 million smartphones in 2007 to nearly 700 million by 2013. (ABI Research recently upped their projection to 1.4 billion smartphones in 2013.)

To eliminate the need for mobile viewers to pinch, zoom and scroll to view a webpage, designers began creating separate mobile websites to fit the smartphone screen. While solving the problem, designing a separate website was not an ideal solution.

In 2010, Apple launched the iPad and sold 7.3 million devices that year. During the last quarter of 2010, smartphones passed PCs in global sales. That same year, web designer Ethan Marcotte published an article entitled Responsive Web Design. Harkening back to Allsopp’s “Dao of Web Design” article he wrote:

Rather than tailoring disconnected designs to each of an ever-increasing number of web devices… We can design for an optimal viewing experience, …to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design.

In 2012, the World Wide Web Consortium, the international organization that develops protocol and guidelines for the Web, recommended media queries as a new standard module for a CSS. With the use of media queries in CSS the designer can control how content will render in different web devices. Media queries is the cornerstone technology of Responsive Web Design.

2013 was named the Year of Responsive Design by Mashable, the largest online technology news site.

In simple terms, a responsive web design uses “media queries” to figure out what resolution of device it’s being served on. Flexible images and fluid grids then size correctly to fit the screen.

The benefits are obvious: You build a website once, and it works seamlessly across thousands of different screens.

Much like when CSS was first introduced, best practices and protocols are still evolving for responsive web design. Issues with images, external advertising and download speed are just a few of the obstacles to overcome. Converting a website to responsive web design typically requires a complete overhaul. Planning and developing a custom responsive website from scratch can be complex and time-consuming.

There are out-of-the-box responsive web design templates for nominal fees and templates are also available in WordPress and Drupal. For designers, there are a number of tools to create a responsive website. Popular tools include development frameworks like Bootstrap, Foundation and Skeleton. This week saw the official beta launch of Webflow, a visual editor that allows you to publish a responsive website directly to the web.

As it was in 1997, the primary goal for web design remains the same, a positive user experience. Responsive web design, for now, is the future.

NST designs, programs and develops content for websites for many of our clients. Do you have any questions about responsive web design? We would love to help.