Responsive design in Drupal 8: great core & contributed modules

Your website, like a king, should look good in any situation — and on any device that users might be accessing it from. Thankfully, there is responsive web design.

With responsive web design, all images, buttons, columns, and other layout elements change their size and position to adapt to the device dimensions. This creates the smoothest user experiences and improves website performance.

Luckily, responsive design in Drupal 8 is thriving. Drupal 8 has been built with mobile devices in mind. It has responsive default themes, responsive admin interfaces, and powerful opportunities for mobile-friendly design. There are great Drupal 8 modules that are very helpful in implementing any ideas in this area.

Drupal 8 core modules for responsive design

Of course, we need to start with the powerful built-in modules that arrived at the core with the release of Drupal 8 to everyone’s applause.

1. Breakpoint

The Breakpoint module allows you to specify the breakpoints, for example, screen dimensions (minimum or maximum width), at which your website should start showing a different layout. The module is enabled out of the box in Drupal 8.

Breakpoints should be defined in the theme’s themename.breakpoints.yml file. Default themes like Bartik are known to be responsive out-of-box, so they already have this file with a set of ready breakpoints. For custom Drupal 8 themes or modules, this file needs to be created in the theme’s or module’s root directory.

The module manages the height, width, and resolution breakpoints. It enables modules and themes to use each other’s breakpoints.

2. Responsive Image

The Responsive Image module provides the appropriate image display for each breakpoint. The module is part of the Drupal 8 core but needs to be enabled.

According to Drupal image style capabilities, images can be automatically scaled, cropped, resized, and so on, to be used in different scenarios. With the help of the Responsive Image module, these different image styles can be served for different devices based on breakpoints.

All you need to do is:

• create the desired image styles in Configuration — Media — Image Styles

• create a “Responsive image style” in Configuration — Media — Responsive Image Styles, choose the theme name in “Breakpoint group,” and assign image styles to breakpoints

• assign the responsive image format to the image field of the desired content type in Structure — Content types — *Content type name* — Manage display

The Responsive Image module uses the HTML5 "picture" tag. It once used to be known as the Picture contributed module.

Contributed modules for responsive design in Drupal 8

Alongside the strong core features, there are contributed modules available in Drupal 8, each of which adds its own touch to responsive web design creation. Let’s review a few nice ones.

1. Simple Responsive Table

The Simple Responsive Table is a lightweight module that instantly makes Drupal website tables responsive. All that is needed to do is set the maximum screen width for which tables should be responsive. You can also optionally enable or disable this feature for Drupal admin pages.

2. Sidr: Responsive Menus

The Sidr: Responsive Menus module for Drupal 8 integrates a JavaScript plugin called Sidr, which is great for creating responsive side menus and more. The module should be installed together with the Sidr libraries.

With the help of this module, you can create configurable Sidr “trigger” blocks on your website. They can be placed anywhere in your theme region and configured to your liking. Their essence is that when a trigger is clicked, the Sidr side menu slides out or slides back in.

3. Viewport

The Viewport is a simple Drupal 8 module that offers a user interface for adding a viewport meta element to the HTML header. The viewport element instructs the browser on how to display the visible part of the page on the users’ screen. Viewport varies from device to device.

The Drupal Viewport module’s interface allows you to specify the viewport values and the pages for which the element should be added.

4. Juicebox HTML5 Responsive Image Galleries

Here is a nice module for creating responsive image galleries and sliders. The Juicebox HTML5 Responsive Image Galleries module integrates the famous Juicebox library. The library is known for its full responsiveness, touch gesture support, embedding features etc.

The module provides a field formatter and a views style plugin that allows image fields and Views to be formatted as Juicebox Galleries. It features multilingual support, integration with the Media module, search engine friendliness, and much more.

Fulfill your responsive design ideas

Responsive design in Drupal 8 is easy for developers to set up and enjoyable for users to work with. So contact our Drupal team if you are interested in:

• building a responsive theme for your Drupal 8 website
• making your current theme responsive
• configuring any responsive design modules
• providing responsive layout for any elements on your website
• migrating your website to Drupal 8, as it has so much for responsive design

The era of convenient web is here!