what responsive design is and what it is used for
Responsive design is a type of design that allows a website to adapt to various desktop resolutions and various mobile devices natively. In recent years, with the release of increasingly large and different monitors, and with the advent of mobile devices, design has had different needs. So we need to thought of a design that can be responsive: that is, adaptable to any resolution and device; without the need to create special versions of the website for mobile devices.
How can a design adapt to different resolutions and devices? Thanks to the CSS code, which with some rules makes some containers "fluid" and with others, more specific, it allows a repositioning and adaptation of the containers and the various elements. Some contents, such as images and fonts, are treated in such a way as to be "elastics", so that they can enlarge or shrink based on the resolution of the device with whom you are browsing the website.
The media queries are special rules that write different code for each resolution range. They create breakpoints where the code interprets some HTML elements differently. These points can be more or less numerous, based on the choices of the web designer and the complexity of the design. But broadly speaking they can be identified in the following 6:
- 320 pixels: for smartphones with vertical orientation
- 480 pixels: for smartphones with horizontal orientation
- 600 pixels: for small tablets with vertical orientation
- 768 pixels: for tablets with 10-inchs screens in portrait orientation
- 1024 pixels: desktop or laptop computers or tablets with high resolution screens
- 1200 or more pixels: desktop or laptop computers
responsible design
With the union of fluid contents and media queries rules we get a responsive website. But it is also good to consider the side responsible for design: to ensure that the website uses the latest technologies without adversely affecting old browsers or other devices.
We therefore adopt special design techniques and take advantage of the possibilities offered by the HTML and CSS languages, ensuring that older browsers still display the website well. Maybe they won't show particular effects or forms of design (because they can't correctly interpret the code), but they will still allow an excellent visual design and a positive user experience.
This type of design introduces the progressive improvement, a technique that aims to use all the latest web technologies available. Modern browsers can show the website as it was actually designed. Dated browsers will omit rules that are unable to interpret and will read classic rules which will make available the website anyway. Obviously it is up to the web designer to consider these design methods on create websites.
Benefits of responsive design
The undisputed and obvious advantage of responsive design is having a website that adapts to all resolutions and devices. Create websites with responsive design is currently a market requirement. Users and customers, will certainly view your website from various devices, so it is good that it is able to show itself with the best possible layout.
If the web project does not have particular characteristics, it is not necessary to create a different website for mobile devices. In this way you can save on the budget and also on the time of realization, still obtaining a website visible correctly on mobile devices.
The context that I consider most important is certainly related to SEO, which differs between desktop and mobile.