The term responsive web design was coined in 2010 by American programmer Ethan Marcotte. The main characteristic of a responsive website is its flexibility. Such sites adapt to any device. Responsive web design has two basic building blocks.

The first is a flexible structure, where the dimensions of individual elements and images are specified in percentages. The second essential feature is the so-called media queries. These are rules that can be used to change the cascading styles of a page depending on certain properties of the display device.

Media Queries most often relate to screen width. This means that the styling of the website changes according to a specified breakpoint, after which a certain set of styles is applied.

Benefits of responsive design

A responsive website has many advantages, the biggest of which can be summarized in these points:

• Optimal display of pages on all current and future devices.
• You do not need a mobile version of the pages and do not have to manage the content of two websites.
• Browsing websites without the presence of an inconvenient horizontal scroll bar.
• Google prefers responsive websites in mobile search results.

Mobile First vs. Desktop First approach

Depending on the way responsive web design is applied, we distinguish two basic approaches. The first approach is the so-called Mobile First, where the process proceeds from the lowest resolutions to the highest. This means that the website is first coded for mobile devices and only then moves on to larger screens. In contrast, the Desktop First approach proceeds exactly the opposite, first programming for large devices and only then for mobile ones.

In the following article, we will show why we prefer the Mobile First approach, which is the basis of all our websites.