What does We Responsive Website mean? Why is it fundamental for the User Experience? Find out all the details by reading this article.

A responsive website is a fundamental condition for any company or organization that wants to do online marketing and be successful on the web. Let's find out now what responsive site means and how to create one from scratch.

What is a responsive site

A responsive site is a website that can automatically adapt graphically to any device on which it is displayed (from PCs to tablets , via smartphones and web TVs ). In this way, a responsive website minimizes the user's need to resize the image shown on the screen and to scroll through the various contents to find what he is looking for, improving his user experience .

Why it is important to have a responsive site

Having clarified the meaning of a responsive website, it goes without saying that a better user experience (or User Experience ) translates into greater possibilities that the user remains on the website itself to enjoy the contents, products or services offered to him. internal.

Most users, when they visit a site not optimized for the device they are using, are pushed to abandon it quickly. The risk, therefore, for those activities that have not yet taken steps to make their sites responsive, is that a potential customer may abandon his web showcase and turn to the site of a direct competitor.

In recent years, where the use of web content on smartphones has become central, it is essential to have a mobile friendly site , that is, that it can be displayed correctly on multiple types of mobile device. Google itself, not surprisingly, recommends using responsive sites and penalizes sites that are not mobile friendly .

How to create a responsive site from scratch

To know how to create a responsive site from scratch it is important to know some technical details. The responsive design is based mainly on three distinctive elements:

• Fluid grid that allows the responsive site to change its size based on those of the device on which it is displayed;
• Flexible images and texts that can vary in size, appear or disappear if necessary, based on what you decide to show on the various displays;
• Media queries that cause the previously mentioned elements to appear correctly.

Specifically, at a technical level, it is thanks to the media queries that different specific portions of the CSS are applied in different ways when the site is displayed on screens of different sizes. The parts of CSS contained within the media queries are applied when there are breakpoints , or breakpoints , which determine the change of the fluid grid and of the flexible images and texts.

Generally, breakpoints are based on the most common sizes of devices through which websites are viewed. Therefore, the advice for those who want to create a responsive site from scratch is to set breakpoints for the size of the most common devices.

A fundamental step for the creation of a responsive website Design is that relating to tests : it is necessary to make sure, in fact, that the content of the site actually adapts appropriately to the various dimensions previously chosen by us. The easiest way to do this is to check it directly on the various devices, but it is also possible to do it from a browser (using Google Chrome or Mozilla Firefox) by opening a site and clicking F12 or right-click and "Inspect".