Wayne State Web Team

Wayne State University Web Team Blog

Future of Web Design - Responsive Web Design

I just recently went to Future of Web Design (FOWD) (opens new window)  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 (opens new window)

This is a great example of Responsive Web Design - http://foodsense.is/ (opens new window). 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/ (opens new window) http://bostonglobe.com (opens new window) http://earthhour.fr/ (opens new window)

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 (opens new window)

Good Resources on this topic: http://www.abookapart.com/products/responsive-web-design (opens new window) http://www.alistapart.com/articles/responsive-web-design/ (opens new window)