Todo lo que deberías saber y tener en cuenta sobre el diseño web adaptativo

Captar al visitante móvil: combinando el diseño adaptativo con la optimización del rendimiento para ofrecer una experiencia de usuario excepcional

En el actual mundo hiperconectado, el rendimiento de las aplicaciones móviles basadas en la web está jugando un papel cada vez más importante a la hora de impulsar la adopción por parte del cliente y la fidelidad de este. Los usuarios finales tienen unas altas expectativas: esperan que las páginas se carguen más rápido que nunca y encontrar unas experiencias y aplicaciones web más ricas y atractivas.

Al mismo tiempo, el móvil es un fenómeno mundial que crece rápidamente y que está cambiando el modo en el que interactuamos con el contenido, ya sea con fines de negocios, informativos o de entretenimiento. Por lo tanto, la capacidad de captar a los usuarios de móviles mediante experiencias web rápidas y de calidad se ha convertido en un requisito empresarial y en una premisa para el éxito. Ignorar las necesidades de los usuarios móviles supone arriesgarse a perder un importante y creciente segmento de negocio.

La adopción del diseño web adaptativo está creciendo rápidamente

Sin embargo, ofrecer una experiencia rápida y de calidad en este nuevo mundo lleno de desafíos no es precisamente fácil, debido a los retos que plantea la optimización del rendimiento con diferentes navegadores, dispositivos y pantallas de distintos tamaños. Por lo tanto, las empresas están buscando técnicas que funcionen igual de bien en todos los dispositivos. A este proceso se lo conoce como diseño web adaptativo (Responsive Web Design, RWD).

El diseño web adaptativoes un enfoque de desarrollo web que considera que las páginas web deberían reaccionar al contexto en el que se están cargando (principalmente, al tamaño de la pantalla) y modificar su interfaz de usuario en consecuencia. Las páginas RWD contienen el código HTML necesario para mostrar todas las versiones de un sitio web, incluyendo tanto las versiones para móvil como para ordenador de sobremesa.

La tendencia a usar RWD está creciendo rápidamente. Uno de los motivos es que el RWD elimina de forma eficaz la necesidad de volver a la fase de diseño y desarrollo cada vez que una nueva categoría de dispositivo móvil entra en el mercado.

Adoptar una estrategia de RWD parece la solución ideal. No obstante, no debe entenderse como una "varita mágica" que mejorará la experiencia del usuario móvil.

La realidad de captar con éxito a los usuarios móviles con sitios web RWD no siempre es una tarea fácil. A medida que los dispositivos móviles han ido creciendo con más fuerza y las redes se han vuelto más rápidas y más constantes, las expectativas de los usuarios finales móviles también han crecido.

Ofrecer una experiencia web rápida y de calidad no es fácil

Si el RWD no es la panacea, ¿cuáles son algunos de los retos asociados a ofrecer este tipo de sitios web? Según un recientesobre la composición de los sitios RWD y su impacto sobre el rendimiento de Internet, se probaron 347 sitios RWDen diferentes resoluciones de pantalla y se comparó el número de bytes necesarios para descargar cada página en cada resolución. El resultado reveló que el 70% de los sitios RWD examinados tenían aproximadamente el mismo tamaño en las diferentes resoluciones de pantalla y que el 22% de ellos tan solo eran ligeramente más pequeños.

Lo más importante es que la mayoría de las páginas no solo transmiten la misma carga útil en los diferentes dispositivos, sino que esa misma carga útil es coherente con la tendencia general de que las páginas sean cada vez más pesadas,con un tamaño medio de página de aproximadamente 1,2MB.

Un problema asociado a las páginas más grandes y complejas desarrolladas mediante RWD es que necesitan transmitirse a los navegadores del usuario final, que a continuación deben procesarlas y mostrarlas. En el caso de dispositivos móviles de poca potencia que tienen una capacidad de procesamiento limitada y de redes inalámbricas y móviles limitadas, esto puede afectar negativamente a la experiencia del usuario.

Por lo tanto, ¿qué implicaciones tiene transmitir páginas grandes y complejas a dispositivos móviles desde la perspectiva del usuario final? Un estudio realizado para evaluar la experiencia de un usuario final que visita la página web RWD de un minorista desde las diferentes y mejores redes y dispositivos del sector, reveló que la transmisión de un sitio relativamente pequeño (700KB) a un dispositivo móvil a través de redes inalámbricas presentaba graves deficiencias de rendimiento.

Fundamentalmente, a los usuarios finales no les preocupan los desafíos tecnológicos subyacentes y necesarios para ofrecer una experiencia rápida y de calidad en dispositivos limitados a través de redes inalámbricas o móviles. Tan solo les interesa que las páginas se carguen rápidamente y que funcionen conforme a sus expectativas. Pero estas expectativas del usuario final son cada vez más altas, y se corresponden con el deseo de que las aplicaciones web sean cada vez más rápidas, más ricas y más atractivas.

