Responsive Web Design


In case you haven’t noticed, the web is an ever changing landscape. There is always a new technology. Browsers are always changing (even though many of us decide to stick in the past – e.g. Internet Explorer 7!) and getting more powerful.

Not only is the web itself changing, the way we view the web is changing.

The Facts

Mobile devices are ruling the day when it comes to viewing the web. An article that was published on Mashable back in 2010 stated that mobile devices would rule the world of web browsing by 2015.

Snaphop.com states,

“In 2011, there were 835 million smartphone users, 5.6 billion feature phone users (Mary Meeker, Kleiner Perkins, Morgan Stanley Research via Business Insider).”

They also said that,

“61% of customers who visit a mobile unfriendly site are likely to go to a competitor’s site (Karim Temsamani at IABALM 2012 via IAB).”

If you’re a web designer, you must take note of these statistics. This is changing how designers have to view web design.

The Solution

Ethan Marcotte developed a technique called “responsive web design.” In fact he wrote a book about it that you can see here.

Here are some quotes that give us an idea of his thoughts behind this concept. All of these quotes are take from the article, Responsive Web Design. I would recommend reading the article if you are interested in finding out more about this topic!

Marcotte begins by saying,

“Mobile browsing is expected to outpace desktop-based access within three to five years.”

We have already seen that this is a true statement. He then says,

“We can quarantine the mobile experience on separate subdomains, spaces distinct and separate from “the non-iPhone website.” But what’s next? An iPad website? An N90 website? Can we really continue to commit to supporting each new user agent with its own bespoke experience?”

So what do we do? Here is what he proposes.

“We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design.”

Responsive Web Design has three very important elements:

  • Flexible Layouts
  • Flexible Images
  • Media Queries

First you need to create a flexiable layout. As the browser width changes, fluid grids will resize and resposition the content as necessary (Source).

Images have to also be able to be flexible. You can either set them to resize on the fly or dynamically crop the image (Source).

Finally, Media Queries behave similar to conditional comments. Media queries allow designers to create multiple layouts using the same content (Source).

Without getting into all the technical jargon, it helps to create a unique user experience in which no matter the device, the site is created to offer the best experience for that screen size.  This really eliminates the need for sites designed specifically for mobile devices.

Examples of Responsive Design

Here are some examples of sites using responsive design. As you view the site, grab the bottom right corner of your browser window and drag it towards the left and right to see these sites in action. You could also view them on your mobile devices to see how they respond.

http://morehazards.com/
http://earthhour.fr/
http://www.fork-cms.com/
http://owltastic.com/
http://www.smashingmagazine.com/
http://8bit.io/

These are just a few examples of sites using this technology.  A google search for “responsive web designs” will yield many others.

Resources

There are frameworks that have responsive technology built in. Here are some I have tested.

http://twitter.github.com/bootstrap/ ( I personally like this one.)
http://lessframework.com/
http://cssgrid.net/
http://www.getskeleton.com/

Are you a web designer? Have you began to incorporate this into your designs?