In his recent presentation at DrupalCon 2012, Dave Ruse gave an excellent talk about project processes in relation to responsive design.
Before I review Ruse’s talk, let’s first define “responsive design.” A website that is responsive can rearrange itself based on the device on which it is displayed. A responsive site uses information about the device (things like screen size and color screens versus black and white) to optimize the way the site displays on that certain device. A responsive website is particularly great for all the different phones, tablets, and other gadgets that are on the market.
Responsive web design is especially beneficial for websites that have a great deal of traffic or if they have a lot of visitors that access the site from mobile devices. One great example of a responsive website is the Starbucks site. Below you can see a series of screen shots demonstrating how the different blocks of content move on the home page as the window width is made progressively smaller. Look closely!
The screenshots of the Starbucks site demonstrate a very common approach towards responsive websites using a method called break points. A break point is a threshold window width. When a break point is passed, the previous content layout breaks. The different break points define how blocks of content are displayed based on a particular screen width. Break points provide a fluid transition between large screens and small screens. The site is all the same website, but the content display is dynamic.
So what goes into building a responsive website versus a normal website? Ruse gives several pointers that are great to remember when designing responsive websites.
First, layout your layout. When building a regular website we begin with making blueprints called wireframes. For a responsive site, additional layers of wireframes are needed because the layout between each break point needs to be defined. Wireframes are a fantastic project planning tool but they are exceptionally important when building a dynamic responsive site.
Second, steer clear of direction words. The words that you use for a responsive website are very important. You cannot use phrases like “click to the left to see our new recipe” because the recipe block might not be to the left in a smaller screen or past a certain break point. It is easy to use directions words like “click below” and “see above” but direction words are dangerous with responsive web design. There is a special finesse that is required for writing text content for responsive websites. This is an excellent place to practice “mobile first” web design.
Third, be a good host. In his presentation Ruse quotes renowned architect Charles Eames:
“The roll of the designer is that of a very good, thoughtful host, all of whose energy goes into trying to anticipate the needs of his guests.”
This quote is wonderfully applicable to responsive web design because anticipating the needs of many different guests approaching your website from different devices requires diligent planning. One of the most practical applications of this concept in regards to the mobile users is the minimized navigation. This is seen with the popular Facebook application which utilizes sidebar navigation. This minimized primary navigation is also utilized between the last two break points on the Starbucks website as seen in the series of screenshots. The minimized navigation that pops out increases the navigation ease for the thumb browsing person – mobile is an excellent place to anticipate the needs of your guests.
Now as a bit of a side note, I did want to mention that the sites we build at Covenant Web design are mobile compatible out of the box. That means our sites work on iPhones, android platforms, tablets, etc. in addition to on people’s home computers. Need your Drupal site to be truly responsive though? We can do that too.