Pasos necesarios para ofrecer páginas de diseño web adaptativo rápidas y de calidad

El primer paso consiste en centrarse en la página real y en los objetos asociados que se transmiten al usuario final. También existe una gran variedad de opciones disponibles para los diseñadores que busquen superar los retos relacionados con transmitir sitios RWD pesados. En primer lugar, es necesario desplazar el contenido lo más cerca posible del usuario final (usando, por ej., una red de entrega de contenido (Content Delivery Network,CDN) y aprovechar los mejores mecanismos de transmisión, como SPDY, un protocolo de red abierta para la transmisión de contenido web, que son particularmente importantes en el caso de las redes inalámbricas.

A continuación, hay que centrarse en los componentes de la aplicación RWD, el código HTML, las imágenes y los objetos JavaScript y CSS. Para ofrecer páginas más rápidas, céntrese en:

• Reducir el número de solicitudes: La solicitud más rápida es la que no se hace. Cada combinación de solicitud de HTTP del cliente y de respuesta del servidor representa al menos un recorrido completo de la red. Dependiendo de la situación del usuario final y de su proximidad al servidor de origen, el recorrido de una única solicitud puede tardar varios segundos en completarse. Una única página web puede necesitar docenas de solicitudes de HTTP antes de poder mostrar el contenido, lo que a menudo implica que estas solicitudes se retrasen entre sí debido al número de conexiones limitado por el navegador específico. Para reducir estos recorridos puede utilizar varias técnicas para eliminar las solicitudes innecesarias, como consolidar varios archivos CSS y JavaScript, incrustar imágenes pequeñas y aprovechar las nuevas funciones de memoria caché de HTML5.
• Reducir el número de bytes: El cálculo es sencillo: cuanto más grande sea una página (en bytes), más tiempo se necesitará para transmitirla a través de una red limitada y más tiempo tardará un navegador en procesarla y en mostrar el contenido. Las imágenes son un problema especial para los sitios RWD. Es importante mantener el tamaño del archivo bajo control ajustando los formatos de imagen, mejorando la gestión de la memoria caché, comprimiendo archivos y eliminando datos como comentarios, espacios en blanco o metadatos de imagen. Existen soluciones automatizadas que ayudan a transmitir la resolución de imagen adecuada para el dispositivo correspondiente y evitar imágenes demasiado grandes, manteniendo la calidad de la imagen en los límites de lo que el usuario puede percibir, tanto para pantallas grandes como pequeñas. Por ejemplo, se puede optimizar una página para que solo cargue las imágenes que sean visibles dentro de la ventana actual. A medida que el usuario se desplace hacia abajo, se cargarán nuevas imágenes bajo petición. La carga de imágenes bajo petición ayuda a mejorar el tiempo de carga de la página y también reduce la amplitud de banda en casos en los que un usuario no se desplace efectivamente hacia abajo por la página. En el caso concreto de los sitios web RWD, esta medida evita que las páginas descarguen imágenes ocultas, pensadas para otras condiciones o tamaños de visualización.
• Acelerar la carga: Procesar una página web es un proceso complicado. Lamentablemente, el navegador no conoce los sitios de antemano y se ve forzado a aplicar una lógica general a la hora de procesar una página. Esta lógica cambia de los navegadores antiguos a los nuevos, está limitada a la compatibilidad con versiones anteriores y no se adapta a un sitio específico. Técnicas como retrasar las hojas de estilo para impresión, bloquear la visualización de botones de redes sociales y recuperar la página siguiente son modos de guiar al navegador para que haga lo correcto. Como resultado, los usuarios obtienen una experiencia verdaderamente rápida, adaptada a sus necesidades.

Conclusión

Ofrecer sitios web RWD rápidos no es una tarea necesariamente fácil y requiere una experiencia y recursos considerables. Pocas organizaciones disponen de diseñadores o expertos internos que puedan llevar esto a cabo. A medida que el RWD evoluciona, surgen nuevos modelos que permitirán ofrecer una experiencia web rápida y de calidad a todos los usuarios.

Existe un enfoque llamado RESS (Responsive Web Design + Server Side Components)que parece combinar particularmente bien lo mejor de las técnicas de transmisión móvil actuales, manteniendo el rendimiento en primer plano. Además, existe una gran variedad de opciones disponibles para ayudar a los diseñadores que intentan superar los desafíos asociados a la transmisión de sitios RWD pesados, como desplazar contenido a una Content Delivery Network (CDN), que dispone de la tecnología para acelerar el rendimiento web, o aprovechar los mejores mecanismos de transmisión, como SPDY. La adopción de las técnicas resaltadas aquí también resulta útil y, si las sigue, podrán mejorar radicalmente su capacidad de ofrecer una experiencia web rápida y de calidad, al mismo tiempo que atraerá a los usuarios móviles.