Responsive Themes


It's hard to miss the word "Responsive" when looking at Drupal themes these days.

What is Responsive Design?

A responsive theme allows a website to be displayed smoothly across a wide variety of monitor sizes, screen resolutions, platforms, and devices. Rather than designing a site that works for one screen size, or designing separate themes that work for different devices, the goal of responsive design is to build a dynamic website that adapts to the width of the user's screen and works for both large and small screens. This involves creating a flexible-width layout that will adapt as the screen size changes, and writing code specific to screens with a particular size so that you can trim down or hide certain elements at smaller widths and restrict the width of the page on large screens.

Drupal Mobile Solutions

Mobile browsing is expected to outpace desktop-based access within three to five years. Two of the three dominant video game consoles have web browsers (and one of them is quite excellent). We’re designing for mice and keyboards, for T9 keypads, for handheld game controllers, for touch interfaces. In short, we’re faced with a greater number of devices, input modes, and browsers than ever before.

Responsive design uses a blend of fluid layouts, CSS3 media queries and flexible images that when combined allow your site to adapt to the device it's being viewed on.

Your standard desktop site might be three columns, but in your average smartphone you might want to display only one column - this is entirely doable using responsive design - it's a way of re-flowing the content and layout to suit the width of the device.

The way forward

Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts. That’s not to say there isn’t a business case for separate sites geared toward specific devices; for example, if the user goals for your mobile site are more limited in scope than its desktop equivalent, then serving different content to each might be the best approach.

But that kind of design thinking doesn’t need to be our default. Now more than ever, we’re designing work meant to be viewed along a gradient of different experiences. Responsive web design offers us a way forward, finally allowing us to design for the ebb and flow of things.