“I skate to where the puck is going to be, not where it has been.”

—Wayne Gretzky

The web is changing.

Before, our biggest worries were the diversity of browsers. How do we get CSS to work across both IE6 and Firefox, let alone Safari.

While cross-browser design is still a challenge, those difficulties have eased with time. Modern versions of Internet Explorer are relatively on par with other browsers.

Responsive web design allows our content to shine no matter the screen size, so it can be accessed easily on multiple devices.

However, devices are also starting to vary based on screen resolution. Can responsive web design handle that as well?

I believe it can, and it must. Here’s my take.

Right now, the iPhone 4 has a retina-display, with much higher pixels per inch than an iPhone 3GS.

The 3GS is 165 ppi, the iPhone 4 326 ppi, the iPad 132 ppi. That’s just for iOS devices. Resolutions abound.

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.