What Is Responsive Web Design? Find Out Everything Here.

Learn how responsive websites are coded to fit on any screen or device.

Brenda Barron
Last Updated on August 5, 2020
Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

Responsive web design is an overall approach to building websites that encompasses web specification standards and flexible design models. The philosophy behind it stems from the desire to make the web accessible to as many devices as possible.

Responsive design ensures that a website displays properly on desktops and mobile devices like smartphones and tablets. This relatively simple idea has spawned an entire generation of frameworks and tools like Bootstrap that automate much of the grunt work involved in designing responsive sites.

What Is Responsive Design?

Around the late 2000s, web designers faced some new challenges when smartphones started to dominate. An explosion of different devices hit the market, with the first-generation iPhone leading the way. Web designers were walking through a digital minefield of cross-compatibility problems when it came time to building websites. They had to deal with inconsistencies with window width, screen resolution, different input devices, and numerous other idiosyncrasies that took forever to fix.

This was good money if you were getting paid hourly, but wasteful and inefficient in terms of production.

In response to this problem, the open source community of software engineers and designers got together to create a set of standards to achieve better cross compatibility. Those standards helped shaped best industry practices, which include responsive design. Collectively, these methods and specifications are known as responsive web design.

The actual term “responsive web design” was coined by Ethan Marcotte on his blog, A List Apart, in 2010. He was more than just a PR spokesman for the movement, however; he also played a major role in developing the best practices for it.

Do I Need to Use JavaScript in a Responsive Web Design?

'Good Bye' in JavaScript on a whiteboard

You don’t need JavaScript to create a responsive design website. Clean, functional responsive design is possible with nothing more than HTML and CSS. That said, JavaScript will make everything a lot nicer, simpler, and more user-friendly.

There’s no shortage of experts on discussion boards who’ll tell you to avoid using JavaScript with your responsive site because not everyone has it enabled. The truth is, however, that only about 1% of all users disable JavaScript in their browsers.

Beyond stats, just look around the web a bit if you’re still less than convinced. High volume sites like BBC Sport and CNN use JavaScript for their responsive design, and they don’t even provide non-JavaScript fallbacks.

For proof, just navigate there, turn off JavaScript, and refresh the page.

How Responsive Design Works

Responsive design enables us to optimize the presentation of a web page for many devices with a single piece of source code. This allows you to create similar experiences across different devices, or tailor a web page for a specific device.

There are three main technical aspects of responsive web design:

  1. Fluid Grids
  2. Flexible Media
  3. Media Queries

Fluid Grids

Fluid grids enable your design to adapt based on the user’s hardware and software. The main concept behind a fluid (responsive) grid is that the layout adjusts according to the client’s browsing environment.

Methods used to create a fluid grid involve sizing content with relative (i.e. percentage) units coupled with the use of CSS media queries. Fixed grids, on the other hand, use absolute units such as pixels or centimeters.

Flexible Media

Example of a responsive website on a phone, tablet and computerAnother important part of responsive web design is getting the media to adapt to the browsing environment. Some of the elements on the page may need to be resized, or removed from the display completely for certain devices. The resources below show you how to use tags and relative units for responsive media elements.

  • CSS Box Model: Understanding the CSS box model is essential to placing content. This is the official documentation of the box model.
  • Fluid Images: A very helpful method for creating images that automatically resize based on context.
  • W3Cs CSS Units: The official reference on units.
  • CSS Units from Mozilla: A good introduction to values and units in CSS from the Mozilla Foundation.
  • Viewport Meta Tag: learn how to use the viewport meta tag to optimize the display for mobile devices.
  • Responsive Typography: get more control over the typography with this type of configuration.

Media Queries

Fluid grids don’t address all of the problems posed by the growing number of different screen sizes:

  • On smaller screens, the layout may appear crowded
  • On wider screens, the layout may appear distorted.

In response, the W3C introduced the media query as a component of CSS3 to help fill in the gaps. Today most browsers support media queries.

Media queries determine information about the browsing environment, such as the device, screen resolution, and viewport size. The media query makes it possible to do things like adapt the typography based on device and screen resolution.

Resources

HTML5 on computer screen

Below are a helpful set of tutorials, reference articles, books, and tools that offer deeper insight into responsive web design.

Tutorials

  • Responsive Design in 3 Steps: The simplest and clearest responsive design tutorial on the web. It’s the one to read if you’re just looking to see the bare bones of what responsive design is all about and how it works.
  • Responsive Web Design for Beginners: Helpful, free articles. You will find many other tutorials on this site as well.
  • Guidelines for Responsive Design: A great set of design guidelines that are as relevant today as they were when they were written.
  • Sizing Images with Responsive Web Design: Another simple tutorial on sizing images with an interactive demo.
  • A Guide to Flexbox: A very easy to understand guide to flexbox, a CSS layout module that enables you to build responsive layouts.
  • Progressive Enhancement: Progressive enhancement is about enriching the experience with features that are specific to a given user interface (phone, desktop, etc).
  • HTML5 & CSS3 Tools: A live HTML5 and CSS3 playground. Have fun!
  • Responsive Web Design: This tutorial from Yello VP Shay Howe is long, clear, and comprehensive. It’s the lesson you want if you understand the basics of responsive design and want to learn it fully.

Articles

Books

Tools

Below are tools that will make development a lot easier. We provide responsive grid frameworks as well as testing tools. With them, you should be on your way.

Responsive Grid Frameworks

  • Bootstrap: An extremely popular framework in HTML, CSS, and JavaScript for building mobile first, responsive design websites.
  • Foundation By Zurb: Billed as the most advanced responsive framework in the world. They’ve got an impressive portfolio and great, simple documentation.
  • Skeleton: An extremely simple responsive boilerplate you can either download or copy/paste straight into your project. It’s great for small projects.
  • Pure: A single responsive grid or framework, but a sort of library of CSS modules developers can sample and use in their web projects. It’s built around minimal CSS with a mobile-first bent.
  • Montage: Responsive template for photography websites.
  • Susy and Breakpoint: When used with Breakpoint, Susy can help you build a responsive site fast, with very little coding and a whole lot of design options.

The responsive website for the Boston Globe

Responsive Design Testing Tools

Responsive Design Improves Accessibility

Responsive design is a lot like solving a puzzle (or trying to pack your overhead compartment bag). You’re organizing all the elements so they can be flexibly rearranged yet remain functional on multiple screen resolutions. And that, dear readers, is pretty impressive.

Read previous post:
web colors
Web Colors: How To Use Color In Your Website [2020 Edition]

When the HTML specification was originally defined, all of the colors in a web page were controlled by HTML. Now,...

Close