The web is constantly evolving. We have undergone several major changes throughout its life. The design has changed, and the last change we are experiencing is one of the most important, take the web from the PC, and take it to all types of devices: mobile phones, tablets, glasses. Therefore to offer a good experience of use to the users, it is necessary to adapt to any means. The solution is born and is called Responsive Design.
What is Responsive Design?
It consists of adapting your website to any device. This is achieved by adapting the design of the page so that the resolution varies depending on the size, and the content is adapted to “fill” the screen.
To achieve this, a series of CSS techniques are used, and especially the use of media queries. These allow us according to the size of the screen, move, hide, change … the different modules of our website so that they are always adapted.
How to adapt your website to Responsive Design?
To adapt your website, you can start from scratch, but if you do not have a piece of good knowledge about it, it is advisable to use one of the many frameworks that exist for this. There are many examples, such as Bootstrap, Grid, Titan, etc.
If you do not want to use them because you have a project already built or you simply want to do it from scratch:
- Fixed measures have died; you must use percentages at all times. All layers of your website should be percentage to the total of your container.
- You can set absolute maximum measures with the max-width property and then give it a 100% width if you want a layer not to pass a certain size.
- For the sources use measures in “em,” with this, you will get better adaptability in the different resolutions.
- The images also give them a max-width: 100, so they will always be resized for any measure.
- Use half-queries.
Advantages and disadvantages of responsive design
- Adaptability to any device regardless of its size, which gives it better user experience.
- You only have one URL system, so there will be no duplicate content issues.
- For SEO, it is recommended by Google. With this, it is clear that it is the best solution to adapt your website if you need to position your website.
- There is only one version to keep, if you update the web, you will only have to update a single version.
- If you have a website created, it may be difficult or almost impossible to adapt it to this technology.
- In older browsers, it does not work, as always, the main problem Internet Explorer.