What is Responsive Design and why use it?

Responsive design adjusts the size of a website to the size of the device viewing the site.

With laptops, smart phones, netbooks, and tablets overtaking desktop computers as consumers’ main Internet resource, there’s no question that the way we use the web is changing. And along with it, the way we design for the web is changing too. Web design is no longer as simple as creating an attractive website for computers, as we now need to ensure that sites work across different devices as well, or risk losing a significant portion of potential customers and clients.

In the past, separate sites (with unique coding and design for each) were necessary to accommodate both desktop and mobile users, but with advancements in CSS, one website can now be built to service a wide range of devices and screen sizes. Using a CSS technique known as Responsive Design, what was once a costly and time-heavy investment can now be accomplished efficiently without having to maintain multiple websites. Businesses can reach the maximum potential online audience all from one website.

How it works

Responsive Design uses CSS to detect what device or screen size a site visitor is using, and responds with a layout optimized for those settings.  It’s one website, one design, with multiple layouts for multiple devices.

Here’s an example of Responsive Design from Web Designer Wall:

This simple blog layout starts as a normal fixed-width layout, and as the screen becomes narrower, it transitions to a fluid-width layout, and finally changes to a single-column layout for smart phones and similar devices. You can see this example in action here: http://webdesignerwall.com/demo/adaptive-design/final.html

If you view the above example on a computer, you will see the ‘Normal’ layout, but as you shrink your browser window, you will see the transition from ‘Normal’ to ‘Narrow’ and finally to ‘Mobile’.

Designing websites that can transition from computer to tablet to mobile does require some extra effort in the design and code, especially for more complex websites and designs. But in most (if not all) cases it is well worth the effort, and with some careful planning, a strategy for creating a responsive design can be implemented for a web project of any size.

If you would like to learn more about implementing Responsive Design on your website, reach out to the CyberSense team for a consultation.