What Is Responsive Design?

If you’ve been following web trends recently, you have certainly noticed that”responsive 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 website’s design and layout to adapt to the size of the screen used to view it. The objective is to provide an optimal viewing experience (no zooming, panning, or scrolling) for a broad range of devices.

How does this work?

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

What responsive design is NOT

If your website looks precisely the same as when you view it on your desktop, except really little and you have to zoom. You don’t have a responsive design.

If you do have a mobile site, but it’s URL (web address) begins with”m.” (m.yoursite.com), then it’s not responsive design. In cases like this, it is a design that is displayed on mobile devices upon device detection. Responsive design does not 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 shop, you get a web design vancouver mobile app, not a responsive site.

Where does responsive design come from?

The term”Reactive 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 uncontrollable. Websites change every few years and the new versions are not flexible to future devices and technology. His proposed solution: create a website that could adapt more flexibly to any screen size by changing the layout or hiding/showing interface elements.

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

How did responsive design become popular?

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 net.

This mobile device popularity also web design kingston showed us that their owners weren’t only accessing web content on mobile devices”on the go”, but in their homes or offices. They therefore expected to have the ability to view the exact 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 challenging to”detect” specific apparatus. It therefore became simpler to program based on width rather than on device detection (which covered several devices simultaneously ).

3. Responsive design is future-friendly

Thirdly, as mentioned 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 because breakpoints are becoming more and more fluid, with images often slowly scaling in size from 1 breakpoint to the next, responsive design can become truly flexible, for almost any imaginable screen size.

4. It’s cheaper to build responsive sites

Creating separate websites for different devices can get tedious and time-consuming and so costly to produce and maintain. A responsive website (which may be viewed by desktops and mobile devices equally ) uses the same content, and just tweaks its appearance and layout to optimize it ottawa web design for the best viewing and browsing conditions, no matter what screen size (or apparatus ).

Known issues with responsive design

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

• managing pictures (loading smaller image sizes for mobiles)

• working with text, forms and tables

• embedding external content

• navigation

• mobile-specific functionality

• search engine optimization Isn’t mobile-specific

• establishing coding standards