Ratio: 0 / 5
Visión de las futuras webs: Responsive Web Design
Tal y como veíamos en el anterior artículo El uso de las media queries, hacíamos una breve introducción en su uso para que se pudieran visualizar en la mayor parte de los dispositivos existentes. Esto es debido a su conexión con otro nuevo término: el "Responsive Web Design".
El concepto procede del inglés, aunque existen muchas "versiones" sobre él, nosotros nos quedaremos con el concepto de "diseño web adaptable". La idea es englobar, como se ha dicho antes, la idea de una única web para ser visualizada en cualquier parte y accesible desde cualquier medio ya sea tanto de sobremesa, móvil, televisión, etc...
Al principio, el coste en tiempos de desarrollo y testeo de este tipo de portales puede aumentar al igual que su complejidad pero con una adecuada planificación es más efectiva y rentable que el mantenimiento y desarrollo de las soluciones específicas de cada una de las plataformas en las que se quiera visualizar.
Funcionamiento de la técnica
Básicamente la filosofía del RWD es la realización de un diseño flexible en el cual puedan ser mostrados u ocultados los diferentes elementos según el tipo de dispositivo en el cual se esté visualizando, por ejemplo, que un menú que en nuestra página web se encuentre en el lado derecho al lado del logotipo de la empresa, cuando sea visto desde un dispositivo móvil este mismo elemento se posicione justo debajo del mismo logotipo.
Todo esto se consigue mediante CSS (CSS3) y la utilización de las media queries que se habló en el capítulo anterior.
Además de lo dicho, la estructura del sitio sigue unos patrones de diseño denominado "fluido" o lo que es lo mismo, que los anchos representativos como las columnas o algunas de las imágenes sean relativas (con porcentajes) al portal.
Beneficios del Responsive Web Design
- Reducción de costos. Con la realización de una única parte debido a que solo hace falta crear un único portal mientras que anteriormente hacía falta crear una versión para cada medio empleado.
- Actualizaciones más eficientes. El portal solo es necesario el actualizarlo una única vez y ya se encuentra visible en todos los dispositivos.
- Aumento de la usabilidad. Los estudios que han sido realizados aportan que cuando la usabilidad de esta tecnología aumenta, aumenta la conversión.
- Atracción hacia el visitante. Al ser una tecnología nueva y actual genera un impacto positivo en las personas que lo ven por primera vez, lo que permitirá relacionar una web con las palabras "creatividad" e "innovación".
Ejemplos de Responsive Web Design
A continuación se van a colocar unos ejemplos de la técnica que habíamos hablado. Para que podais ver la diferencia deberéis ir encogiendo poco a poco el ancho de vuestro navegador y así podréis ir viendo la diferencia que experimentan los usuarios del resto de plataformas.