The concept of Responsive Design was first introduced by Ethan Marcotte in his 2010 article, Responsive Web Design, published here on A List Apart. This refers to the ability of a website to adapt to different screen resolutions / screen sizes (PCs, laptops, tablets, smartphones etc.), without suffering major degradation.

This approach comes to the aid of those who were forced to create a lot of different versions of a website, so that it can be accessed from an iPad, Blackberry, Kindle, netbook, iPhone, etc…

Once adopted, the responsive designed website should automatically recognize what device it’s displayed on and respond to user preferences. Thus, there will be no need for multiple versions of the website for each device we use.

 

How to build a responsive site?

A responsive site requires three main ingredients:

  • fluid grids
  • flexible images
  • media queries

 

Fluid grids

Some time ago, before this concept became popular, most websites were based on fixed grids and functioned better this way, because most computers screens were using about the same resolution. Currently, taking into account all existing resolutions, fixed grids are no longer the best option.

The flexible system of grids is based on proportions and its layout ensures that all elements are resized according to each other. It’s no longer measured in pixels, but in relative units and percentages.

Flexible images

The second essential ingredient, they can change their width and height depending on the screen resolution and size of the grid. To promptly provide these images, they can be saved on the server in sets of 3 or 4 sizes, which will then be loaded according to the size of the screen it’s displayed on.

Media Queries

They represent an effective method to load different CSS styles, for different resolutions, in order to provide the best possible visitor experience.

 

3 advantages of Responsive Web Design

  • One version of the website that works well on any device.
  • The possibility of sharing the same URL between different devices.
  • The layout adapts to the browser, eliminating horizontal scrolling.

3 disadvantages of Responsive Web Design

  • Prolonged development, namely higher costs.
  • Difficulties due to the fact that this concept introduces a new level of complexity to any layout
  • More problems in compatibility between browsers

LEAVE A REPLY

Please enter your comment!
Please enter your name here