The web is constantly evolving. We have experienced several major changes over the life of the same. The design has changed and the last change we are experiencing is one of the most important, get the pc website and take it to all sorts of devices: phones, tablets, etc … glasses ?, therefore to provide a good experience of use to users, you have to adapt to any environment. The solution has been born and is called Responsive Design
What is Responsive Design?
Is to adapt your website to any device. This is achieved by adapting the design of the page, so that the size varies according to the resolution, the content adapts to “fill” the screen.
To achieve this, a number of techniques are used css, and especially the use of media queries . These allow us depending on the size of the screen; move, hide, change … the various modules of our website so that you are always adapted.
How to adapt your website to Responsive Design?
To adapt your website you can start from scratch, but if you have a good knowledge about it, it is advisable to use one of many frameworks that exist for this. There are many examples such as Bootstrap , Grid , Titan, etc. ..
You can not use them because you have a project already built or do you just want to zero:
Still measures have died, you should use percentages across time . All layers of your website should be the total percentage of its container.
You can set a maximum absolute property measurements with max-width and then give you a 100% width if you want a layer does not exceed a certain size.
For sources used in either ’em ” , with this you get a better adaptability to various resolutions.
At dales images also max-width: 100, so they are always re-dimensioned to measure.
Use media-queries.
Using media queries
One of the basics of responsive design are the media-queries, we can give them an appearance or other depending on several factors, the most important the screen size. Here we see a simple example where if the resolution is less than 750 hide a layer:
media screen and (max-width: 750px) {
.capa
{
display: none;
}
}
With these simple codes the possibilities are endless. We can hide content, move it, change the design, anything to get the result it is as tailored as possible.
Advantages and disadvantages of responsive design
Advantages
Adaptability to any device regardless of its size, giving you a better user experience.
Just urls system, so there will be no duplicate content issues.
For SEO is recommended by google . This makes it clear that the best solution is to adapt your website if you need to position your website.
There is only one version to keep , if you update the web you only have to update one version.
Disadvantages
If you have a website created can be difficult or impossible to adapt to this technology.
One of the main drawbacks that I see is performance . Today it is impossible to take a picture or another depending on the resolution using these techniques only. To do this you have to use JavaScript or server programming, or use the same picture for all sizes. This would make the mobile user to download the same images from a desktop version.
In older browsers does not work, as always the main problem Internet Explorer.
