These days, the use of tablets and smart phones has become so prevalent that it’s hard to believe some people still used a dial-up modem 10 years ago (*shudders with horror). But despite all of the awesomeness that is now literally at our fingertips, the increasing use of smart devices has placed a div in the road to Drupal Web Design and development greatness: designing and developing websites and applications for more than just a PC.
The current Drupal web development practice is to create a cross-browser friendly website for a mobile device, tablet and PC, leaving you with three versions of one site. However, this practice could soon be eliminated with a little rising star known as responsive Drupal Web Design.
Responsive Drupal Web Design is website design that responds to the device constraints of the person viewing it (ie, tablet, smartphone, etc). It’s a hot topic these days, and for good reason: alternative web devices already outsell PCs 4-1, and are expected to make up the majority of web traffic within the next three years.
Responsive Drupal Web Design contributes to the notion that the web will eventually culminate into a single Web that “doesn’t care what device you’re on, how you’re viewing content or how you’re interacting with it.” And some pretty sweet responsive development options are beginning to pop up. Developers and QAs take note: No longer will you have to stay up late at night sobbing into your pillow and lamenting about the lack of an adequate cross browser testing tool that spans multiple devices (because I totally don’t do that at all). A new open source framework has all of the yummy goodness baked right in for you: Foundation.
Created by ZURB, an interaction design and strategy company in Campbell, CA, Foundation is a prototyping and building library that utilizes a layout framework that renders all websites equal on mobile devices, small screens and desktops. It will help you rapidly prototype for any kind of device, and then take that prototype and extend it into a production-ready site. According to the Foundation site, the layout framework is “a twelve column, semi-liquid, mobile-scaling grid of awesomeness that you’re gonna love. It even supports arbitrary nesting.” Plus, global styles have been tested for typography, links, lists, tables and more.
So how would this work with a content management system? You’ll need a WordPress or Drupal starter theme that supports Foundation and HTML5 Boilerplate functionality. You’ll also need to make sure that the functionality for your site, Foundation, and HTML5 Boilerplate are supported within your page templates. These items will enhance the use of your cms.
While there has yet to be a Foundation starter theme developed for Drupal, I’ve found a few frameworks for WordPress that look pretty viable:
Foundation for WordPress: A blank starter theme with the exceptional capabilities of ZURB’s Foundation Framework and HTML5 Boilerplate.
Roots: Roots is a starting WordPress theme made for developers that’s based on HTML5 Boilerplate, Blueprint Drupal CSS/960 Grid System/1140 Grid and Starkers that will help you rapidly create brochure sites and blogs.
Now, before you explode into your full blown happy dance, let’s take a moment to explore Foundation’s features.
The grid lets you put together page layouts for all kinds of devices without having to build more than one site. The grid renders the same experience on each device with the same mark up. It’s made up of three key elements: containers, rows, and columns. Containers add left and right padding to the page so your content doesn’t run into the edge as a window is scaled down. Rows contain columns, and they have an arbitrary max-width that prevents your layout from stretching all the way out on very large displays (but that constraint is removable if you’re going for a more fluid layout). Columns hold your content, and can fit up to a total of 12 columns in a row. You can also create center columns and offsets, and also nest columns.
Buttons & Forms
Foundation buttons are broken into two categories: Simple and Nice. Simple buttons are your basic buttons, with features that include size, color and style, as well as square, slightly rounded, and completely rounded styles. Nice buttons use the same features, but include a background image.
Foundation forms are broken into three categories: Basic, Nice and Custom. All three appear to be pretty flexible and customizable, and all require app.js to use. The Basic form utilizes all of your basic form features with different sizes of rectangular input fields. Inline labels, error states and paragraphs within field sets are included. Nice forms offer the same features as Basic, but utilize rounded rectangular fields. Custom forms are also easy to create. Simply add a ‘custom’ class to your form and the js will go through the form and replace the elements with custom markup. Easy peasy.
Layout & UI
Users on mobile devices have different expectations when it comes to content on a site. They’re more willing to scroll down the page, but less likely to wait for a boatload of titles and hoopla to load in order to read anything. To help with this, Foundation features mobile visibility classes so you can quickly create different layouts for different types of devices. They also allow you to hide/show certain elements on desktops, tablets and mobile devices so you can simplify your layout and allow content to load more quickly.
Foundation UI elements include alerts, tabs, pagination and tables. Alerts are customizable, and can help you convey success messages, warnings, regular site info and failures. Tabs come in three flavors: Simple, Contained and Nice. Adding a ‘mobile’ class to your tab group will change the tabs to full width nav bars.
A few more Foundation features to click your heels over:
Orbit: Hero piece, anyone? Orbit is a lightweight jQuery slider for images and content. With Orbit you can easily add HTML captions, highlight Drupal CSS3 font face text, use image thumbnails for navigation, experience seamless loading states, and get rid of overflow. It’s also cross-browser compatible!
Reveal: Reveal is an easy to implement, lightweight, customizable modal plugin. Modal windows are basically windows that float above a page that allow developers to make critical information stand out. They help when a small piece of information needs to be conveyed and you don’t want the page to refresh 17 bazillion times. It’s also cross-browser compatible!
Rails: Add Foundation to your gemfile and use it in a Rails 3.1+ application. It’s also hosted on Git.
QA: Foundation is cross-browser compatible! Currently, it supports the following browsers:
FF 3.6 and 6
IE 7, 8, 9
Mobile Webkit (iOS 4)
Chrome for Android
So what do you think about the idea of responsive Drupal Web Design? It seems like a pretty sensible alternative to an expanding device market, with tons of coolness potential. And who knows? Maybe 10 years from now I’ll finally get that flying car that Back to the Future promised me (with an updated interface, of course).