Responsive Design

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’s responsive design, where does it come from, and what are its advantages for owners?

 

What does responsive design mean?

Reactive design is a technique which 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 optimum viewing experience (no zooming, panning, or scrolling) for a wide range of devices.

How does it work?

Reactive design sets”breakpoints” (specific widths) upon which the design adapts, for example, the width of an iPad, the diameter 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 web design looks precisely 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 have a mobile website, but it’s URL (web address) starts with”m.” (m.yoursite.com), then it’s not responsive design. In cases like this, it’s a design that is shown on mobile devices upon device detection. Responsive design doesn’t care about which device you use, it only needs to know the dimensions (height and width ) of your screen.

If you must download an application from a programming shop, you get a mobile app, not a responsive site.

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 couple of years and the new versions aren’t adaptable to future devices and technologies. His proposed solution: create a website that could adapt more flexible to any screen size by altering the design or hiding/showing interface components.

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

To start with, responsive design followed the trend of smartphones and tablets as alternative 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 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 began to be so many types and models of devices, it became more difficult to”detect” particular apparatus. It, therefore, became simpler to program based on width rather than on device detection (which covered many devices at once).

 

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

And since breakpoints are getting more and more fluid, with graphics 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 is cheaper to build responsive websites

Creating separate websites for various devices can get tedious and time-consuming and therefore costly to produce and maintain. A responsive website (which can be viewed by desktops and mobile devices alike) uses exactly the identical content and just tweaks its appearance and layout to optimize it for the best viewing and browsing conditions, regardless of what screen size (or apparatus ).

Known problems with responsive design

While it does seem to be, responsive design isn’t perfect. Several issues still exist, for example:

• managing pictures (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