One of the most important new techniques in web design is responsive design, which was introduced by Ethan Marcotte, an unstoppable robot ninja and one of my favorite people working on the web.
Since I work primarily with Drupal, I have struggled with how to integrate these new techniques with Drupal. Thankfully, Jeremiah Davis of Advantage Labs gave a presentation on “Responsive Design and Drupal” at Drupal Camp Twin Cities 2011.
Here is the session description:
We might not have flying cars yet, but we sure have a lot of fun technology that just a few decades ago you would have only seen in science fiction. We’re constantly jacked into everything and everyone through the internet—through our desktops, laptops, smart phones and tablets. There’s a device for every occasion.
As exciting as this all is, providing a good user experience across all of these devices presents a new challenge for designers. How do you design a site that will provide a good experience on the tiniest smart phone to giant desktop displays and everything in between?
In this session we'll talk about a relatively new technique, responsive design. We’ll talk about how this provides one solution for changing the user experience to suit the device. We’ll go over some of the techniques used, the pros and cons, and demonstrate how you can apply these techniques to your Drupal theme.
My notes follow after the break.
What is Responsive Design?
The key article from Ethan Marcotte (@beep) is on A List Apart; he also has a book coming out next month with A Book Apart.
I saw him give a fantastic talk on this topic at An Event Apart last year: feel free to take a look at my notes on responsive web design for more info on some of the theory behing this.
Grid design
Designing to a grid, so that elements of the site have consistent widths that may take up one or more equally sized columns. The 960 grid system is one example.
Flexible grids
Specify a max-width rather than a width. Need to use percentages: the size of the object divided by the size of the grid equals the percentage.
Flexible images
Set a max-width on an image: it will then be the width of its container. Set width and height of auto on the image to make sure that it resizes proportionally.
Works well in all browsers, except for IE: set width = 100% in a conditional comment. Or using unstoppablerobotninjaentry/fluid-images
Image scaling in older browsers can be “janky.” Browsers are not always the best at doing resizing. More modern browsers handle this pretty well.
Media queries
Different than just setting the media type on the link to the CSS file. You can also set qualities like max-width, such as: media="screen and (min-width: 800px)
Media features
Most if not all of these can be prefixed with min or max.
- width
- device-width
- orientation
- device-aspect-ratio
- color-index
- resolution
- grid
- height>
- device-height<
- aspect-ratio
- color
- monochrome
- scan
This lets us adapt our design to different platforms without changing the content.
There are so many devices now, responding to those various qualities on those devices is key.
“Mobile browsing is expected to outpace desktop-based access within three to five years.”—Ethan Marcotte
Discussion
“Unfortunately, CSS media query is fool’s gold for mobile devices. It hides tough problems and gives developers a false promise of a simple solution for designing to multiple screens.”—Jason Grigsby
http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/
Responsive design is not a magic bullet.
Responsive design is not also specifcally mobile: it is about providing a different experience for different devices. It’s a set of tools.
Doing it with Drupal
A lot of themes are being developed for Drupal using responsive design techniques. Some of these are in Sandbox projects no ready for primetime.
One of the challenges is that while images can be resized smaller for mobile devices, the file size is still larger. There are a couple projects around responsive images that deliver separate imagecache sizes based on what the device is, using jQuery. That way the mobile device doesn’t get a large file size for the image.
We can start doing this now and just add responsive techniques to our current CSS, start using JS libraries that will help.
Demo
Gallery site: mediaqueri.es ahows examples of sites delivering different designs for different devices.
You don’t have to use a flexible grid: you can still use fixed width with breakpoints where the layout changes to another fixed size.
getlaunchkit.com and hicksdesign.co.uk are good examples.
2011.tcdrupal.org has been made responsive. Based on a theme Advantage Labs uses called Hydrogen, which uses a 960 grid.
The Omega theme now uses some responsive behaviors: fixed width by default, but as you resize, it changes. There are configuration options for the theme that deal with responsive design. There are also settings to make sure that your design doesn’t get zoomed out on an iPhone to a wide width. Essentially, Omega has multiple stylesheets for various widths and the configuration pages allow you to set the media queries used to determine when each stylesheet is used.
Other options:
- SquareGrid theme
- Converting Bartik to a responsive design
- Adaptive Theme
- HTML5 Boilerplate theme
How do you turn it off is a challenge. Sometimes users want the full-version of the site, not just a simplified mobile version. How do you allow users to do that when you are using a responsive design? I wonder if you could set a session variable if somebody clicks on a full site link and then use jQuery to switch out the stylesheet that is being used to override the default mobile stylesheet. If your stylesheets are being pulled together and minified, that might not be possible: you might need to add the media query stylesheet in your theme template outside of the Drupal-generated stylesheets so that you could remove and add stylesheets if your jQuery. For the record, I don’t know that this is possible: it just seems intriguing as a possibility.
The HTML5 Base theme is working on getting core to output HTML5, which will be key to getting Drupal 8 to do HTML5 by default. One of the other key initiatives is to get Drupal to be more responsive to mobile devices, so it would not be surprising if responsive techniques are incorporated into Drupal 8.
One interesting tidbit is that you can set a media query in a theme’s .info file. Where you set screen or print to attach a stylesheet, you can also put in the code for the device queries.
My take
I am still struggling to figure out which themes to start with when trying to do HTML5 and responsive design techniques. I need to do more research.
The technique of replacing images with smaller presets using imagecache and jQuery sounds very promising. That could help address a number of concerns with responsive design.