Diseño Receptivo: Por qué es Su Mejor Opción y Cómo Hacerlo Bien

BY admin
|

El crecimiento explosivo de los dispositivos móviles y la proliferación continua de una variedad de dispositivos hacen que el diseño web receptivo (RWD) sea la mejor opción para minoristas y marcas que desean optimizar la forma en que interactúan con los clientes en todos los puntos de contacto digitales. Según el minorista de Internet, 261 millones de consumidores estadounidenses poseen dispositivos móviles y 66 millones de estos propietarios de dispositivos compran con ellos. De hecho, el minorista de Internet ha visto un aumento del 159% en los comerciantes en el IR Mobile 500 que usan responsive de 2013 a 2014, a medida que los comerciantes presionan para mantenerse competitivos y satisfacer las necesidades de los consumidores en movimiento.

Las versiones móviles de los sitios de escritorio han sido una solución popular hasta ahora, pero la experiencia a menudo carece de elementos críticos de marca y contenido y vincula personal y presupuesto valiosos con la administración de dos versiones de un sitio web. Al entregar información desde una única base de código que reconoce y se adapta al dispositivo móvil, el diseño receptivo resuelve ambos problemas y desde una única URL.

Sin embargo, así como lanzar un sitio de comercio electrónico no es una garantía de éxito empresarial, un sitio receptivo de alto rendimiento toma la misma consideración y planificación. Si no se hace bien, los sitios responsivos pueden traer tantos desafíos como resuelvan: rendimiento lento, retrasos en las pruebas de desarrollo costosos, lentos y complejos, y puede desenmascarar desafíos arquitectónicos que requieren reescritura del sitio. En un estudio reciente de Moovweb de 12 sitios receptivos, el minorista de Internet señaló que el rendimiento era un 513% más lento en los teléfonos inteligentes que en los PC y tabletas, y que algunos sitios tardaban 18,24 segundos en cargarse, muy por encima de los 3 segundos de tiempo de carga de la página de mejores prácticas de la industria.

Optimizando para Responder: Antes de comenzar

En un seminario web reciente de Minoristas de Internet patrocinado por Magento, orador invitado, Forrester Research, Inc. El analista Mark Grannan destacó que, como la mayoría de los proyectos, una implementación exitosa de RWD comienza con la alineación de los objetivos de negocio y desarrollo. Tomarse el tiempo de antemano para analizar los patrones de tráfico móvil, crear listas de prioridades de dispositivos y revisar la arquitectura de información y el contenido permitirá a sus equipos moverse más rápido. Conectar estrechamente a los equipos de diseño y desarrollo y acelerar su colaboración con herramientas de creación de prototipos y marcos de desarrollo puede mejorar de manera similar el tiempo de comercialización. Grannan también aconsejó que los ingenieros resuelvan los requisitos de cola larga desde el principio, como determinar si se necesitan cambios en CMS o arquitectura web para respaldar proyectos de diseño receptivo, y abordar de manera proactiva la velocidad y la aceleración del sitio a través de técnicas de optimización de frontend. Por último, Grannan recomendó que las métricas de valor de negocio (como el tráfico del sitio y las conversiones) coincidieran con el ámbito de desarrollo.

Optimizando para responder: Mapee el recorrido de sus clientes

Como todo lo demás, la optimización de su sitio para múltiples dispositivos comienza con su audiencia, su composición y comportamientos.

  • ¿Qué porcentaje del tráfico de tu sitio llega a través de dispositivos móviles? La mayoría de los comerciantes fijan el 20-30% del tráfico móvil como el desencadenante para considerar la respuesta

  • ¿Cómo están accediendo a su sitio hoy? Las macro tendencias importan menos que los detalles de su sitio y de su cliente

  • ¿Qué dispositivos / navegadores prefiere su población de clientes? Es importante tener en cuenta que el diseño web responsivo se implementa utilizando técnicas que son incompatibles con navegadores más antiguos (en particular, IE8 y anteriores). Identificar los dispositivos principales que acceden a su sitio también lo ayudará a determinar el número de puntos de interrupción de pantalla para los que debe diseñar su sitio

Optimización para Responsive: Define tu Estrategia de contenido

Preparar contenido para un sitio web responsive es uno de los mayores desafíos a los que se enfrentarán los comerciantes, ya que necesitarán cambiar su forma de pensar sobre el contenido. A menudo se dice que implementar un diseño web responsivo es más una pregunta de estrategia de contenido que una pregunta de diseño.

Como dijo Brendan Falkowski del Departamento de Gravedad, » Mobile First es una metodología que te pide diseñar interacciones pensando primero en la pantalla pequeña. Mobile first no es una versión simplificada de un sitio de escritorio.»

