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 too tongue in cheek ( see what I did there? ), but a Responsive website is simply one that responds to it's environments.
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 maximum width of the screen in pixels. So technically a tablet could be as wide or wider then a small laptop. Got it?
So what exactly responds? Well, this could be anything really. We can now serve up smaller images, larger text, change colours or styles all 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 dependant 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 ;)
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.
It seems like every site we build needs/wants a homepage image slider. Which 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 web site.
Same problem with Videos, we have a fixed width. This module uses the FitVids jQuery library to help us solve.
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 is may not be as powerful, but makes up for it with style and intuitiveness.
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 upon 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.
It is well known that context is a very powerful module for Drupal. It allows us to show content based upon several different context. But, what was always missing is the ability to do it based upon screen size. Well that is no longer the case. Crazy awesome stuff.
This is just a small sampling of some tools that we can use to make your site respond for different devices. If you have any questions or you just simply want to share a solution you know pleas feel free to add your thoughts to the comments.