What is responsive design, exactly? Beyond the buzzword.

What is responsive design, exactly? Beyond the buzzword.

27 Jun
Responsive Design

If you've been following web trends recently, you've certainly noticed that "responsive design" is all the rage. This article brings us back to the basics: what is responsive design, where does it come from, and what are its benefits for website owners?
 

What does responsive design mean?

Responsive design is a technique that allows the same website's design and layout to adapt to the size of the screen used to view it. The goal is to provide an optimal viewing experience (no zooming, panning, or scrolling) for a wide range of devices.

How does it work?

Responsive design sets "breakpoints" (specific widths) upon which the design adapts, for example: the width of an iPad, the width of a horizontal Samsung Galaxy or the width of a vertical iPhone 5. When a breakpoint is detected, the layout automatically changes.

What responsive design is NOT

If your website looks exactly the same as when you view it on your desktop, except really tiny and you have to zoom. You do not have a responsive design.

If you do have a mobile website, but it's URL (web address) starts with "m." (m.yoursite.com), then it is not responsive design. In this case, it is a design that is displayed on mobile devices upon device detection. Responsive design doesn't care about which device you use, it only needs to know the dimensions (width and height) of your screen.

If you have to download an application from an app store, you have a mobile app, not a responsive website.
 

Where does responsive design come from?

The term "Responsive design" was coined in a 2010 article in "A List Apart", an influential web design blog.

In this article, the author laments the fact that web design is so transient. Websites change every few years and the new versions are not adaptable to future devices and technologies. His proposed solution: create a website that can adapt more flexibly to any screen size by changing the layout or hiding/showing interface elements.

The concept stems from responsive architecture, a movement that asks how physical spaces can "respond", or adjust, to the presence of people passing through them.

 

How did responsive design become popular?

According to Mashable magazine (a popular web trends website), 2013 is "the year of responsive web design". Here are the top 4 reasons:

1. Mobile and tablet usage exploded

First of all, responsive design followed the trend of smartphones and tablets as alternate devices for accessing the web.

This mobile device popularity also showed us that their owners were not only accessing web content on mobile devices "on the go", but in their homes or offices. They therefore expected to be able to view the same content on their mobile as on their desktop computer (not a different, or reduced, version).

2. The market was flooded with competing devices

Secondly, because there started to be so many types and models of devices, it became more difficult to "detect" specific devices. It therefore became easier to program based on width rather than on device detection (which covered several devices at once).

3. Responsive design is future-friendly

Thirdly, as stated in the original A List Apart article, if new devices reach the market but share similar widths as their peers, the website will continue to be optimized for them.

And since breakpoints are becoming more and more fluid, with images often gradually scaling in size from one breakpoint to the next, responsive design can become truly flexible, for any imaginable screen size.

4. It’s cheaper to build responsive websites

Creating separate websites for different devices can become tedious and time-consuming and therefore costly to create and maintain. A responsive website (which can be viewed by desktops and mobile devices alike) uses the same content, and just tweaks its appearance and layout to optimize it for the best viewing and navigating conditions, no matter what screen size (or device).
 

Known issues with responsive design

While it does seem to be, responsive design is not perfect. Several issues still exist, such as:

•    managing images (loading smaller image sizes for mobiles)

•    working with text, forms and tables

•    embedding external content

•    navigation

•    mobile-specific functionality

•    search engine optimization is not mobile-specific

•    establishing coding standards
 

You can find out more in this article by Smashing Magazine. But for now, it seems to be the best solution to the multiplication of devices and screen sizes/resolutions of recent and coming years.
 

Show and tell: Test your website's responsive design

Want to test out your website on multiple devices at once? Try the "Responsinator", an online tool that shows you what your website looks like in different device widths.

Responsive design is not just for websites, it is also used for email newsletters. It's amazing how quickly web trends and technology evolve. Case in point: I no longer agree with some of the stuff written in my 2010 blog article "Presenting content in mobile devices"!

Tags : responsive design, websites

Add new comment