"Responsive design" seems to be one of the new buzz phrases in the world of web development. What is it? Why should you care?
In 2014, the number of global mobile devices exceeded the number of desktop computers. People regularly use their mobiles and tablet devices to go online and use websites. Last year, more time was spent on the internet using mobile devices.
Image source: http://www.smartinsights.com/?attachment_id=53811
The problem with mobile devices is that they have small screens. This means you can't fit as much information on them as you can on a desktop or laptop computer screen. Your site needs a new layout - one that will look good and work well on a mobile device.
That's fine, but mobile devices aren't all the same size. When you've squeezed your site's content down and made it fit on your phone, you take a look at your friend's phone and it looks awful. Why? Because your friend has a phone with a screen that's 2 inches bigger than yours! Have you looked at your site on an iPad, or a 7 inch Android tablet?
It's just not possible to design and test your site for every single device separately - there are around 10,000 different Android devices by hundreds of manufacturers. You can't just create a small layout either, because then it won't work on desktop computers. You even need to think about the problems with larger screens too - newer PCs and iMacs have screens up to 27 inches. Maybe you'd like your site to take advantage of Apple's "retina" screens on the iPhone, iPad, Macbook and iMac devices?
We haven't even mentioned orientation yet - user's might visit your site on a tablet while holding it in portrait, then change the orientation to landscape, expecting the layout to change immediately!
Responsive design is just a term applied to the process of changing the layout of the site so it will work no matter what device you're using, and no matter which way you're holding it!
Responsive vs Adaptive
A common characteristic of a responsive template is that it will expand and contract with the browser's viewport, so if you resize the browser, as you drag, you'll see the elements of the layout move with the browser, responding to the resize event immediately. An alternative approach is to use "adaptive design", where the site will adapt to the screen size based on a number of common "bands" of dimensions. For example, when the size of the browser's viewport drops below a certain number of pixels, parts of the site will move around to make it appear correctly for the size of screen.
If you're using a desktop or laptop computer, you can resize your browser right now to see this site's adaptive elements get resized or moved.