Responsive Web Design: What is it?

To start off my research, I've decided to ensure I have a good understanding of what 'responsive web design' is and to ensure I completely understand what it is that I am going to be creating.

My first stop was CreativeBloq, a site that I use often to source information and find useful things like Tutorials or free downloads. I found an article called 'Get Started with Responsive Web Design' which lead me to a person named Ethan Marcotte. This seems to be the guy responsible for coining the term 'Responsive Web Design'.

In 2010 Ethan wrote an article named simply 'Responsive Web Design' on AListApart. In the article he defines the web and speaks about how it is ever changing, and how in turn that defines our design and detracts from our ability to design a website for the future and for longevity;

"Our work is defined by its transience, often refined or replaced within a year of two. Inconsistent window widths, screen resolutions, user preferences, and our users' installed fonts are but a few of the intangibles we negotiate when we publish our work, and over the years, we've become incredibly adept at doing so".

Ethan Marcotte on 'Responsive Web Design'

As a designer himself, Ethan explains how he noticed that he was increasingly being asked to design an "iPhone Website". This reflects how we have greatly shifted towards having mobile technology - the introduction of Smartphones has been massively successful and as a result we have become more reliant and demand more from them - one of those demands being the ability to access the web and any website from any 'mobile' device. 

Initially, websites could only be accessed when you were sat down at a desktop PC, so they only needed to be built for the requirements of a desktop screen. But with the increasing demand to access websites on the go, it became clear that accessing a website that had been designed for a desktop screen, on your mobile, was not going to work. This was common knowledge, not something that Marcotte 'unveiled'. People started to build 'versions' of their sites - e.g. as above, 'iPhone websites' - but as so many new devices and technology came out (e.g. iPads, multitudes of Android phones in different shapes and sizes) this became a lot of work. Ethan Marcotte proposes using one version, and coding it so it responds and adjusts to the device it is being used on.

"This is our way forward. Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. 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."

Ethan Marcotte on 'Responsive Web Design'

I will analyse further, but below are examples that illustrate how responsive web design works.

http://fieldguide.is

http://mobiletest.me

Desktop

 The Website in it's Desktop form. A large image that is bordered at the bottom by a yellow box that meets the fold of the screen. There are then three pieces of information evenly spaced across the width of the screen.

Tablet 

Left: iPad Mini

Right: Google Nexus 7 

The above shows how the site would appear on two different types of tablet (in landscape form). The Google Nexus is noticeably skinnier than the iPad and it's interesting to see how this effects the positioning of elements on the page. The contact information on the bottom of the screen in the yellow bar has repositioned so it is more centrally aligned on the Google Nexus, whereas on the iPad, which is noticeably wider it is closer in likeness to the original, desktop 'version' of the website.

Other Desktop to Mobile comparisons of responsive websites.

 http://joshuasortino.com 

http://morehazards.com

 http://2012.dconstruct.org