Los mejores consejos para hacer Responsive Design en su sitio web

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.

4 tendencias globales que podrían afectar su comercio electrónico

Discutamos sobre las tendencias globales que necesita entender para poder medir su impacto en los resultados de su comercio electrónico.

Son muchas las tendencias en diseño, arquitectura de la información y «layout» (disposición de los elementos en un espacio determinado) que pueden afectar el rendimiento de una tienda online. Tanto la forma de ajustar los contenidos para cada visitante, como el despliegue de los detalles de un producto influyen en las decisiones de compra de las personas; y por ende, en la consecución de objetivos de mercado para las empresas.

La experiencia del cliente sigue siendo la piedra angular del comercio electrónico —y la obsesión de los profesionales del marketing—, pero esta tendencia global y predominante no es la única importante; debe acompañarse de otras que, de acuerdo con recientes estudios, potencian aún más las conversiones en las tiendas online.

Hace poco la consultora de negocios digitales «iVentures Consulting» publicó su informe anual eShopper Index Report que analiza la experiencia de compra en línea en 111 sitios populares de comercio electrónico. Con el estudio, la consultora busca identificar tendencias globales que puedan representar cambios generales en las prácticas de comercio electrónico para que los comerciantes pueden sumar ventajas competitivas.

1. Personalización

La tendencia más importante en los entornos digitales sigue siendo la personalización. Pero esta no se debe reducir a la creación de procesos logísticos y de embalaje personalizados, sino llevarla a cada una de las decisiones y acciones dentro de una plataforma de comercio electrónico. Presentar contenido y ofertas individualizadas es primordial para los compradores. Las empresas deben apropiarse de los datos de comportamiento y navegación de cada usuario para adaptarse a sus necesidades y presentarles información y productos con los que sean afines (para con esto obtener una mayor propensión a la compra).

A pesar del evidente beneficio que trae la personalización en comercio electrónico, son pocas las empresas que la usan. Según el estudio, solo el 13% de las 111 páginas evaluadas ofrece contenidos y productos basándose en el historial de navegación o compras del cliente. Si adicionalmente se analiza el uso de los datos para la segmentación en el envió de información vía correo electrónico la cifra cae al 8% (el documento, adicionalmente, aclara que las empresas de moda y productos de tecnología son las más activas en la personalización).

Ha sido demostrado por varios estudios y consultores de comercio electrónico que la brecha entre lo que la personalización es capaz de hacer y su uso por parte de las tiendas online puede representar una gigantesca oportunidad para las pequeñas y medianas organizaciones que quieren competir mano a mano con las grandes (por ejemplo, la popular marca de ropa American Apparel informó que sus ventas aumentaron un 59% de 2011 a 2012 gracias a la personalización).

El estudio finalmente agrega las que considera mejores y peores practicas en la tendencia de personalización. Amazon y Galeries Lafayette son reconocidas como las mejores y la marca de cosméticos Mac como la peor. De Amazon dice que cuenta con una sofisticada plataforma para marketing digital con una fuerte personalización sobre las ofertas especiales, las recomendaciones de productos y la venta cruzada. A Galeries Lafayette le reconoce un excelente trabajo en sus programas de fidelización que, con el conocimiento profundo del historial de compra, mejora el despliegue de información y la recomendación de productos. Finalmente a la marca de cosméticos Mac la cataloga como una plataforma básica y primaria que no impulsa a la compra cruzada.

2. Marketing de contenido

La apropiación del contenido con fines de marketing es una obligación en el comercio electrónico. Si la personalización es el arma que mejora nuestras oportunidades de derrotar a los competidores, el marketing de contenido es la herramienta para mantenernos en el juego y en la mente de los compradores.

De acuerdo con el estudio, el 65% de los sitios pone en practica el uso de contenidos como herramienta de venta. ¿Cómo lo hacen? De diferentes formas dependiendo del sector al cual pertenecen. Por ejemplo, las empresas de moda son muy dadas a usar imágenes inspiracionales de producto que evidencian el estilo de vida de sus consumidores (en algunos casos usan directamente fotos de sus clientes); las empresas multisector prefieren crear blogs con contenidos de valor para sus prospectos y las empresas de perfume y cosméticos optan por la creación de tutoriales para educar en el correcto uso de sus productos.

