La web evoluciona constantemente. Hemos sufrido varios grandes cambios a lo largo de la vida de la misma. Por tanto para ofrecer una buena experiencia de uso a los usuarios,hay que adaptarse a cualquier medio, a lo referente hace un momento se le llama Responsive Design
¿EN QUÉ CONSISTE RESPONSIVE DESIGN?
Consiste en adaptar tu web a cualquier dispositivo. Esto se consigue mediante una adaptación del diseño de la página, de manera, que según varia el tamaño la resolución, el contenido se va adaptando para «llenar» la pantalla.
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, cambiar… los distintos módulos de nuestra web para que estén adaptados siempre.
¿CÓMO ADAPTAR TU WEB A RESPONSIVE DESIGN?
Para adaptar tu web puedes empezar de cero, pero si no tienes un buen conocimiento sobre ello, es aconsejable usar uno de los muchos frameworks que existen para esto. En todo caso toma en cuenta las siguientes sugerencias:
- Las medidas fijas han muerto, debes usar en todo momento porcentajes. Todas las capas de tu web deben ser porcentuales al total de su contenedor.
- Puedes establecer unas medidas máximas absolutas con la propiedad max-width y luego darle un width 100% si deseas que una capa no pase de un cierto tamaño.
- Para las fuentes usa medidas en «em», con esto conseguirás una mejor adaptabilidad en las distintas resoluciones.
- A las imágenes dales también un max-width:100, así se re-dimensionarán siempre para cualquier medida.
- Usa media-queries.
VENTAJAS DEL RESPONSIVE DESIGN
Ventajas:
- Adaptabilidad a cualquier dispositivo sin importar su tamaño, lo que le otorga una mejor experiencia de usuario.
- Sólo tienes 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 tu web si necesitas posicionar tu web.
- Sólo hay una versión que mantener, si actualizas la web solamente tendrás que actualizar una única versión.
Conclusión
El diseño web adaptativo no solo ofrece soluciones, sino que abre un panorama de investigación tecnológica de gran relevancia para los desarrolladores y para los sistemas portátiles. A medida que los estándares de HTML y CSS vayan evolucionando, darán origen a la creación de elementos reutilizables que minimicen el tiempo de desarrollo, para dar cobertura a la variedad de navegadores y dispositivos actuales y futuros.
