makemagic industries inc.
Seriously Good Web and Mobile Sites

RWD Roundup.

What is Responsive Web Design?

Lately , I was asked to explain Responsive Web Design to a less than technical colleague of mine, which immediately brought this to mind:

It should be possible to explain the laws of physics to a barmaid
Albert Einstein

( With no offense intended to any of the very clever barmaids and barmen that I have ever known…)

Responsive Web Design (RWD) encapsulates many different ideas and technologies, but in short, it describes an approach to designing and developing a web site in such a way that it is ‘smart enough’ to adapt it’s layout in response to the environment it’s being viewed in.

RWD has three core ideas that drive it :

A Flexible Layout Grid
Fluid Images and Type
Media Queries

The end result is that Mobile (smartphone / tablet) users will have a similar experience and see the same content as Desktop users — only the content will be laid out in such a way to ensure that it is readable without having to zoom or do any kind of resizing.

There is a cascade of issues and follow up required attendant to this, BUT the essence of a solution for delivering ‘content to all people’ seems to have a solid starting point. And , by the way, this is not NEW news, Ethan Marcotte published an article about RWD in May 2010 and his subsequent book about RWD,was released in 2011.
There are many new RWD sites or re-invented RWD re-designs of older sites cropping up everyday – if you see a great example of RWD, please let us know here.

Testing Your Sites:

Here are some sites / services that emulate selctions of different devices and screen widths for a general idea of how well your layout and media queries are going to hold up in the wild. I would recommend testing in at least software emulators for the devices you wish to support and at best the real devices themselves.

Screenfly
Matt Kersley – Responsive
Responsive PX
Resize My Browser/