Skip to content

Wayne State University

Aim Higher

Nov 29 / Thomas Krupka

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/

 

Comments are closed.

Filed under conference, design

12 Comments

  1. Peter Jones / Nov 30 2011

    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. Eric Olsen / Dec 1 2011

    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?

  3. Tammy Cornett / Dec 1 2011

    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. Fabian Alcantara / Dec 2 2011

    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.

    • Thomas Krupka / Dec 2 2011

      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?

      • Fabian Alcantara / Dec 2 2011

        yes. I checked out “The Ideal Workflow” with Sarah.

        • Thomas Krupka / Dec 2 2011

          Very cool, I did “Designing Great iPhone and iPad Apps” with Josh Clark…

  5. Brian Shaffer / Dec 5 2011

    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. Joe Sabado / Jan 7 2012

    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.

    • Thomas Krupka / Jan 9 2012

      Thanks for the comment Joe, I will definitely check out your links!

Comments are closed.