Las cosas eran más sencillas antes de que pudiéramos tener Internet en los teléfonos móviles y las tabletas. Tener una presencia en línea significaba diseñar un sitio web que sólo tuviera que visualizarse en la pantalla de un ordenador de sobremesa, y tal vez de un portátil. Ahora, sin embargo, hay que tener en cuenta una plétora de tamaños de pantalla, desde las más grandes de los ordenadores de sobremesa y los portátiles hasta las más pequeñas de los teléfonos móviles y las tabletas, sobre todo porque, si una página web no se muestra correctamente en una pantalla determinada, el usuario pasará rápidamente a otra, de ello hablamos en este artículo, de diseño web adaptable y responsive.
Existen dos enfoques para garantizar que un sitio web esté optimizado para pantallas de móviles, tabletas, portátiles y PC: el diseño responsivo y el diseño adaptativo. Aunque ambos pretenden resolver el mismo problema, utilizan estrategias diferentes.
Conocer la diferencia entre estos dos enfoques le ayudará a decidir cuál tiene más sentido para su próximo proyecto de experiencia de usuario, que es muy importante en el diseño web moderno..
Primero, te cuento qué es el diseño responsivo
Un sitio web creado con diseño responsivo sirve el mismo sitio en todos los dispositivos, pero ese sitio es fluido y cambiará su diseño y apariencia en función del tamaño y la orientación del dispositivo.
Los desarrolladores utilizan CSS para asegurarse de que cada página del sitio pueda cambiar de formato en función del tamaño de la ventana gráfica del usuario y sólo tengan que crear una base de código para el sitio. Utilizan algo llamado puntos de ruptura para indicar al sitio cuándo debe ajustarse para adaptarse a los diferentes tamaños de pantalla.
¿El resultado? El mismo sitio puede tener un diseño de cuatro columnas en una pantalla grande de ordenador de sobremesa, un diseño de tres columnas en una pantalla más pequeña de ordenador portátil, un diseño de dos columnas en una pantalla de tableta y un diseño de una sola columna en un teléfono móvil. Sea cual sea el dispositivo en el que veas un sitio web responsivo, encontrarás el mismo contenido y diseño básicos.
Los diseñadores de UX que participen en la creación de un diseño responsivo tendrán que colaborar estrechamente con los desarrolladores para asegurarse de que el diseño es utilizable en todos los tamaños de pantalla. La experiencia del usuario cambiará junto con los elementos de la página, por lo que es importante que el diseñador de UX se asegure de que el sitio mantiene su usabilidad a medida que se reformatea. Una forma de hacerlo es asegurarse de que el contenido más importante tenga prioridad en los distintos dispositivos, especialmente en los tamaños de pantalla más pequeños.
Segundo, qué es el diseño adaptativo
En el diseño adaptativo, se crea un diseño de sitio web diferente para la pantalla de cada dispositivo. A medida que se carga, el sitio reconoce el tamaño de la pantalla y sirve el diseño que se hizo para esa ventana gráfica. De hecho, se puede crear una experiencia de usuario diferente para cada uno de los seis tamaños de pantalla más comunes, desde los más pequeños hasta los más grandes: 320px, 480px, 760px, 960px, 1200px y 1600px.
Sin embargo, como sería increíblemente largo diseñar un sitio web para seis tamaños de pantalla diferentes, el trabajo puede limitarse consultando las analíticas de usuarios de una versión existente del sitio para determinar los tamaños de pantalla en los que los usuarios acceden más. Por ejemplo, si los análisis muestran que la mayoría de los usuarios utilizan el sitio en su iPad de Apple y en su teléfono móvil Samsung Galaxy, se diseñaría la experiencia del usuario para esos dos tamaños de pantalla específicamente en lugar de los seis tamaños de pantalla posibles. De esto lo sabemos bien cuando realizamos el diseño web Arganda del Rey.
Ventajas y desventajas del diseño adaptativo
Desde la perspectiva de un diseñador de UX, la mayor ventaja del diseño responsivo es que requiere mucho menos trabajo que el diseño adaptativo, tanto para crearlo inicialmente como para mantenerlo. Además, los sitios responsivos se adaptan a un número infinito de tamaños de pantalla, lo cual es una buena noticia teniendo en cuenta que parece que se lanzan regularmente dispositivos con tamaños de pantalla nuevos y extraños. Los sitios responsivos también obtienen mejores resultados en las clasificaciones de los motores de búsqueda porque se consideran aptos para móviles.
Por otro lado, los sitios web responsivos requieren que los desarrolladores realicen más codificación, e incluso cuando un diseñador de UX y un desarrollador trabajan juntos para asegurarse de que el diseño es utilizable en tantos dispositivos como sea posible, es imposible controlar el diseño en todos los dispositivos. Como resultado, puede haber ciertos dispositivos en los que una página web no está dispuesta para crear la mejor experiencia de usuario. Además, como el código de todo el sitio web se entrega independientemente del dispositivo en el que se acceda, un sitio responsivo puede ser más lento de cargar. Esto también puede comprometer la experiencia del usuario.
Consideremos los pros y los contras del diseño adaptativo
Para un diseñador de UX, puede ser más fácil diseñar las diferentes disposiciones necesarias para un diseño adaptativo porque simplemente requiere crear wireframes para el ancho fijo de cada tamaño de pantalla. Esto significa que el diseñador de UX tiene un control total sobre cada diseño y puede asegurarse de que la experiencia del usuario es óptima para cada tamaño de pantalla. Como resultado, si el diseñador de UX cree que tiene sentido incluir contenido diferente para diferentes tamaños de pantalla, puede hacerlo.
Por ejemplo, un sitio adaptable para un servicio de entrega de comida puede incluir una pantalla de inicio para un ordenador de sobremesa que muestre las opciones de los restaurantes y las diferentes categorías de comida junto con una función de búsqueda de la ubicación del restaurante. Mientras tanto, la pantalla de inicio del mismo sitio en un teléfono móvil podría incluir sólo la función de búsqueda de la ubicación del restaurante.
Los sitios adaptativos son más fáciles de implementar para los desarrolladores y, dado que sólo proporcionan el código necesario para el tamaño de la pantalla, tienden a cargarse mucho más rápido que los sitios responsivos.
Dicho esto, el diseño adaptativo puede ser mucho para un diseñador de UX. Aunque es posible limitar el trabajo diseñando sólo para dos o tres de los seis tamaños de pantalla más comunes, eso significará que si los usuarios acceden al sitio en un dispositivo para el que no fue diseñado, el sitio no tendrá el formato correcto. E incluso si se diseña para los seis tamaños de pantalla, los tamaños de pantalla poco comunes seguirán sin estar cubiertos.
El diseño adaptativo suele ser el más adecuado para el rediseño o la mejora de un sitio web. Por ejemplo, si un cliente necesita un diseño móvil para un sitio web existente que no tiene intención de cambiar, el diseño adaptativo puede ser la mejor opción.
Ahora vemos los puntos clave
Ahora deberías tener una comprensión básica de lo que es el diseño responsivo y el adaptativo, así como de los pros y los contras de ambos enfoques. Cuando decidas qué enfoque funcionará mejor para tu próximo proyecto de UX, recuerda que:
- Un diseño responsivo puede cambiar su diseño y apariencia en función del tamaño de la pantalla del dispositivo en el que se accede, desde un gran ordenador de sobremesa hasta un pequeño teléfono móvil.
- Un diseño adaptativo requiere la creación de un diseño diferente para cada dispositivo en el que se accede al sitio web.
- El diseño adaptativo suele requerir menos trabajo para un diseñador de UX, pero tendrá que trabajar con el desarrollador para asegurarse de que el diseño del sitio es utilizable en cada tamaño de pantalla posible.
- El diseño adaptativo requiere que un diseñador de UX cree hasta seis versiones diferentes de un mismo sitio web para pantallas de distintos tamaños. Aunque esto supone mucho trabajo, permite al diseñador de UX optimizar la experiencia del usuario para cada dispositivo que cubren estos diseños.
- El diseño responsivo suele funcionar mejor para sitios más grandes que se diseñan desde cero.
- El diseño adaptativo suele funcionar mejor para sitios más pequeños que se están actualizando.
Ahora que ya conoces la diferencia entre el diseño responsivo y el adaptativo, es posible que quieras saber más. Si es así, estos artículos te resultarán útiles.
Diseño web responsive o adaptativo
El diseño web con capacidad de respuesta significa simplemente hacer sitios web que se adapten al tamaño de la ventana gráfica del visitante. El objetivo es que el contenido se muestre de forma diferente según el dispositivo o el tamaño de la pantalla para que los visitantes tengan una experiencia óptima independientemente de cómo accedan al sitio web. La principal ventaja del diseño web responsivo es que los sitios se cargan rápidamente sin ninguna distorsión, por lo que los usuarios no necesitan cambiar manualmente el tamaño de nada para ver el contenido.
El diseño web responsivo beneficia a los diseñadores, desarrolladores, empresas y, sobre todo, a los usuarios de las siguientes maneras:
1. Más tráfico móvil
Según un informe de SimilarWeb, más de la mitad del tráfico de los principales sitios web de Estados Unidos procedió de dispositivos móviles en 2015. Por lo tanto, es cada vez más importante que las empresas tengan sitios web que se rendericen correctamente en pantallas más pequeñas para que los usuarios no se encuentren con imágenes distorsionadas o experimenten un diseño de sitio subóptimo. Aunque algunas empresas siguen optando por tener una versión separada de su sitio web para los usuarios móviles, el diseño responsivo se está convirtiendo en la norma porque ofrece una mayor versatilidad a un menor coste de desarrollo.
2. Desarrollo móvil más rápido a menor coste
Hacer un sitio web responsivo lleva mucho menos tiempo que hacer una aplicación móvil independiente además de un sitio web de escritorio estándar. Dado que el tiempo es dinero, el diseño responsivo cuesta naturalmente menos que la alternativa. Incluso si la inversión inicial de un sitio web con diseño responsivo acaba siendo más cara que la creación de dos sitios web separados, acabará ahorrando a largo plazo debido a los costes de mantenimiento, de configuración especial, etc. de un sitio web que utiliza dos versiones separadas.
3. Menores necesidades de mantenimiento
El mantenimiento de un sitio móvil separado requiere pruebas y soporte adicionales. Por el contrario, el proceso de diseño responsivo utiliza metodologías de prueba estandarizadas para garantizar un diseño óptimo en cada pantalla. Tener sitios de escritorio y móviles separados también requiere dos estrategias de contenido, dos interfaces administrativas y potencialmente dos equipos de diseño. El enfoque de «talla única» del diseño responsivo supone menos quebraderos de cabeza para los desarrolladores, los empresarios y los consumidores. Dedicar menos tiempo al mantenimiento también libera tiempo para centrarse en cosas más importantes como el marketing y la creación de contenidos.
4. Páginas más rápidas
Los usuarios de móviles, en particular, tienen una capacidad de atención corta. Los estudios demuestran que los visitantes móviles tienden a abandonar las páginas web que tardan más de tres segundos en terminar de cargarse. Si un sitio no está optimizado para teléfonos inteligentes y tabletas, también tardará más tiempo en navegar, lo que puede frustrar a los clientes hasta un punto de no retorno. Asegurarse de que su sitio web responsivo utiliza técnicas de rendimiento modernas, como el almacenamiento en caché y la visualización de imágenes responsivas, ayudará a mejorar la velocidad de carga de su página web.
5. Reducción de las tasas de rebote
Un sitio móvil responsivo y optimizado proporciona una experiencia de usuario mucho mejor para el visitante. Por lo tanto, es mucho más probable que se queden por un período de tiempo más largo y exploren diferentes áreas de su sitio. Por el contrario, si su sitio no es responsivo, es mucho más difícil mantener al visitante comprometido y, por lo tanto, es más probable que reboten.
6. Mayores tasas de conversión
Reducir la tasa de rebote es sólo la mitad de la batalla. Crear una experiencia de usuario consistente en todos los dispositivos es clave para convertir nuevos clientes. Cuando los usuarios están decidiendo si se suscriben o no a un servicio, no quieren ser redirigidos a sitios web específicos para cada dispositivo porque el proceso suele ser más largo. Tener un único sitio web seguro que tenga un aspecto profesional en todas las plataformas hace que los usuarios sean menos propensos a frustrarse o a recurrir a un competidor.
7. Informes analíticos más sencillos
Saber de dónde viene el tráfico y cómo interactúan los usuarios con su sitio web es necesario para realizar mejoras informadas. La gestión de varias versiones de un sitio web requiere que los desarrolladores realicen un seguimiento de los viajes de los usuarios a través de múltiples rutas de conversión, embudos y redireccionamientos. Disponer de un único sitio responsivo simplifica enormemente el proceso de seguimiento. Google Analytics y otras herramientas similares ahora atienden a los sitios web responsivos condensando el seguimiento y la analítica en un único informe para que puedas ver cómo se comporta tu contenido en diferentes dispositivos.
8. Mejora del SEO
El diseño web responsivo se está convirtiendo en algo tan importante para la optimización de los motores de búsqueda como el contenido de calidad. Los vínculos de retroceso más fuertes y las mejores tasas de rebote se traducen en clasificaciones de búsqueda más altas, pero hay un beneficio adicional de SEO para los sitios optimizados para móviles.
Tener un único sitio web responsivo en lugar de versiones separadas de escritorio y móvil evita el problema del contenido duplicado, que puede afectar negativamente a su clasificación de búsqueda.
9. Mejora de la experiencia de navegación en línea
Las primeras impresiones lo son todo, así que si alguien visita un sitio web por primera vez desde su escritorio o su smartphone, querrá que tenga una experiencia siempre positiva. Si los visitantes tienen que hacer mucho zoom, reducir y pellizcar sus pantallas durante su primera visita, es probable que abandonen y prueben otro sitio web.
10. Mejora de la experiencia de navegación sin conexión
Ahora que muchos teléfonos inteligentes y tabletas están habilitados para HTML5, el diseño web responsivo beneficia a los usuarios al facilitar la visualización de contenidos dentro de las aplicaciones web HTML5 sin conexión a Internet. Más información sobre la caché de aplicaciones HTML5.