Last updated March 21, 2023

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

Confidence

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 responsive web design tutorials focus on responsive images. Resources labeled for Drupal 8 should also apply to Drupal 9.

Drupalize.Me resources

The primary skill you will learn going through the following tutorials is how to implement responsive image styles in a Drupal web site.

Tutorial
Tutorial
Tutorial
Tutorial
Tutorial
Tutorial
Topic
Topic

Drupal 7

More Guides

We have guides on many Drupal skills and topics.

Explore guides

External resources