What Is Responsive Web Design?

Responsive web design is an approach to website building that provides an optimal viewing experience across a wide range of devices including desktops, laptops, smartphones, and tablets. A responsive design uses media queries to determine the resolution of the device the site is being served on. Flexible images and fluid grids then size correctly to fit the screen.

A Brief History of Design Approaches and Devices

Not long ago websites could be built at a fixed width with the expectation that all users would get a fairly consistent experience. That changed with the development and widespread use of smartphones and tablets.

Some of today’s most popular mobile devices have displays that range from about 320px to 768px wide. A website that was built to be viewed optimally on a 1024px or larger screen doesn’t perform well on most mobile devices. It simply wasn’t made to.

responsive design device resolution

A person viewing a fixed-width site on a mobile device will see a horizontal scrollbar and clipped content—not an optimal viewing experience, and the very problem that responsive design addresses head on.

The web design community first addressed the proliferation of mobile devices by creating separate websites for desktop and mobile devices. That has proven to be a less-than-ideal solution due mainly to the cost of creating, maintaining, and synchronizing the content of two sites.

In most cases a better solution is to make one website that works well on every device. Enter responsive web design. The primary benefit is obvious: Only one site is needed because it adapts to provide an optimal viewing experience on all devices.

See for Yourself

This site was built using responsive design so (assuming you are using a desktop browser) try making the browser window smaller, particularly the width. As you reduce the width of your browser window a few things happen:

  • Text and images adjust to fit the window
  • The main menu transforms into a mobile menu button
  • The Articles menu on the right moves to the bottom of the page
  • The two columns in the footer stack to form one column

Notice one thing that didn’t happen—the appearance of a horizontal scrollbar. The website responds dynamically to the size of the screen (or browser window) so that the entire page can be viewed by scrolling in just one direction.

Is Responsive Web Design Right for Your Site?

Unless you have a compelling reason for displaying different content to mobile and desktop users, a responsive site is probably the best approach for your site.

Google recommends responsive web design, naming three key advantages:

  • Using a single URL for a piece of content makes it easier for your users to interact with, share, and link to your content, and a single URL for the content helps Google’s algorithms assign the indexing properties for the content.
  • No redirection is needed for users to get to the device-optimized view, which reduces loading time. Also, user agent-based redirection is error-prone and can degrade your site’s user experience.
  • It saves resources for both your site and Google’s crawlers. This improvement in crawling efficiency can indirectly help Google index more of the site’s contents and keep it appropriately fresh.

Responsive web design has become more important now that mobile traffic accounts for more than half of all internet traffic. It is an attractive and cost-effective alternative to having a separate mobile website.

Summary

The mobile Internet revolution is here. As smartphone and tablet adoption rapidly increases, so does the importance of having a mobile-friendly website. The array of devices, screen sizes, and screen resolutions is constantly expanding, so creating a different version of a website to target each device is not a practical way forward.

Responsive web design provides a single solution that allows websites to look great on phones, desktops, and everything in between. It responds to various screen sizes and provides the best user experience for today’s and tomorrow’s devices.