Un diseño web responsive es el que es capaz de adaptarse a pantallas de diferentes tamaños con un solo sitio web. El sistema detecta automáticamente el ancho de la pantalla y a partir de ahí adapta todos los elementos de la página, desde el tamaño de letra hasta las imágenes y los menús, para ofrecer al usuario la mejor experiencia posible. ¡Parece magia!
En ocasiones, se confunde el responsive con las webs para móviles, pero no se trata de lo mismo. En el caso del diseño responsive, tenemos un solo sitio web que puede adaptarse para dispositivos de todo tipo, desde ordenadores de escritorio con grandes monitores hasta móviles, pasando por tablets y otros. En cambio, crear un sitio móvil implica diseñar desde cero una web independiente, cuyos contenidos y formato están especialmente adaptados para funcionar mejor en dispositivos móviles.
¿Qué elementos hay que tener en cuenta para diseñar un buen sitio responsive?
El diseño web responsive es una disciplina integral, que tiene en cuenta muchísimos factores para garantizar una experiencia de usuario satisfactoria. Estos son algunos de los elementos que es necesario adaptar para ofrecer una buena experiencia en pantallas de todos los tamaños:
- Las tipografías. Evidentemente, el tamaño de letra tiene que ser diferente en función de la pantalla, de manera que podamos leer los textos sin necesidad de hacer zoom. Esto implica, por ejemplo, que no debemos incluir columnas con un ancho predeterminado en un sitio responsive. La familia tipográfica que escojamos también es muy importante a la hora de determinar la legibilidad.
- Las imágenes y los vídeos. Los elementos visuales de la página deben seguir una proporción lógica en función del dispositivo donde se muestren, de manera que podamos verlos con comodidad.
- El formato horizontal o vertical. En particular, es necesario tener en cuenta que los usuarios de móviles suelen preferir el vertical, pero pueden alternar entre ambos para visualizar un contenido determinado.
- La usabilidad. Los usuarios de móviles y tablets usan pantallas táctiles para interactuar con los contenidos, mientras que en los ordenadores esta interacción tiene lugar a través del ratón. Esto implica que los menús, los botones y demás elementos deben repensarse para ofrecer una buena experiencia de usuario en ambos casos.
- Los tiempos de carga. Intentar cargar una web de escritorio desde un teléfono móvil puede ser una experiencia extremadamente frustrante para el usuario y hacer que abandone fácilmente. Por eso, es necesario optimizar al máximo los tiempos de carga en todos los dispositivos.
- Los efectos. Por ejemplo, el hover funciona en ordenadores de escritorio, pero no en móviles, así que si colocas en él el “leer más” de un artículo o noticia los usuarios móviles no podrán acceder a
CARACTERÍSTICAS DEL DISEÑO RESPONSIVE
Adaptar un diseño web a un diseño responsive consiste en calibrar y adaptar los elementos de la web para que se ajusten al ancho de cada dispositivo para así tener una visualización óptima y se puedan mostrar los mismos contenidos a cualquier persona sin ninguna dificultad.
Algunas características son:
- Adaptar el ancho de la web al ancho del dispositivo. El diseño pasa a ser vertical, la web se adapta al ancho del dispositivo, el scroll horizontal desaparece y la navegación es más cómoda y la fluidez del contenido hace que el usuario no tenga que desplazarse horizontalmente.
- Reorganización de los contenidos y elementos de la web. Los contenidos deben de disponerse para que se puedan ver en todas las pantallas. Se debe de reajustar el tamaño y separación de los contenidos según el ancho del dispositivo.
- Simplificar. En una pantalla móvil debemos de priorizar los elementos que sean necesarios, y eliminar objetos gráficos estéticos para que la carga visual sea menor.
VENTAJAS DEL DISEÑO RESPONSIVE
- Aumento de la velocidad de carga. Al haber eliminado los elementos que no son necesarios, la carga de la web será más rápida.
- No afecta de forma negativa al SEO. Google ha informado que las webs con un diseño responsive obtendrá una mejor posición de sus resultados en estos dispositivos móviles.
- No hay duplicidad en la URL. Evita el contenido duplicado ya que solo existe una web.
- Ahorro de tiempo y de costes de mantenimiento. La gestión de un único sitio web es más económico.
- Baja tasa de rebote de los usuarios. La mayor parte de los usuarios que abandonan una página web desde su dispositivo móvil se debe a una mala visualización de este. Con el diseño responsivo, el usuario disfrutará siempre de una buena experiencia de navegación.
- Se mejora los resultados de conversión. Tener una página web optimizada para móviles, tablets y ordenadores, el porcentaje de usuarios que adquieren el producto o envían un formulario es mayor.
- Permite desarrollar una estrategia de marketing. Esto te permite unificar los diferentes soportes haciendo que la web sea más sólida y mejore su efectividad.
INCONVENIENTES DEL DISEÑO RESPONSIVE
El coste de su desarrollo inicial es mayor al de una web normal debido a su dificultad técnica, y al uso de las imágenes de la web en vez de usar unas específicas para que el tiempo de carga sea inferior. En los últimos años se está generalizando a una gran velocidad, creándose frameworks, unas aplicaciones preconfiguradas para que tener que crear las páginas adaptativas desde cero. Algunas de estas aplicaciones es Bootstrap, un framework creada por Twitter¸Foundation 3 y HTML5 Boilerplate, usado por Google, Microsoft como también Nike.
QUÉ TENER EN CUENTA PARA TU WEB RESPONSIVE
Son tres las opciones para ofrecer tu web a los usuarios que nos visitan desde dispositivos móviles: web móvil, app nativa y web responsive. La que más fuerza está cogiendo es la web responsive debido a su rapidez y al ser la más económica. Esta técnica ha modificado el diseño, el patrón al igual que el cambio de los hábitos de navegación y de consumo.
Antes de crear una página web móvil, es el propio Google el que recomienda el diseño responsive debido a que: la experiencia del usuario mejorará, se evitará problemas de contenido duplicado y el usuario obtendrá una imagen más consistente. Aun así antes de hacer tu web responsive debes de tener en cuenta:
- Carga de página. Esto suele ser un problema ya que se cargan exactamente los mismos recursos que para la web de escritorio. Como solución, trata de utilizar librerías para hacer una carga de página condicional.
- Tamaño de la pantalla. Se recomienda diseñar con el patrón mobile-first parara evitar tener problemas de adaptación con las pantallas y evitar sobrecargar la página de elementos inútiles.
- Evita los efectos. Se recomienda hacer una comprobación multi dispositivo-plataforma, ya que algunos efectos que usas en la web de escritorio no funcionarán en la web responsive.