Mira los términos de búsqueda que usan tus clientes y comienza definiendo las interacciones importantes para tu tienda. Priorice las funciones y la información para organizar la vista móvil de manera más eficiente y, a continuación, amplíe la escala a un sitio más limpio para pantallas grandes. Crear una experiencia ganadora no se trata de eliminar la utilidad o la profundidad.

Por el contrario, los usuarios esperan poder realizar cualquier acción desde cualquier dispositivo que estén sosteniendo. Eso significa que filtrar los resultados de búsqueda, leer reseñas, guardar en listas de deseos y revisar debe ser universalmente accesible.

Optimizando para responder: Código e imágenes

Un desafío de RWD es que su base de código individual puede ser muy grande y lenta de cargar. Tenga en cuenta estos consejos, muchos de los cuales compartió Mark Grannan en el reciente seminario web de Minoristas por Internet, para obtener una experiencia móvil óptima:

  • Cargar contenido prioritario cargar primero y tarde («carga lenta») el contenido debajo para crear la percepción de un rendimiento más rápido, en lugar de esperar para mostrar el contenido después de cargar todo

  • Utilice la tecnología del lado del servidor para entregar o renderizar imágenes del tamaño adecuado para el dispositivo

  • Codifique su sitio para reducir el número de viajes de ida y vuelta al servidor para reducir la latencia

  • Utilice fuentes web abiertas en lugar de fuentes personalizadas para reducir el peso de la página

  • Considere usar aceleración de terceros proveedores, como CDN, para optimizar el rendimiento a través de una gama de tecnologías y almacenamiento en caché de contenido local

Skinny Ties es uno de los mayores minoristas y mayoristas de corbatas en los Estados Unidos y una de las primeras empresas que venden ropa de cuello tradicional en línea. Por lo tanto, era lógico que el minorista fuera uno de los primeros comerciantes en desarrollar un sitio receptivo a principios de 2012.

Para crear la experiencia de cliente excepcional que buscaba Skinny Ties, el Departamento de Gravity aumentó drásticamente la complejidad de su taxonomía al asignar cada atributo a un formato estandarizado. Antes, los usuarios solo podían navegar por un árbol de categorías rígido. La taxonomía dinámica abrió múltiples entradas a cada producto.

La combinación de diseño receptivo y una taxonomía flexible contribuyó a un aumento masivo de los ingresos, el valor SEO y las tasas de conversión en todas las plataformas y factores de forma.

  • 58% aumento de transacciones interanual

  • 20.8% aumento de la VAO

  • 187% aumento de los ingresos de los dispositivos Android

  • 224% aumento de los ingresos de iPads

  • 437% aumento de los ingresos de iPhones

Vax es una marca de cuidado de suelos más vendida en el Reino Unido y forma parte de la división de cuidado de suelos de TTI, con sede en Hong Kong, líder mundial en productos para las industrias de mejoras para el hogar y construcción.

El negocio está creciendo a un 40% por año y el negocio en línea ha experimentado un crecimiento del 85%+.

La compañía ha visto un tremendo éxito de ventas flash, o lo que llama Ventas de garaje.

Estos eventos de cinco días atraen a más de 3,000 usuarios simultáneos en el pico y han sido muy exitosos. Cuando la compañía vio que el 40% del tráfico de ventas de garaje provenía de dispositivos móviles, supo que necesitaba un sitio optimizado para dispositivos móviles.

Nigel Aitchison, Director de EMEA de TTI Floorcare, compartió excelentes resultados de su línea Vax después del lanzamiento en Magento Enterprise Edition 1.tema sensible de 14, que les llevó solo cuatro semanas construir y probar. Con el sitio receptivo, Vax vio que la conversión durante su gran venta de garaje aumentó un 42% en tabletas y un 156% en teléfonos móviles.

Recursos adicionales:

Internet Retailer-23 de julio de 2014: Pasos para Lograr el Éxito del Diseño Web adaptable

Forrester Research – Ene. 16, 2014: Seis Trampas De Proyectos De Sitios Web Receptivos Y Las Mejores Prácticas Para Evitarlas

Minorista De Internet – 2 De Mayo De 2013: Skinny Ties obtiene un aumento del 211% en las ventas móviles con su sitio de diseño receptivo

Brendan Falkowski : https://speakerdeck.com/brendanfalkowski

Moovweb-Julio de 2014: 8 Maneras de Mejorar el Rendimiento de Su Sitio Responsive

Magento Blog-13 de mayo de 2014: Magento Habilita Sitios Responsive en la mitad del tiempo