Our blog

Our Blog

Usually coherent musings of pertinance.

 

Responsive Website Design

Responsive Website Design

Responsive Web Design Using Drupal

It's 2012 and the world as we know it has gone mobile. Some have said this a while ago, but there is no denying it now. You just have to look at the multitudes of people walking down the street with their heads burried in a phone. Or look around you on a commuter train and see over half of the sheep with their heads buried in a tablet. We can't even predict where things are going.

This makes life as a web designer challenging. We thought the browser wars of the past made things difficult. Now we have to design for 3.5" screens that have blazing fast internet and browsers on our game consoles and 50" 3D televisions.

Fortunately, we have help. We are able to use sophisticated development frameworks like Drupal and we can employ responsive techniques that allow us to build one site that transforms for all devices and the ones to come.

The History

Let's look at a brief history of how we got here. A few years ago it was considered sophisticated to have a desktop version of your website with a stripped down version for mobile phones. If you had a especially talented developer, your desktop site employed some level of device detection so that mobile phones could be auto-forwarded to your mobile domain, usually m.domain.com.

Now, that mobile site begins to look a bit ridiculous on a retina screen or even worse on an iPad. What happens when the iPad is in portrait view? If your site was designed to look good in that view, it means it uses less than half the screen when viewed on a large desktop monitor. As mentioned, there are solutions that are within reach of any budget.

The Solution

"Responsive web design" was coined in a 2010 article by Ethan Marcotte in 'A List Apart'. The term responsive signifies a website architecture that responds to the site user's device specifics. Does the device have a narrow or wide screen? Is the user holding the device in portrait or landscape? With responsive design, we can accommodate all of these considerations.

Using a combination of CSS, flexible grids and flexible media a website can now become device agnostic, transforming to the needs of the user and her device.

The Tools

CSS3 media queries

Media queries allow a website to determine device specifics like screen resolution, device orientation, color depth or the type of screen. With this information, different styling instructions can be presented to different attributes. Usually, this is through using "breakpoints", or ranges of capability. So a mobile phone might have a breakpoint of below 480 pixels of screen width, while a portrait tablet might have a breakpoint of between 480 pixels and 750 pixels.

Flexible grids

Another aspect of responsive design is utilizing a flexible grid that can adjust to various conditions. Grid-based design has been is use for a long time, especially with content management systems like Drupal and Wordpress. They allow design elements to be layed out in a structured way using blocks and columns.

A flexible grid defines elements proportionally, rather than using fixed pixels. The grid will then change depending on the breakpoint used. Design elements can then wrap as the grid gets smaller or is reduced in columns. To see this in action on this website, make sure the browser is not maximized and then grab the right-hand side and slowly reduce the width. Content will transform or shift locations depending on the various breakpoints.

Flexible media

A proper responsive design will also incorporate flexible images and video that scale with the various breakpoints. This can be done easily using percentage width rather than a fixed pixel size. The only downside of this technique, is that large images could potentially be served to small screen devices. There are techniques to deals with this, using javascript and .htaccess to serve different images. There are Drupal modules being developed to make this easier to use.

The future

Responsive web design changes the way we approach the web. It also means that the way you run a project has to be flexible as well. Now, it is not really appropriate to produce wireframes and then Photoshop mock-ups with the expectation that the resulting web site will look the same. Responsive web projects should lean towards Agile project methodologies, where the aim is to produce a working prototype as quickly as possible and then iterate until the finished product is as desired. This requires a partnership between the client and developer and an understanding of the process.

Responsive Web Design
Learn about infographics software.