Responsive Design with Drupal 7

Responsive Design with Drupal 7

For a while, the web design industry wrestled with the question of how to design websites for the myriad of devices and their endless screen sizes and ratios. The answer appears to have finally been found through responsive web design.

Rather than building themes or working with subdomains, responsive design enables the website to fluidly change in response to screen size. This design altering happens entirely with CSS which simplifies cross-browser compatibility.

With the plethora of new smartphones, tablets and screen sizes, you can understand the growing popularity of responsive as the ultimate design solution. It’s become nearly impossible to account for each set of screen dimensions with subdomains and different themes. Updatating a multitude of themes each time the site needs updating is a daunting task.

The main theory behind responsive design is make every cell and column flow together. You build columns that float next to one another and adjust widths to scale with the screen size. As the screen size becomes smaller, columns begin to stack on top of each other; and the remaining columns change width percentage to fill the browser. Initially, it may be a challenge to think of a site’s design in this way. But in the end, it will save you a lot of time and headaches.

Drupal 7 is perfect for responsive design because you can create one website with all of your page sections and blocks. And you can create just one theme to work on any device. The key to responsive design is getting the browser to the accurate CSS styles. In older browsers, some form of script may be required. jQuery is the best option as it can test the width of the browser window and then add appropriate classes to the HTML body tag. Within these classes, you can target specific CSS styles that match the size of the browser window.

Browsers that support CSS3 can use media queries. These queries can also be used for older browsers although it’s worth noting that there aren’t many options. It is nearly impossible to get the desired end result.

First Steps

You can begin the process by making a layout in your preferred program and plan out the columns. Next you’ll need to find the percentage widths for the columns. Measure the outer container, where all the columns live. Then measure each column. Finally, do the math: divide the inner column by the outer container. An example would be as follows: 320px / 960px = 33.3333333%. This percentage should be precise, even if it’s many decimals long. A precise decimal will ensure the design you mapped out displays properly on the web.

You’ll need to repeat this for each screen size you choose to make changes for, so that your site will adapt between them. There are several widths you will probably find most useful: 320, 480, 600, 768, 900, and 1200 (all in pixels). This covers the most common screen widths.

Media Queries Approach

Media queries are part of CSS. In CSS2 styles they adapt to the screen type - but not the width, which is the important part. The width is the key to responsive design as the width signifies the different devices upon which a website may be viewed.

CSS3 allow browsers to choose the correct styles based on the size of a screen. The syntax is straightforward and easy to understand. You simply place the changing code inside @media selectors.

Here’s a code snippet example:

[css]
@media {min-width:320px} {
.content { width:100%; }
}
@media {min-width:480px} {
.content { width:80%; }
}
[/css]

When a browser has a width anywhere between 320 pixels and 479 pixels, it will use the first set of code. When a browser is 480 pixels or more, it will instead instead display at a width of 80%, overriding the first two lines of code.

Adapting with jQuery

Change is slow for browsers to support CSS3. Older browsers often do not work with the media queries required for Drupal responsive theme. If you choose to support those old browsers, you need to use Javascript to achieve the appropriate screen width. jQuery is a popular JavaScript library and is a great option here. It can test the browser width in real time and adjust the body tag class on the fly. Best of all, jQuery is included in Drupal!

Simply use code similar to the below snippet for each size window you are supporting:

[jquery]
$(window).resize(function() {
if ($(window).width() > 480) {
$(‘body’).removeClass(‘smallscreen’).addClass(‘fullscreen’);
}
}
[/jquery]

This code adds the class “fullscreen” to the HTML so you may use that instead of media queries in your CSS.

The CSS from above rewritten to use class attributes would appears as follows:

[css]
body.smallscreen {
.content { width:100%; }
}
body.fullscreen {
.content { width:80%; }
}
[/css]

We have gone over some of the introductory basics for building a Drupal responsive design. Overall, you’ll find it to be less challenging to build one theme with many width options as opposed to having to rebuild several versions of your website. Updating the site will be a lot simpler.