Entienda el concepto de diseño adaptativo y su importancia para el desempeño del sitio web en su estrategia digital en dispositivos móviles.
Antes de la proliferación de dispositivos móviles con capacidad de navegación, los diseñadores de sitios web únicamente se enfrentaban al reto de mantener la apariencia gráfica de sus creaciones en los diferentes navegadores de computadores con resoluciones de pantalla no muy disimiles. Hoy, con la masificación de tabletas, teléfonos inteligentes, libros electrónicos, computadores portátiles y de escritorio (cada uno de ellos con resoluciones de pantalla particulares), los diseñadores web se enfrentan a una realidad compleja. Un escenario de diseño que obliga la adaptación de los sitios web a cualquier pantalla o dispositivo (con el objetivo de producir una experiencia satisfactoria al usuario).
Pero el desafío no se reduce a la disposición y los aspectos gráficos de los elementos, sino a la interacción, consumo y navegación de estos. El clic táctil y las pequeñas resoluciones de pantalla son solo dos retos a enfrentar de los muchos que se encontrarán las organizaciones, y el responsive web design probablemente el camino a seguir.
¿Qué es el responsive design?
El responsive web design o diseño web adaptativo —RWD por sus siglas en inglés— es una filosofía de diseño y desarrollo cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visualizarla (Ethan Marcotte, diseñador norteamericano, fue el creador y difusor de esta técnica) (1). El diseño adaptativo es en esencia un enfoque que busca que la presentación y codificación de un sitio web ofrezca una experiencia visual óptima para el usuario sin importar el origen de la visita y su finalidad es facilitar la lectura y la navegación con un mínimo cambio en la experiencia de uso.
¿Por qué es importante?
- Por tiempo y dinero: Crear un sitio web con responsive design es más barato y rápido que hacer una versión móvil o una aplicación.
- Por alcance: El tráfico procedente de dispositivos móviles está aumentando exponencialmente (ignorar esta tendencia es una temeridad).
- Por la experiencia de usuario: el contenido y su visibilidad son la piedra angular de una estrategia digital actual; pero estos dos pilares están soportados en uno intrínseco: la experiencia de usuario (si su sitio web no la ofrece, los usuarios difícilmente consumirán los contenidos).
- Por la indiferencia a los sistemas operativos: el responsive design asegura que los usuarios obtengan la mejor experiencia independientemente de su sistema operativo (Android, iOS, Windows y otros).
- Por la centralización del esfuerzo: Hacer que su sitio se adapte al usuario simplifica la memorización de las rutas para acceder a las plataformas digitales de la organización.
- Por la optimización para buscadores: Google ha sido reiterativo —sobretodo recientemente— en su posición de darle prioridad en los resultados de búsqueda a los sitios que entreguen una buena experiencia para los usuarios de dispositivos.
¿Cómo hacer responsive web design correctamente?
1. Cuide los tiempos de carga
Entendemos que las conexiones móviles cada día son más potentes y que el cubrimiento de la señal mejora constantemente gracias a los avances en infraestructura; pero esto no lo exime de preocuparse por los tiempos de carga del sitio web en dispositivos; por el contrario, siempre es recomendable diseñar y validar la navegación desde conexiones lentas (revise el desempeño de su diseño en conexiones 2G y 3G).
2. Más imágenes y menos texto
La gestión de imágenes es un apartado crítico en el diseño adaptativo. Los usuarios esperan una experiencia más visual que textual en los dispositivos (adapte y transforme sus contenidos para los visitantes móviles). Responsive design no es adaptar literalmente un sitio web, sino transformarlo.
3. Vigile los menús de navegación
Nunca pierda de vista las dimensiones de pantalla de los dispositivos que podrían usar los visitantes. Los menús son componentes diseñados para computadores portátiles y de escritorio; destine tiempo en la modificación de los menús para que sean navegables de forma táctil (iconos y botones de acceso rápido son alternativas válidas en la metamorfosis de los menús hacia la movilidad).
4. Simplifique la navegación
Identifique los destinos prioritarios de los usuarios móviles y construya su navegación basándose en esa información. Un sitio web adaptado para dispositivos debe ser una simplificación fundamentada en el uso (no es necesario que todo esté disponible en la versión móvil, pero si es obligatorio mantener la lógica con la que se construyó la arquitectura de la información).
5. Cuide los tamaños de la tipografía
No es lo mismo leer en la pantalla de un computador un texto con tipografía de 12pt a hacerlo en un dispositivo. Por más sencillo que sea ampliar el texto en una pantalla táctil, no es buena idea obligar a sus lectores a acercar y alejar para leer una determinada pieza de texto. Como regla general, asegúrese de mantener el tamaño del texto lo suficientemente grande como para que sea legible incluso cuando se ve en un dispositivo con pantalla más pequeña (un tamaño de texto ideal es 16 px, 12 pt o 1 em).
6. Tenga presente la orientación de la pantalla
Según las estadísticas, la orientación vertical de pantalla es utilizada por el 41% de las personas cuando navega en internet; esto significa que la orientación horizontal es la preferida por el 59% (es necesario tener presente en el diseño de su sitio web ambas orientaciones, haciendo que el diseño responda correctamente a las dos, especialmente la horizontal).
Análisis del diseño adaptativo de los sitios web colombianos frente a los referentes internacionales
Queremos terminar esta publicación compartiendo algunos ejemplos y apreciaciones respecto al desempeño de los sitios web de reconocidas compañías de origen colombiano enfrentadas a empresas internacionales referentes de la categoría (aclarando que para este ejercicio usamos como dispositivo de visualización un iPhone 6 en posición vertical).
1. Moda
En esta categoría enfrentamos a Arturo Calle y H&M.
La empresa local (Arturo Calle) no cuenta con diseño adaptativo ni con una versión móvil de su sitio web. Por su parte H&M es una muestra clara de buenas practicas (navegación por botones, imágenes de buen tamaño y pocos textos).
2. Comercio o retail
En la categoría de comercio o retail confrontamos al Éxito y Amazon.
Nuevamente nos encontramos con la ausencia de diseño adaptativo en la empresa local y la reiteración de las buenas prácticas descritas anteriormente por el referente internacional (aclarando que Éxito cuenta con una aplicación; por lo tanto, los usuarios que la descarguen podrán mejorar su experiencia de consumo).
3. Grupo empresarial o conglomerado
Para la comparación de grupos empresariales seleccionamos Bavaria y 3M.
La tendencia se mantiene, Bavaria (conglomerado de origen colombiano) no cuenta con responsive web design (inclusive dentro del sitio tiene componentes desarrollados en Adobe Flash que no se pueden visualizar en dispositivos), por su parte 3M tiene diseño adaptativo pero con una experiencia de usuario deficiente (baja optimización de tamaños e imágenes).
4. Aerolíneas
Para el segmento de aerolíneas analizamos Avianca y Fly Emirates.
En nuestro ejercicio Avianca es la primera de las compañías de origen colombiano que está preparada para los usuarios de dispositivos (su sitio web cuenta con una versión móvil muy optimizada y coherente con las actividades más recurrentes). Fly Emirates también tiene un excelente desempeño en dispositivos (muy gráfico y de arquitectura simple).
5. Gubernamental
En la categoría gubernamental enfrentamos el sitio web de la Gobernación de Antioquia con el de la ciudad de Nueva York.
La ausencia de diseño adaptativo y la complicación de uso en la presencia web de la Gobernación es evidente, por su parte la ciudad de Nueva York ofrece un sitio web de fácil uso desde el teléfonos.
6. Bebidas
Para el caso de bebidas confrontamos Postobón y Red Bull Internacional.
La compañía colombiana de bebidas cuenta con un sitio web adaptado para dispositivos (a nuestro juicio de buen desempeño) y Red Bull —por el contrario— queda debiendo, pues aunque cuenta con responsive design la experiencia de uso en dispositivos no se compara con la que se vive en el mismo sitio accediendo desde un computador.
7. Comunicaciones
En el segmento de empresas del sector telecomunicaciones comparamos a Claro Colombia con Verizon.
Al igual que en la categoría de aerolíneas, aquí las diferencias son mínimas. Ambas compañías, la local y el referente internacional, cuentan con un buen diseño adaptativo.
8. Bancos
En la categoría de bancos analizamos Bancolombia y Bank Of America.
Ambos pasan el examen. Buen desempeño y fácil uso. En el caso de Bancolombia invita inclusive a descargar su aplicación para vivir una mejor experiencia.
Bibliografía
(1) Definición tomada de Wikipedia.
Why Is Responsive Web Design Important For Your Website. Artículo publicado en knowledge.ridivi.com.
BALHARA, Hariom. Top 10 Tips on Designing Outstanding Responsive Websites. Artículo publicado en webdesignflip.com.
El 9 de enero de 2007 cambió el mundo. Aquel día, desde muy temprano en la mañana, 45.572 personas se reunieron en el Moscone Convention Center de San Francisco para presenciar la Macworld Conference & Expo, el encuentro anual de Apple, en el que su CEO —que por esos días era Steve Jobs— presenta los nuevos productos de la compañía. El evento comenzó a las 9:12 a.m. y desde su primer anunció se mostró la que sería la actitud de la conferencias en ese 2007. Las palabras de apertura fueron: «We’re going to make some history together today» —Hoy vamos a hacer historia juntos—. Después de iniciar con un par de buenas noticias para los fanáticos de Apple, a las 9:42 a.m., Jobs presentó lo que la mayoría estaba esperando: un revolucionario teléfono móvil. El anunció fue profético: «Today, Apple is going to reinvent the phone» —hoy, Apple va a reinventar el teléfono—.
