¿Su sitio web debería utilizar un diseño adaptativo?

En el mundo multipantalla actual, El 27% de todo el tráfico web viene de teléfonos inteligentes, tabletas y varios otros dispositivos. Y si su empresa depende de la web para obtener ingresos, probablemente conozca el diseño web responsivo, que ajusta automáticamente los diseños para adaptarse a los diferentes tamaños de pantalla. El diseño responsivo es el ejemplo de las mejores prácticas actuales de desarrollo web. Ya sea que visite un sitio web adaptable en su ordenador de sobremesa, iPhone o tableta, el diseño se reducirá o ampliará «mágicamente» para adaptarse al dispositivo. El Sitio web de la BBC es un ejemplo perfecto de diseño responsivo en acción:

Sin embargo, el diseño responsivo no es el final del camino. Aborda los problemas de diseño, pero no resuelve problemas importantes, como el rendimiento móvil y la personalización de los dispositivos. Para crear experiencias web móviles realmente fantásticas, tenemos que ir más allá de los diseños adaptables y convertirnos en sitios web totalmente interactivos y funcionales.

El diseño adaptativo podría dar a los sitios web esa ventaja multiplataforma. El enfoque «adaptativo» incluye elementos de diseños adaptables, pero sube la apuesta al utilizar JavaScript para añadir interacciones y funciones que complementan el dispositivo que utiliza. Los sitios web adaptables detectan el dispositivo de un usuario antes de cargar una página web y, a continuación, ofrecen la mejor versión de ese sitio para el dispositivo de destino: ordenador, tableta, smartphone, televisor con acceso a Internet, etc.

Por ejemplo, así es como Sitio web de Epicurious mira en un escritorio:

Y así es como se ve en el iPhone:

Se han personalizado tanto el diseño como el contenido del sitio para mejorar la experiencia de los clientes en cada dispositivo. A diferencia de un sitio web responsivo, que cargaría el mismo código base en todos los dispositivos, este sitio para iPhone solo carga HTML específico para teléfonos inteligentes. Especialmente en el smartphone, la función «caja de recetas» de los usuarios aparece de forma destacada en la navegación, lo que facilita el acceso a las recetas favoritas con menos clics.

Si bien la adaptación y la capacidad de respuesta no se posicionan una contra la otra (puede utilizar técnicas de respuesta en un sitio web adaptativo), hay un par de buenas razones para ir más allá de los diseños fluidos del diseño responsivo y adoptar técnicas de adaptación:

Es más rápido y más barato. Un sitio web adaptable tiene que crearse desde cero, una tarea cara. Adoptar la capacidad de respuesta también puede ser una propuesta aterradora para las grandes empresas de comercio electrónico que se centran en gran medida en los KPI empresariales. Esto se debe a que un sitio responsivo probablemente cargue más despacio en los dispositivos móviles, lo que podría afectar negativamente a las métricas (hablaremos de esto más adelante). El diseño adaptativo puede reducir el presupuesto y los plazos, especialmente si utiliza plantillas adaptables. Añadiendo plantillas adaptables a un sitio web existente, su sitio podrá detectar los dispositivos de los usuarios y ofrecer páginas web personalizadas y optimizadas para los dispositivos sin tener que reconstruirlas desde cero.

Es mejor para los clientes. El diseño responsivo no se personaliza aparte de reajustar el documento para que se ajuste al tamaño de la pantalla, lo que hace que la página sea más estrecha o ancha y muestre u oculte el contenido. El diseño adaptativo le permite ofrecer experiencias de cliente optimizadas en función del dispositivo que utilicen. Según Nielsen, sitios web que valen para todos no siempre satisfacen a los clientes porque los usuarios de teléfonos inteligentes, tabletas y ordenadores de sobremesa suelen comportarse de manera diferente. Los teléfonos inteligentes se utilizan más comúnmente para buscar tiendas locales, comprobar precios e investigar productos, mientras que los usuarios de tabletas hacen más compras en línea. Por ejemplo, si los visitantes de teléfonos inteligentes utilizan repetidamente su widget de búsqueda de tiendas, podría considerar añadir un mapa de Google de las tiendas físicas cercanas a su página de inicio optimizada para teléfonos inteligentes. Si los visitantes de tabletas son ávidos navegadores, incluya un carrusel deslizante en la parte delantera con imágenes grandes de su última moda primaveral.

Es más rápido. Los sitios web adaptables son notoriamente lentos porque necesitan cargar todos los recursos e imágenes necesarios para renderizar un sitio web en una amplia gama de dispositivos. Amazon informó que por cada 100 milisegundos de tiempo de carga, sus beneficios disminuían un uno por ciento. Google dice medio segundo de retraso provoca una caída del tráfico del 20%. El enfoque adaptativo reduce el tiempo de carga, ya que solo proporciona el código y las imágenes necesarios para el dispositivo específico del usuario. Por ejemplo, los iPad 3 solo obtienen imágenes de Retina, mientras que las pantallas pequeñas de los teléfonos inteligentes solo muestran imágenes en baja resolución. Este tipo de segmentación por dispositivos de imagen acelera los tiempos de carga y, por lo tanto, puede minimizar la pérdida de clientes.

Por supuesto, el diseño responsivo ha sido fundamental a la hora de imaginar las posibilidades de la web móvil y nos ha hecho replantearnos la forma en que se crean los sitios web. Sin embargo, con la creciente presión sobre las empresas para que amplíen el éxito en el mercado a los dispositivos móviles, ahora necesitamos basarnos en el diseño responsivo para que los sitios web móviles funcionen de forma aún más eficaz. La capacidad de respuesta nos acerca a una excelente experiencia en la web móvil; ahora pasemos a aplicar técnicas progresivas y adaptables para crear un sitio web realmente rico.