Making Drupal Responsive Web

smartphone

Throughout this article we shall be covering the last customization in order for this site to become a totally customized version of the theme CTI Flex. Up to now we have been using a fixed layout of 960px. Although this kind of page layout is good for desktop computers and big tablets, it is not for small tablets and smartphones. That’s why we need a radical paradigm shift if we want our Drupal site to support all those kinds of devices. The name of this new paradigm is Responsive Web Design and it's mandatory to talk a little bit about it before going into details.

Although the content of this article applies to the CTI Flex theme specifically, it might be useful for use with other Drupal themes. CTI Flex is not the main theme of this site anymore.

What is Responsive Web Design?

Prior to mobile devices, life was easier for Web Designers. Since everybody connected to Internet by using a desktop computers or laptops, they had to be concerned about making a single page layout just for those types of devices. Nowadays, there are a lot of different devices out there and Web Designers are forced to make a page layout to fit the screen size of many devices. How are they able to do so? The answer is Responsive Web Design.

Responsive web design is a term that was coined by Ethan Marcotte. You can read his original article about this subject here.

Although you could define it in many different ways, you should think of Responsive Web Design as a new way of providing an optimized version of your page for a particular screen size and that is much more than just to make room in order for the HTML elements to fit the screen. In other words, you have to think carefully about every single element of your site (backgrounds, fonts, buttons, images...) in order for them to be able to provide the best browsing experience for a particular screen size.

Is Responsive Web Design important for my site?

The answer to that question depends on the content nature and how complex the site is. For instance, think about Dell or Apple Store for a moment... Although the content is not a problem, the size of those sites is too big for Responsive Web Design. If you wanted to use it, then you would deal an extremely complex problem. That’s why Responsive Web Design is not a panacea. It's suitable for personal and small/medium businesses pages, but, it does not work for big sites or content intended for being used on big screens. For example, it makes no sense to use Responsive Web Design for a page like Github with a lot of source code just because this content type is not suitable for small screens. OK, it could be read on that kind of screens, but it makes no sense. Do you write your code by using a window of 320x480px? I don’t think so...

OK, according to this explanation, why are we going to make this site Responsive Web if it is not suitable for that? Although this site has a lot of code, as you can read above in the header, the author is passionate about web development and this customization entails both a challenge and a good opportunity for him to take Drupal higher. That's the reason. It's a technical challenge, not a real need.

Getting started...

As you can read above, the goal of this customization is to make this Drupal site Responsive Web. To accomplish this task, there are several previous steps to take account in order for Drupal to be prepared for Responsive Web Design.

  1. Fluid Layout
  2. The viewport <meta> tag and the template.php file
  3. Organizing the Style Rules
  4. The theme.info file
  5. To fit is not the same as to make room
  6. Fluid Images (To be talked about in a next post)

Fluid Layout

First of all, we need to make our page layout fluid. A fluid layout will allow the site to be able to stretch and take up the whole width of the window. To make the page layout fluid, go to '/admin/appearance/settings/cti_flex' and select 'fluid, full width layout' as your page layout.

The viewport <meta> tag and the template.php file

The viewport <meta> tag constrains the viewport in compliant mobile devices. We need to add the 'content' attribute to it with a 'property=value' of 'width=device-width'. This uses the physical width of the screen and ensures that the CSS styles are applied correctly. How can we add a custom <meta> tag to Drupal? We can add this kind of tag to Drupal by adding the following piece of code to the 'template.php’ file.

function cti_flex_preprocess_html(&$vars) {

  // Add a custom meta tag to the header
  $meta_viewport = array(

    '#type' => 'html_tag',

    '#tag' => 'meta',

    '#attributes' => array(

      'name' => 'viewport',

      'content' => 'width=device-width',

    )

  );

  drupal_add_html_head($meta_viewport, 'meta_viewport');

}

Organizing the Style Rules

Now we have to organize the style rules for use with media query. The CTI Flex theme divides the style rules into many basic style sheets. One of them, local.css, is intended for adding our custom style rules to the theme. Every single basic rule we want to add or overwrite must be declared in this file. These style rules are served to all browsers regardless whether they can understand media queries. The style rules for specific devices, that is, the rules intended for media queries to make our Drupal site Responsive Web, are going to be located in separate style sheets (mobile.css, tablet.css, desktop.css). Moreover, we are going to use a single file named 'cti-flex-responsive.css' to import those rules by using @import and, of course, media queries. This is what Adobe Dreamweaver called 'site-wide media query file'.

The cti-flex-responsive.css contains the following piece of code:

/* Phone */
@import url("phone.css") only screen and (max-width:480px);

/* Tablet */
@import url("tablet.css") only screen and (min-width:481px) and (max-width:800px);

/* Desktop */
@import url("desktop.css") only screen and (min-width:1024px);

Note: It makes no sense to copy the whole code and paste it into this article. If you want to see the style rules, please feel free to take a look by using your favourite developing tools.

CTI Flex is not the current theme of this site anymore. Now this site is using a theme made from scratch and based on Omega.

The theme.info file

Now it's time for the 'theme.info' file. This file, apart from other things, is responsible for declaring all the style sheets the theme will be using. It's of primary importance to add the style sheets in the right order.

stylesheets[all][]   = css/html-reset.css
stylesheets[all][]   = css/cti-flex-style.css
stylesheets[all][]   = css/wireframes.css
stylesheets[all][]   = css/layout.css
stylesheets[all][]   = css/color-schemes.css
stylesheets[all][]   = css/local.css
stylesheets[all][]   = js/fancybox/fancybox.css
stylesheets[all][]   = css/activities.css
stylesheets[all][]   = css/more-button.css
stylesheets[all][]   = css/ajax-loader.css
stylesheets[all][]   = css/cti-flex-responsive.css
stylesheets[print][] = css/print.css

Note that 'cti-flex-responsive.css' has been placed at the end of the queue. Since this is the file responsible for overwriting the basic style rules, it must be placed like that in order to cascade through the style sheets properly.

To fit is not the same as to make room

Although this sentence might seem obvious to you, Responsive Web Design is not to make room in order for the site to display the several HTML elements on all kind of devices. Responsive Web Design is to provide the best browsing experience for a particular screen size by placing the HTML elements intelligently. It includes to hide, remove or change those elements if they make no sense for a particular viewport. For example, it's very common to use a plain background color for mobile devices. It's also common to make images less heavy or use navigation menus with a display of block (one item below the other)... These kind of changes are able to integrate or fit the content for a particular viewport and that’s why I like to highlight the difference between to fit and make room when talking about Responsive Web Design.