What is Responsive Design? (Explainer Video and Infographic)

It’s taken a decade for responsive web design (RWD) to go mainstream since Cameron Adams first introduced the concept in 2010. The idea was ingenious – why can’t we design sites that adapt to the viewport of the device it’s being viewed on?

What is Responsive Design?

Responsive web design is a design approach that ensures that a website provides an optimal viewing experience on any device, regardless of the screen size or resolution. It involves using flexible layouts, grid-based layouts, and media queries to create a site that adjusts to the size of the screen it is being viewed on. This means that a website designed with responsive web design will look and function well on a desktop computer, a tablet, or a smartphone.

In other words, elements like images can be adjusted as well as the layout of those elements. Here’s a video that explains what responsive design is as well as why your company should be implementing it. If you’re getting a new site design or web application developed, responsive web design is a must, not an option, given that over half of all web traffic comes from mobile devices that have varying viewport widths and heights.

Responsive design is also optimal for web designers, who don’t have to build independent experiences that are unique based on the device or viewport. Responsive web design can be accomplished using CSS.

Responsive Design CSS Viewport Queries

Here’s an example of a stylesheet that is adjusting the font size based on the viewport using a media query:

/* Default styles for all devices */
body {
  font-size: 16px;
  line-height: 1.5;
}

/* Style changes for devices with a viewport width between 600px and 900px */
@media (min-width: 600px) and (max-width: 900px) {
  body {
    font-size: 18px;
  }
}

/* Style changes for devices with a viewport width between 900px and 1200px */
@media (min-width: 900px) and (max-width: 1200px) {
  body {
    font-size: 20px;
  }
}

/* Style changes for devices with a viewport width greater than 1200px */
@media (min-width: 1200px) {
  body {
    font-size: 22px;
  }
}

Browsers are self-aware of their size and they load the stylesheet from top to bottom. By querying the applicable styles for the size of the screen, you can set specific styling elements for each minimum and maximum device width. This doesn’t mean you have to design different sites for every size screen, you just need to shift the elements necessary using the media queries.

Operating with a mobile-first mentality is the baseline standard today. Best-in-class brands are thinking not just about whether their site is mobile-friendly but about the full customer experience.

Lucinda Duncalfe, Monetate CEO

Here’s an infographic from Monetate illustrating the potential benefits of creating one responsive design for multiple devices:

Is Your Site Responsive?

One simple way to see if your site is responsive is to just grow or shrink your browser window to see if the elements move based on the browser’s width.

For more precision, point your Google Chrome browser to your site. Select View > Developer > Developer Tools from the menu. This will load a bunch of tools in a panel or new window. Click on the small icon to the left of the Developer Tools menu bar that looks like a mobile and tablet icon. You can select some standard devices and even change whether you wish to view the page horizontally or vertically.

You can use the navigation options up top to change the view from landscape to portrait, or even select any number of preprogrammed viewport sizes. You may have to reload the page, but it’s the coolest tool in the world for verifying your responsive settings and ensuring your site looks great on all devices!