Living Responsively

In a very short while, Responsive design has become one of the more popular design strategies for addressing user experience on different display sizes. A very simplified way to explain how responsive design works is that, through the site style sheet, the blocks of content on the screen will adapt to the screen size that the site is being viewed on.

media_queries1

 

For a visual reference check out This Man’s Life’s simple interactive illustration

Being able to navigate through a website on smaller mobile devices is now just as relevant to the experience as sitting at your desk. With responsive layouts, the interaction of a website and the user becomes a more personal and customized experience.

The respontroversy

Going through various design blogs and articles there seems to be a split over responsive design’s usefulness and whether the technique should be used at all. There are some very good, articulated view points both for and against employing responsiveness into your designs. Indeed there are times when utilizing a responsive layout is not the most efficient strategy, but for the majority of websites I am of the opinion that responsiveness is usually the ideal option.

From a design perspective the purpose of utilizing a responsive strategy is that a page layout should adjust to the relative size of whatever the content is being viewed on, instead of sniffing and switching through different mobile CSS’s files.

Imagine if The Globe and Mail started to print a pocket sized edition of their newspaper, in roughly the dimensions of an iPhone and all they did to adjust the content to the new size was shrink it to scale. Sure, they could hand out magnifying glasses for people to zoom on the content, but the overall experience will still feel impractical and tedious.

Is there a better alternative?

There are many ways to adapt a site for various device screens such as creating a separate mobile specific design.  Quite often these solutions can be difficult to maintain and can become overly complex in terms of linking content. In addition, creating separate mobiles sites do not adapt properly to every screen size and there is the added complexity of always maintaining two identical sets of content.

A well designed responsive design however, will. Given the increasingly number of varying display sizes from mobile smartphones to tablets and desktops utilizing an adaptable layout of one site means that the user can enjoy all of the content as if it were specifically made for their own device.

Ultimately the implementation of responsive design is dependent upon the context and use of the website. Most users surfing with smartphones are completely accustomed to the “zoom and scroll” method of viewing and as a result are a little unsure of how to initially react to a responsive layout. It’s up to us as designers to work towards creating better responsive designs and methodologies. We need to keep pushing the boundaries of what’s possible, while remembering to keep the users needs in mind.

Responsiveness in the wild

Here are a few of our current favorite sites utilizing responsive design:

Dressresponsively.com

 

foodsense.is

 

Full Frontal

fullfrontal

 

Healthlife

Healthlife