Over the last two years we have talked much about “Responsive Design” in this blog. In this post, we aim to give you working knowledge on what exactly it is and when to employ it.
What is it ?
Responsive design is a technique that can be used while composing a website. It allows the author of the website to make the site behave differently based on the size of the window/device that the site is being viewed in. For example, the site can look and act one way for a normal size laptop/desktop, but the same site can adapt itself for presentation to a mobile phone.
The scope is broad, nearly everything about the site can be changed for different sizes. Generally speaking, responsive design has three break points. A break point is when a different style is present and is defined generally by screen width. Normally the break points are for normal desktop, tablet, and phone.
Rather than continue to try to try to explain what responsive is, how about an example. Go to americanfolkfestival.com on a desktop/laptop. With the window big, you see the desktop design. Grab a corner and make that window smaller, about the size of your cell phone. The site will morph into a version that is optimized for a phone sized screen. And if you paid close attention, at the tablet size, you saw the navigation change to work with tablets.
For those that just want to see a screenshot. Here is the normal desktop.
And here is the same site on my phone:
Responsive Web Design was first used on a developer blog in May of 2010. In 2012 the movement had gained quite a bit of traction and lots of developers where jumping on the band wagon. By 2013, more mainstream publications started taking note of it.
Here are lots of posts from this blog.