Future of Web Design – Responsive Web Design

I just recently went to Future of Web Design (FOWD)  in New York City for an amazing web conference. Besides the amazing speakers, friendly atmosphere and cool city life, the conference had a reoccurring theme: Responsive Web Design.

Now “Responsive Web Design” is by no means a new concept, but it has speedily becoming a web design standard.

Here are the basic premises behind the idea to achieve Responsive Web Design:

  • Design must be flexible to the users behavior and environment
  • Use flexible grids and layouts
  • Use flexible images that will adjust to each view
  • Use smart CSS media queries to adjust to the users resolution size
  • Just one URL, no more, m.mobilesite.com


Food Sense Example

Responsive Web Design - Foodsense

This is a great example of Responsive Web Design – http://foodsense.is/.
To see this in action open the link on a desktop browser and slowly drag the browser window size smaller. You will see the layout elements adjust on the page to the new width.

Other great of examples of Responsive Web Design:
http://thinkvitamin.com/
http://bostonglobe.com
http://earthhour.fr/

As web design and development evolves into the future, with multiple devices such as smaller laptops, tablets and smartphones, Responsive Web Design seems to be the best solution for the moment.  We can no longer just design for a couple of devices, we must accept that the amount of devices and resolutions are going up dramatically. I will leave you with one of my favorite quotes from the conference:

“If its not responsive design, its not web design” – Andy Clarke


Good Resources on this topic:
http://www.abookapart.com/products/responsive-web-design
http://www.alistapart.com/articles/responsive-web-design/

 

12 Replies to “Future of Web Design – Responsive Web Design”

  1. Sounds like a great conference, I wish I had been able to attend. Love those examples of responsive design – I can definitely see that this is the future, particularly with the forecasted growth of tablet users in the next few years.

    Peter

  2. Nick, that Food Sense site is the best example I’ve seen so far. Great find! Have you come across any Higher Ed examples yet? Even a sub- or department site?

    1. Hi Eric,
      Actually my name is Tom Krupka, but I do work with Nick 🙂 I love that site as well and think its by far one of the best examples of Responsive design to date.

      I do know http://nd.edu, uses responsive design and is a great example of it. Nick also suggested this blog post by Karine Joly, that goes into more depth with Responsive Websites in HigherED:
      http://collegewebeditor.com/blog/index.php/archives/2011/11/16/top-first-responsive-websites-in-highered/

      Enjoy!

  3. We have used responsive web design and focused on content for the benefit of our end users (students, faculty and staff). We wanted them to be able to find IT support no matter the device they were using. it.eku.edu

  4. Cool post. The conference was definitely pushing responsive web design. That’s the theme of 2011. Also, the use of legos was used heavily in people’s presentation which I found oddly interesting.

    Too bad weren’t able to connect in NYC. Maybe for the next #fowd.

    1. Thanks Fabian! Yes, the Legos seemed to be everywhere you looked! Yes its a shame we didn’t connect. Did you do any of the workshops on the last day?

  5. Very cool stuff… This is challenging for us as we manufacture template-based sites that have to flow with the content provided by our users, but we have been able to implement a nice mobile solution. Now on to the many tablets varieties! Our work is cut out for us. Thanks for your post.

  6. Thanks for the article Tom. I definitely agree that responsive web design is the way to go BUT developers should not solely focus on the presentation layer. I’m not saying its a wrong approach, but developers must also look at information architecture, performance, etc. please check this out on my thoughts – http://joesabado.com/2011/12/mobile-web-consider-the-purpose-then-design/

    I also have a list of resources for mobile web development here – http://joesabado.com/2011/07/mobile-web-resources/

    Btw – I just upgraded WordPress on my blog site and somehow the mobile version is not working now so I’m working on fixing it:( just FYI if you’re viewing my site on mobile.

    Thanks.

Comments are closed.