Las mejores practicas sobre uso de contenido con fines comerciales enunciadas en el informe son la tienda londinense Harrods y la empresa francesa de artículos electrónicos Fnac, mientras que la peor calificación la recibió Amazon. A Harrods la muestra como una excelente tienda que ayuda e inspira a sus visitantes a la hora de tomar decisiones de compra gracias a su abundante contenido de moda (tendencias, noticias de moda, tips de uso, entre otros). Sobre Fnac destaca su constante ayuda —por parte de expertos— para los consumidores que no dominan o dudan a la hora de comprar productos tecnológicos. Y sobre Amazon dice que no tiene ninguna ayuda editorial (se limitan a comercializar productos, sin ningún contenido generado por ellos que oriente o actualice a los usuarios).

3. Movilidad

El comercio móvil es otra de las áreas criticas para el futuro de las ventas en entornos digitales. Para afrontar esta tendencia las empresas disponen de dos caminos: hacer que la plataforma se adapte —vía responsive desing— a cada uno de los dispositivos móviles del mercado o desarrollar una aplicación para los sistemas operativos disponibles (Android, iOS y Windows Phone). Lo que si deja claro el estudio es que el M-Commerce es una obligatorio.

El documento afirma que el 91% de las empresas evaluadas cuentan con una plataforma cuyo diseño se adapta a los dispositivos mientras que el 51% tiene una app para iOS (y solo el 37% una para Android).

Las aplicaciones son de gran ayuda en el aumento y perfeccionamiento de la experiencia de compra. Adicionalmente, estas app, pueden ser utilizadas también para ejecutar acciones de marketing que mezclen la presencia análoga y la digital (cupones y ofertas para las tiendas físicas, mapas de la tienda y otra información similar).

iVentures Consulting presenta en su estudio a la mega tienda Macy’s y a la empresa de cosméticos Sephora como los ejemplos a seguir en apropiación de la movilidad con fines comerciales y a la compañía de maquillaje Guerlain como una mala practica. Sobre Macy’s afirma que sus herramientas móviles son de gran ayuda para las personas en las tiendas físicas porque facilita los procesos de pago y ubicación de productos. De Sephora dice que ha logrado desarrollar un excelente mecanismo móvil de fidelización de clientes. Y sobre Guerlain asegura que no se han percatado de la importancia de la movilidad.

4. La página de producto

El estudio identificó las 17 características de una buena pagina de producto dentro de un comercio electrónico. Las 5 más importantes —obligatorias para las tiendas online— son: Una buena fotografía (desde diferentes ángulos, con posibilidad de zoom y que muestre el uso del producto), una descripción cualitativa (que haga claridad de los beneficios, usos posibles y valores agregados), una lista detallada de especificaciones cuantitativas (información técnica y de ingredientes o componentes), opciones disponibles (variedad de colores, tallas, accesorios, entre otros) y herramientas para compartir en los medios sociales (Facebook, Instagram, Twitter y Pinterest como prioritarios).

El análisis concluyo que existen algunas características que se despliegan en las páginas de producto que ayudan a incrementar la tasa de conversión y que pocas las tiendas ofrecen. Por ejemplo; solo el 32% de las tiendas evaluadas muestra en sus páginas de producto videos con demostraciones y consejos de uso, únicamente el 30% informa la disponibilidad del producto en las tiendas físicas (por si el comprador prefiere dirigirse a una tienda física para verlo antes de comprarlo), apenas el 39% ofrece herramientas de ayuda en línea (chats, foros, etc.) y cerca del 59% detalla los tiempos de entrega y las políticas de reembolso para cada producto en particular.

La consultora nombra a la cadena de almacenes de lujo Saks Fifth Avenue y a los almacenes de venta de electrodomésticos Darty como las mejores practicas en lo que a páginas de producto se refiere; y a la marca de moda francesa Hermes como la peor. A Saks Fifth Avenue lo califica como una exquisita experiencia de revisión detallada de los productos, con información abundante y herramientas innovadoras. De Darty destaca la increíble profundidad de la información de cada producto. Y de Hermes afirma que entregan una pobre información de los productos que no evidencia razones para comprarlo.