Skip to content

(What is) Responsive Design?

    Addressing the ever-changing landscape of devices by creating flexible, fluid and adaptive Web sites

    When people talk about a Responsive Website, they are usually talking about one that works well on a mobile phone. Responsive means however, that it should work on any size screen. Even larger ones. There are more than 200 (about) different standard size screens from mobile ohones to desktop screens. What about the screens you see in hospitals or train stations? Shouldn’t a website scale nicely outwards as well as inwards?

    In the past we (okay really nerdy people like myself possibly not you) would shrink the size of the browser to see how a website scales, and then check again on a mobile device for loading and compatibility. Now I am also opening a really large screen to see how what the website does with say 500 more pixels. Does the font size increase? Are there more images? Larger information boxes? NOt only do we need to think about shrinking but also expanding real estate.

    It’s no secret that we are glued to our phones. We spend over 2 hours a day looking at it. You might be surprised, however, to learn how much we can accomplish on those screens. Are you looking at the menu offering at school? Or are you trying to find a shop while you ride your bike? That a website is easily accessed on a mobile device is extremely important to the success of your business is very clear.  However, not only your website but your stand-alone advertising MUST be accessible (and friendly) on all devices and screen sizes.

    It goes without saying that any communication tool needs to be responsively designed.  Some people we have talked with are still unfamiliar with what it’s all about.  The real hype about mobile-friendly websites began with “Responsive Web Design”, an article in 2010 by Ethan Marcotte on A List Apart. When we heard him talk in 2011 it was an epiphany.

    Essentially, the article proposed addressing the ever-changing landscape of devices, browsers, screen sizes and orientations by creating flexible, fluid and adaptive Web sites. Instead of responding to a desktop Web version adapted to the most common screen resolution, along with a particular mobile version (often specific to a single mobile device), the idea was to approach the issue the other way around: use flexible and fluid layouts that adapt to almost any screen.

    There are more and more websites that have redesigned in a responsive format – not only drupal but wordpress include this as standard in their core themes.  If you are interested in reading more about Responsive Design please check out the following sources:

    Ethan Marcotte’s book on Responsive Design is both accessible and thorough:

    Trent Walton’s work on Content Choreography is also not to be missed:

    A blog post of our own looking at Responsive websites from June