Theming
Topic

Responsive Web Design for Drupal 7, 8, 9, and 10

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.

Drupalize.Me resources

Categories
Site Building, Theming, Module Development, Site Administration
Drupal 8, 9, and 10

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

More information

Overview of responsive image styles, which allow you to provide different images for different screen sizes.

Categories
Drupal 8, 9, and 10
More information

You've got a slick responsive theme for your Drupal site that's been implemented in CSS using media queries. But the content and images on your site will regularly be updated and you want to use the Responsive Images module to create responsive image style field formatters that you can apply to image field display settings.

In this lesson, we'll review the concepts of breakpoints and media queries so that you can better understand what's going on when you encounter them in non-CSS file contexts like configuration forms for responsive image styles or breakpoint YAML files.

By the end of this tutorial, you should have an understanding of what breakpoints are, how they are expressed in media queries, and how they are relevant in the context of Drupal.

Categories
Drupal 8, 9, and 10
More information

Drupal's Breakpoint module defines a "breakpoint" plugin type that modules or themes can implement via a breakpoints configuration file. So, in order to make their breakpoints discoverable, themes and modules define their breakpoints in a THEME-OR-MODULE.breakpoints.yml file located in the root of their directory.

In this tutorial, you'll learn about the structure of a breakpoints configuration file and why you would want to use one. We’ll cover the kinds of metadata you can include in a breakpoint file, including key, label, mediaQuery, weight, multipliers, and breakpoint group. Throughout, we'll look at some examples of breakpoint configuration files available in Drupal themes and modules.

Categories
Drupal 8, 9, and 10
More information

As we learned in the What Is a Breakpoints YAML file? tutorial, modules and themes can expose their site's CSS breakpoints and media queries to other Drupal modules and themes by implementing a breakpoints YAML file. In that tutorial, you also learned about the structure of a breakpoints configuration file and why you'd want to create one. In this tutorial, we’ll walk through the process of creating an example breakpoints file step-by-step.

By the end of this lesson, you should be able to create a working breakpoints YAML file in a theme or module. We'll test it out by enabling Drupal's Responsive Image module, where we'll be able to see it listed in the configuration form for creating a new responsive image style.

Categories
Drupal 8, 9, and 10
More information

The Responsive Image module provides a process for transforming images uploaded through image fields into responsive images. This is accomplished through the configuration of responsive image styles. The configuration form for adding and editing responsive image styles is quite extensive. In this tutorial, we'll go through this form and learn what each option entails. By the end of this lesson, you should have a good understanding of the various options in the responsive image style configuration form.

Categories
Drupal 8, 9, and 10
More information

You might already be familiar with image styles in Drupal. Image styles are a popular and commonly used feature of Drupal because they enable your site's content creators to upload an image once, but have it displayed at various sizes and resolutions depending on its context. Image styles are configured and then applied to an image field's display settings, whether using view modes, Views field settings, or other contexts. Responsive image style field formatters are applied in the same exact way, but the process of creating responsive image styles is a bit different.

Using responsive image styles as image field formatters enables your Drupal site to produce specific HTML markup for images so that either:

  1. The browser can choose an appropriately sized image source, given the size of the user device's viewport size
  2. You can dictate to the browser which image sources to use at different breakpoints.

In the first case, the resulting markup uses the srcset and sizes attribute in an <img> element. In the second case, <picture> and <source> elements are generated in conjunction with the <img> tag.

It is also possible to create a responsive image style that just provides alternate images depending on the display-density (i.e. 1.5x or 2x) of the user device.

In this tutorial, we'll look at three use cases for responsive images, how those use cases are handled in HTML, and how they can be handled using Drupal's Responsive Image module. By the end of this tutorial, you should be ready to create a responsive image style appropriate for your Drupal site.

Drupal 8, 9, and 10
More information

Cascading Style Sheets (CSS) files are added as an asset library through a theme’s libraries configuration file. HTML attributes, including classes and IDs, are commonly added in template files with Twig.

More information

Many sites require the ability to upload, manage, and display various assets like files, images, videos, and audio.

Drupal 7

Guides

Not sure where to start? Our guides provide useful learning tracks for all skill levels.

Navigate guides

External resources