Last updated August 24, 2017

Responsive web design, originally defined by Ethan Marcotte in A List Apart, is a set of design approaches and development best practices that ensures that a web design accommodates, adapts, or responds to the many types and sizes of devices a person may use to view a web site. A responsive web design approach can apply to layouts, font sizes, and images.

Example tasks

  • Provide different layouts for different device size ranges
  • Ensure that your site's font size is readable across all devices
  • Provide different image sizes or sources for different layouts or device attributes


While the principles of responsive web design are fairly well-established, new approaches, tools, and Drupal modules and themes continue to emerge. The other consideration is browser compatibility. Some approaches or techniques may require a polyfill to ensure backward-compatibility. At this time, our Drupal 8 responsive web design tutorials focus on responsive images.

Drupalize.Me resources

  • Breakpoints and Media Queries
    • Understand what breakpoints and media queries are and how Drupal uses these concepts outside of CSS files.
  • What Is a Breakpoint YAML File?
    • Learn what a breakpoint configuration file is, how it's structured, and why you would want to use one.
  • Create a Breakpoint YAML File
    • Create a breakpoints configuration file in YAML with information about your site's key breakpoints and media queries and successfully test it using Drupal's Responsive Image module.
  • Responsive Image Module Overview
    • Understand what responsive image styles are, as provided by the Responsive Images module in Drupal, and what to expect from the configuration process.
  • Responsive Image Style Use Cases
    • Understand the overall process of creating a responsive image style in Drupal 8 that addresses various responsive image use cases.

More Guides

We have guides on many Drupal skills and topics.

Explore guides

External resources