Diseño responsivo

Diseño web responsive o adaptativo

El Diseño web Responsivo o Adaptativo es una técnica de diseño para sitios web cuya finalidad es adaptar el aspecto de las distintas páginas de un sistio web a la diversidad de dispositivos que hoy en día se pueden utiilizar para el acceso a dichas webs.

El concepto de One Web hace referencia a la idea de construir una ‘Web para Todos’ (Web for All) y accesible desde cualquier tipo de dispositivo (Web on Everything). Utilizando esta metodología en los diseños web, posibilita que dicha web sea totalmente visible en dispositivos tan variados como smartphones, tabletas, ordenadores personales, etc.

El uso de dispositivos móviles ha aumentado notablemente en los años 2010, en particular, el uso de tabletas y teléfonos inteligentes. La evolución de la navegación en Internet ha ido a la par, y ello ha popularizado la navegación en Internet mediante una creciente variedad de dispositivos y resoluciones de pantalla, lo que a su vez ha creado unas necesidades de adaptar la experiencia de la navegación web a ellos.

Con una sola versión en HTML y CSS se pueden cubrir todas las resoluciones de pantalla, con lo que el sitio web estará optimizado para distintos dispositivos y resoluciones de pantalla. Esto mejora la experiencia de usuario a diferencia de lo que ocurre, por ejemplo, con sitios web de ancho fijo cuando se acceden desde dispositivos móviles. De esta forma se reducen los costos de creación y mantenimiento cuando el diseño de las pantallas es similar entre dispositivos de distintos tamaños. También evita tener que desarrollar aplicaciones ad-hoc para cada sistema operativo móvil: iOS, Android, Windows Phone, BlackBerry OS, etcétera.

Desde el punto de vista del posicionamiento en buscadores, aparecería una única URL en los resultados de búsqueda, con lo cual se ahorrarían múltiples redirecciones y los fallos que se derivan de estas. También se evitarían errores al acceder al sitio web en concreto desde los llamados social links, es decir, desde enlaces que los usuarios comparten en medios sociales tales como Facebook o Twitter, y que pueden acabar en error dependiendo desde qué dispositivo se copió y desde qué dispositivo se intenta acceder a ese enlace.

A la hora de visualizar Google tu página responsiva, puntúa mejor su posicionamiento web. Esto se debe a que Google piensa en los usuario y cómo van a poder visualizar de mejor forma las páginas web.

El diseño web adaptable se hace posible gracias a la introducción de las media queries en las propiedades de los estilos CSS en su versión número 3. Las media queries son una serie de órdenes que se incluyen en la hoja de estilos que indica al documento HTML cómo debe comportarse en diferentes resoluciones de pantalla.

Para entenderlo mejor, los diseños de las páginas web, al igual que los periódicos y las revistas, están basados en columnas, entonces con la filosofía del diseño adaptativo, si una web a resolución de PC (1028x768 px) tiene 5 columnas, para una tableta (800x600 píxeles) necesitaría sólo 4, y en el caso de un teléfono inteligente cuyo ancho suele ser entre 320 y 480 píxeles las columnas usadas serían 3.

El diseño responsivo debe fluir con una adaptación constante del tamaño de los gráficos y las estructuras compositivas de un sitio web dentro de los diferentes dispositivos y tamaños de pantalla considerando de forma automática la disposición (vertical – horizontal) en la que se visualizan los contenidos.

Existen herramientas de diseño web que permiten crear dichos diseños adaptativos, como puede ser Joomla, Wordpress, etc.

Ventajas del diseño responsivo

  • Mejora la experiencia del usuario, con esta técnica de diseño el visitante podrá ver el  contenido del sitio web desde cualquier tipo de dispositivo. El ofrecer una navegación fácil por el sitio web, con un buen diseño es fundamental para que los visitantes vuelvan.
  • Los navegadores lo agradecen, tener un sitio web cin diseño responsivo es bastante importante para mejorar el posicionamiento SEO en los navegadores, ya que tendrán más tráfico.
  • Es más práctico, no hay necesidad de generar contenidos espécificos según el tipo de dispositivo con el que se accede al sitio web, lo cual conlleva, un menor mantenimiento.

A continuación puedes comprobar un diseño responsivo visto desde un ordenador y desde un smartphone.

Diseño responsivo visto en un pc

Diseño responsivo visto en un smartphone