CanadaVictoria Park Ave Ontario

Responsive Design

What is Responsive Design?

If you’ve been following web trends recently, you’ve certainly noticed that”reactive design” is all the rage. This report brings us back to the fundamentals: what is reactive design, where does it come from, and what are its benefits for website owners?


What does responsive design mean?

Responsive design is a technique which allows the identical and design to adapt to the size of the screen used to see it. The goal is to provide an optimum viewing experience (no zooming, panning, or scrolling) for a wide range of devices.


How does it work?

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


What responsive design is NOT

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

If you do have a mobile website, but it’s URL (web address) begins with”m.” (, then it’s 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 display.

If you must download an application from a program store, you get a mobile app, not a responsive website.


Where does responsive design come from?

The term”Responsive design” was filmed 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 altering the layout or hiding/showing interface elements.

The concept stems from reactive design, a motion which asks how physical spaces can”respond”, or adjust, to the presence of individuals passing through them.


How did responsive design become popular?

Here are the top 4 reasons:


1. Mobile and tablet usage exploded

To start with, responsive design followed the tendency of tablets and smartphones as alternative devices for accessing the net.

This mobile device popularity also showed us that their owners weren’t only accessing web content on mobile devices”on the go”, but in their offices or homes. They therefore expected to be able to view the exact same content in 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” particular devices. It therefore became easier to program based on width as opposed to on device detection (which covered several devices simultaneously ).


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 web site will continue to be optimized for them.

And since breakpoints are becoming more and more fluid, with graphics often slowly scaling in size from 1 breakpoint to the next, responsive design can get truly flexible, for any conceivable screen size.


4. It is cheaper to build responsive websites

Creating separate websites for various devices can get tedious and time-consuming and so costly to create and maintain. A responsive site (which may be considered by desktops and mobile devices alike) uses the same content, and just tweaks its look 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 picture sizes for mobiles)

• working with text, tables and forms

• embedding external content

• navigation

• mobile-specific functionality

• search engine optimization is not mobile-specific

• establishing coding standards