Defining Responsive Web Design

The qualities and best practices that help create mult-device friendly websites

A variety of mobile devices
A variety of mobile devices. Jeremy Girard

There was a time when we thought that people only visited websites using large-screen, desktop computers. That day is no more. In fact, that day has been gone for quite some time.

In the early days of web design. most websites of the past were designed for the screens that would be found with desktop computer. On today’s Web, however, the wide range of devices and screen sizes being used to access those sites means that a “one size fits all” solution is no longer viable.

Websites need to accommodate screens from the very large to the very small with a layout and experience suited to each. There are a number of ways that a site can be made to include "mobile support", but the industry best practice is with an approach called “responsive web design.”

The 3 Qualities of Responsive Web Design

Responsive Web Design as we know it was first presented by Ethan Marcotte in an article published by A List Apart and later in his book “Responsive Web Design”. Ethan defined this approach as having three distinct qualities:

  1. A flexible, grid-based layout – instead of having fixed pixel sizes in a design, layout areas like columns of content are built with percentages so that while their size may change, their proportions to each other will remain.
  2. Flexible images and media – similarly, images and media like video content can be sized with percentages instead of fixed pixels widths. This means that images can scale with a website for different screen sizes.
  1. Media Queries – part of the CSS3 specification, media queries allow layout changes to be dynamically made to sites when certain conditions are met. For instance, once a screen’s resolution falls below a certain point, content presented in columns laid out side by side can be changed into one single column with the content presented on top of each other.

    With this approach, a web designer could develop one website whose layout would automatically change based on a visitor’s screen size.

    An Improvement Over “Mobile-Only” Websites

    Prior to the introduction of responsive web design, a separate, “mobile-only” website was the solution that many companies turned to in an effort to provide a better user experience to customers who were increasingly turning to mobile devices. While this approach was better than doing nothing (and delivering the large screen version of the site to those small screen devices), there were still many drawbacks to using mobile-only websites, including the fact that you now had two distinct websites to maintain. With a responsive website, however, there would only be one website to develop and manage and that site could accommodate large screens, small screens, and those that fell between those extremes.

    Filling In the Gaps

    Filling in the gaps between the large screens that the normal version of the site would be designed for and the small screens that the mobile-only website was meant to accommodate was another benefit of taking a responsive approach. The rise of tablet devices showed that there was a need to consider “medium sized” screens in addition to small screens (mobile phones) and large screens (desktops).

    Since responsive websites are fluid in their layout, they can fill in these gaps while still giving companies a single site to manage. The alternative would be creating numerous site versions, each targeted to a different general screen size and each needing to be maintained separately. 

    Today’s Best Practice

    Initially, responsive web design was embraced by early adopters – mainly web designers who wanted to try this new approach on their own sites. Slowly but surely, however, it has become an industry-wide best practice. Today, Google lists responsive web design as their recommended approach to supporting different devices and screen sizes. They also use responsive web design and “mobile friendliness” as one of the factors they weigh in their ranking algorithm, so multi-device support does not only help visitors to a site be able to use in across a range of devices and screen sizes, it also has a positive impact on your overall search engine rankings.

    Challenges

    While responsive web design may be a current best practice and a powerful way to build websites for a multi-device audience, this approach does come with some challenges. Website performance becomes more important than ever and common website elements like images and navigation have to be reconsidered in order to work effectively in a responsive setting.

    Edited by Jeremy Girard on 1/16/17

    Format
    mla apa chicago
    Your Citation
    Girard, Jeremy. "Defining Responsive Web Design." ThoughtCo, Jan. 16, 2017, thoughtco.com/responsive-web-design-3469984. Girard, Jeremy. (2017, January 16). Defining Responsive Web Design. Retrieved from https://www.thoughtco.com/responsive-web-design-3469984 Girard, Jeremy. "Defining Responsive Web Design." ThoughtCo. https://www.thoughtco.com/responsive-web-design-3469984 (accessed November 19, 2017).