Responsible Responsive Drupal Themes
Update to this blog: Responsive Drupal Theming, Done the Right Way... At Least For Now Anyway
After being introduced to the concept of responsive web theming, I took to it like a duck in water. I was pleased with the well documented contributed Drupal base theme, Omega based on the 960.gs grid. This amazing framework provides a plethora amount of configurable options, scalability and an overall sense of structure. I will not be covering any technical space-talk or how to configure Omega in this blog. If you would like to learn more about Omega, please visit the following site for more information: http://omega.developmentgeeks.com.
After starting to dig my little themer fingers into the nuts and bolts of creating an Omega sub-theme and seeing what was possible, I noticed that I was starting to tweak this and changing that. After a while, my own little Jiminy Cricket starting saying: "Just because you can, does not mean you should." So I started to re-evaluating how I approached responsive Drupal theming.
I started asking myself pro-active questions and was pleased to know that many had an answer, it just took a little thought. Below are some general concepts that I ask myself on a regular basis when designing a responsive Drupal theme. They are designed to keep my creative brain in check, my coding fever at bay, and ultimately give our clients and their users what they need.
Purpose - To respond to specific devices or is it just for fun?
The scope of your responsive Drupal theme should encompass your target screen widths. Yes, while it IS fun to resize your browser on the largest available screen to see this super awesome functionally take place right before your very eyes, ultimately there needs to be a little more thought into what is actually taking place.
The actual purpose of a responsive Drupal theme is to ensure that your site displays as close to "natively" possible for the device that is requesting it. This means that your site’s text, graphics and layout should display the most optimal viewing experience without requiring additional input from the user (ie: such as pinch-zooming or double tapping on an iPhone to enlarge the site).
Usability - Think inside the grid please!
Do not assume that everything has to look "exactly the same", regardless of how wide your site is. Know what your users are looking for. Keep in mind the context in which they are browser your site.
Users that are browsing on smart-phones generally are looking for specific information and usually arrive at a site from one of two methods: either they typed in the URL directly or they initiated a web search where they typed in their search terms. In either case, they already did their typing. It can be somewhat unpleasant to the user viewing your site if there’s a giant search box taking an eighth of your site’s real-estate at the top. Instead offer a smaller search icon that they can tap that will show the input box, as needed.
Design - To show, hide, increase or decrease... that is the question.
You will undoubtedly be designing your responsive Drupal theme on a large screen and not on mobile phone. This is where you want to resize your browser window.
On the wider version of your site, padding and margins are often much larger. On the narrow or mobile side, try to reduce unnecessary white space as it just makes the user have to scroll more. Decrease font-sizes and images to fit within the given grid and at hand to eye reading level (you will probably need to test this on devices to be sure). Overall, just take a mental note of the transition of elements and CSS changes between the different widths your site can be displayed.
You will surely encounter a few issues from time to time where things don’t quite go as expected. Use this process to debug your theme and see what (if any) JavaScript needs to be implemented to help further your overall user experience.
Performance - May I have a smaller image please?
What images are being delivered to the user and how big are they?? There is an awesome Drupal module named Adaptive Image based on http://adaptive-images.com/ by Matt Wilcox. It works in conjunction with your theme and is more of an "under the hood" module that needs little configuration. Nonetheless, it gives your Drupal site the ability to display device appropriate image sizes. This is useful for smart-phones that may be viewing your site using cellular data and will help increase your site’s load time.
Overview
Hopefully this has given you some thought about how taking just a little time to think about what you are actually trying to accomplish with your responsive Drupal theme will benefit you in the long run.
