How to build a Responsive Drupal Website

  • By :Shefali
  • Date : 12-01-2017

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 design is 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 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.

Mobile First Strategy and 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 that support responsive design 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. 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 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 responsive design. 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 build a super responsive design. 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

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.

Recent blogs

I always had good feeling about mobile ecommerce; the best practices to make shopping (on mobile) simple, easy, quick &...
Ecommerce Site Search
I always thought it was just me (maybe a few others) who would directly head for the small magnifying glass or the search menu on...
What are Top eCommerce Companies doing to get it right?
Here’s some bitter truth – about 8 out of 10 eCommerce companies fail within the first two years, even when the eCommerce market is...