Change definitely is the new constant. As the great Stephen Hawking once said “Intelligence is the ability to adapt to change”. To keep up with this fast-paced world and the ever-changing and developing technology, we need to build intelligent websites that can easily ‘go with the flow’. Responsive designs are all about designing your website to be able to fit perfectly into any device irrespective of the screen size.

Drupal makes full use of the capabilities of CSS and Javascript to build Drupal responsive designs for any device. You don’t need to have different versions of your website, just one responsive one-size-fits-all Drupal website. Using fluidic layouts, advanced CSS features, and flexible images, Drupal achieves a responsive layout for your website. In this article, we will discuss building responsive websites and how Drupal 9 lets you achieve this with its mobile-first initiative and various modules that aids in building responsive websites.

Mobile-First Strategy and Building responsive websites with Drupal

The mobile-first approach makes the assumption that mobile phones are the most highly-used technology device and hence first priority should be given to designing a site for a mobile device and then the design can be adapted to suit larger devices like tablets, PCs and now TVs. The Bootstrap theme for mobiles is most popularly used, very user-friendly and follows the Mobile-first strategy to achieve mobile responsive design.

There are a lot of out of the box Drupal themes available for building responsive website designs like Bootstrap, Omega, AdaptiveTheme, Sky, Corolla etc. But if you need more customized solutions Drupal also provides plenty of modules to make responsive web designing a lot more easier. Let’s discuss some of them below:

Modernizr Module

With this module, you can detect HTML, CSS and Javascript features of the user’s browser. This module runs on page load and identifies the features and embeds them in a Javascript object which you can use within your CSS. Using this module you can easily write code for Javascript and CSS to handle each type of situation based on the results.

Picture Module

The picture module gives site administrators a way to optimize images for different devices and helps in building responsive website designs. It provides a tag for HTML and what it basically does is it renders different versions of the image which the browser will then select the best using media queries and displays only the best suited image for your device. So the images can scale itself depending on the screen size and resolution.

FitVids Module

To embed a video media into your responsive web site, you will need this FitVids module. It will expand or shrink the size depending on the div container it is within. This Drupal module supports Youtube, Blip.TV, Vimeo, Kickstarter and others like Facebook and Viddler too.

Breakpoints Module

This Drupal module is a very essential module and is used by other modules to achieve a Drupal responsive design and building responsive websites. You will need a theme to define breakpoints and these are stored in a theme.info file which is then read by the database. Custom breakpoints can also be defined using full media queries.

Context Breakpoint Module

With this Drupal module you can define a context for a breakpoint and building responsive websites. For example, you can use a narrow template for a screen whose width is lesser than 800px. It also detects the browser and screen size.

Responsive menus Module

A well-written CSS should be enough to handle your menu layouts but for more responsive layouts for your menus this Responsive Menu module can be used. You can choose between different responsive styles of menus, configure at what screen size they need to be handled or disable any mouse events.

Panels Module

Using the Panels module gives you more control and flexibility on the layouts of your website. It is a drag and drop content manager and lets you play around with the design giving you a real-time feel of your page. It allows you to place content wherever you like and can provide custom or responsive layouts.

FitText Module

This module is great to help you build Drupal responsive design websites. If you want your font size of your text to increase and decrease automatically to fit in the container, this FitText module is helpful. You will need to use a responsive theme to make use of this module.