La web evoluciona constantemente. El diseño ha cambiado y el último cambio que estamos viviendo es uno de los más importantes, sacar la web del pc y llevarla a todo tipo de dispositivos: moviles, tablets, lentes, relojes,etc. Por tanto para ofrecer una buena experiencia de uso a los usuarios, hay que adaptarse a cualquier medio. La solución ha nacido y se llama Diseño web Responsive
¿En que consiste el Diseño Responsive?
Consiste en adaptar un website a cualquier dispositivo. Esto se consigue mediante la adaptación del diseño de la página, a cualquierl tamaño o resolución de pantalla, es decir, el contenido se va adaptando a los distintos tamaños de los dispositivos (Pcs, tablets, smartphones, etc).
Para conseguir esto, se emplean una serie de técnicas css, y sobre todo el uso de los media queries. Estos nos permiten según el tamaño de la pantalla; mover, ocultar, y/o cambiar los distintos módulos de nuestra web para que estén adaptados siempre.
Diseño Responsive
¿Como adaptar un website al Diseño Responsive?
Para adaptar una web se puede empezar desde cero, pero si no se tiene un conocimiento sobre ello, es aconsejable usar uno de los muchos frameworks que existen para esto. Ejemplos hay muchos como: Bootstrap, Grid, Titan, etc..
Si el proyecto ya esta construido y solo se desea adaptar lo que se tiene, se pueden aplicar lo siguientes consejos:
No es aconsejable utilizar medidas fijas (pixeles), se debe usar en todo momento porcentajes. Todas las capas deben ser porcentuales al total de su contenedor.
Se pueden establecer medidas máximas absolutas con la propiedad max-width y luego darle un width 100% si se desea que una capa no pase de un cierto tamaño.
Para las fuentes se aconseja usar medidas en “em”, con esto se conseguirá una mejor adaptabilidad en las distintas resoluciones.
Para las imágenes colocar también un max-width:100%, así se re-dimensionarán siempre para cualquier medida.
Usar media-queries.
Uso de los media queries:
Uno de los elementos básicos del responsive design son los media-queries, con ellos se podrá darle una apariencia u otra dependendiendo de varios factores, el más importante el tamaño de la pantalla. A continuación vemos un ejemplo sencillo donde si la resolución es menor a 900 ocultamos una capa:
@media screen and (max-width:900px){
.capa
{
display:none;
}
}
Con estos sencillos códigos las posibilidades son infinitas. Podemos ocultar contenido, moverlo, cambiar el diseño, cualquier cosa para que el resultado quede lo más adaptado posible.
Ventajas del Diseño Responsive
Adaptabilidad a cualquier dispositivo sin importar su tamaño, lo que le otorga una mejor experiencia de usuario.
Sólo se tiene un sistema de urls, por lo que no habrá problemas de contenido duplicado.
Para el SEO es lo recomendado por google. Con esto queda claro que es la mejor solución para adaptar el website si se necesita posicionar.
Sólo hay una versión que mantener, si se actualiza la web solamente se tendrá que actualizar una única versión.
Desventajas del Diseño Responsive
Si se tiene una web creada puede ser difícil o casi imposible adaptarla a esta tecnología.
Una de las principales desventajas es el rendimiento. A día de hoy es imposible sacar una imagen u otra dependiendo de la resolución usando estas técnicas únicamente. Para poder hacerlo hay que usar programación de servidor o javascript, o emplear la misma imagen para todos los tamaños. Esto haría que el usuario móvil tenga que descargarse las mismas imágenes que desde una versión de escritorio.
En los navegadores antiguos no funciona, como siempre el principal problema Internet Explorer.