Responsive Web and Drupal

It seems like the web is full of buzzwords and phrases. And for the last year and a half one of the phrases heard the most frequently is Responsive Web.

Like practically everything else in the web-o-sphere, this term can feel like one of the great mysteries of the world. So.. what is the big secret?

What is the Responsive web?

Not to be tongue in cheek ( see what I did there? ), but a Responsive website is simply one that responds to its environment.

What type of environment? Well at the moment that would be the type of device the site is being viewed on. So a tablet, desktop, or phone. Although, that is not entirely accurate… the code used to make this happen actually is looking for a maximum width of the screen in pixels. So technically a tablet could be as wide or wider than a small laptop. Got it?

So what exactly responds? Well, this could be anything really. We can now serve up smaller images, and larger text and change colors or styles depending on how big the device we are using. We are even able to remove elements entirely, this allows us to fully control the environment that our users are seeing, all depending on how big the device they are using. Pretty powerful stuff.

How can Drupal make this easier?

As you know by now, Responsive Web is not exclusive to Drupal or any particular Content Management System. However, there are some tools that have been created that make developing a site both easier and faster. And time equals money.

Since we are a Drupal shop, these are a few that we have had some experience with.

*Disclaimer- I am about to get a bit geeky on you, read on with caution 😉

Zurb Foundation

It all starts with a great sub-theme. We should always strive to not recreate the wheel if we can. Zurb has a great framework to help build truly responsive websites and this sub-theme brings that power to Drupal.

Picture and Breakpoints

I love these two modules! They allow us to use one image and show different versions or sizes depending on the screen size. So much power and flexibility.

Flexslider

It seems like every site we build needs/wants a homepage image slider. This is great but can play havoc with smaller screens because the slider is usually a fixed width, this little gem will allow all of your images to change size with the entire website.

FitVids

The same problem with Videos, we have a fixed width. This module uses the FitVids jQuery library to help us solve.

Navbar

Sometimes we have site administrators that like to work on their content from a mobile device. As much as I love the Administration Menu module https://drupal.org/project/admin_menu it is not mobile-friendly. Since switching to Navbar I now recommend it on most sites. It may not be as powerful but makes up for it with style and intuitiveness.

Browserclass

This is a bit of a cheat, as this module is not really just for responsive sites. It is a cross-browser module that adds a class to the body tag based on the device browsing. Huh? That means if you are looking at the site on a Windows machine or an iPhone I can tell the site to do something for each. Very powerful tool.

Context Breakpoint

It is well known that context is a very powerful module for Drupal. It allows us to show content based on several different contexts. But, what was always missing is the ability to do it based on screen size. Well, that is no longer the case. Crazy awesome stuff.

Summary

This is just a small sampling of some tools that we can use to make your site responsive to different devices. If you have any questions or just simply want to share a solution you know please feel free to add your thoughts to the comments.