Saltar al contenido

10 Consejos útiles para un sitio con capacidad de respuesta rápida

21 diciembre, 2018
experiencia compras online

Después de ver en el post anterior, las razones por las que un sitio debe ser «responsive», y cuáles son las ventajas sobre la creación de una aplicación, o una versión móvil de su sitio, pasamos a la fase operativa. Veamos ahora algunos consejos prácticos para sacar el máximo partido de nuestro sitio web. Dada la importancia de tener un sitio receptivo, tomamos algunos consejos técnicos de la Infografía de Splio.

10 Consejos técnicos para un sitio «responsive

Consejo nº 1 – Simplicidad

Parece una trivialidad, pero la regla número 1 para tener un sitio que se ajuste a cada dispositivo es mantener una estructura simple, un código limpio y libre de cualquier redundancia. Así que a través de javascript y Flash, a CSS demasiado elaborado y complicado. Confíe en HTML 5 y mantenga el menú de navegación simple.

Consejo nº 2 – Consultas a los medios de comunicación

Utilice las Media Queries, es decir, las instrucciones (introducidas por CSS 3) que pueden detectar el medio utilizado y algunas funciones (por ejemplo, la resolución) y aplicar clases id + para ese medio. Puede escribir condiciones como el ancho mínimo y máximo de la pantalla, con el ancho mínimo y máximo, o la orientación de la pantalla, con orientation:landscape y orientation:portrait.

Consejo 3 – Optimizar para las resoluciones más comunes

Estadísticamente, las resoluciones más frecuentes son como máximo 6, si su sitio se ve bien con ellas, la mayor parte del trabajo está hecho.

Consejo 4 – Disposición flexible

Cree un diseño flexible, donde el contenido se organiza en columnas que pueden adaptarse a diferentes configuraciones y tamaños, gracias al tamaño porcentual en lugar de fijo.

Consejo no.5 – ¡Recuerda también las fotos!

Las imágenes también deben ser flexibles y adaptarse adecuadamente a la pantalla.

Consejo 6 – Piense en un tamaño mínimo y máximo.

Si se ajusta todo a «ampliar» al 100%, se pueden crear efectos extraños en pantallas grandes. Si da un tamaño mínimo y máximo, evitará efectos demasiado extraños.

Consejo 7 – Organizar las cosas de manera «relativa

Esto es un poco más técnico. Organice su contenido de manera que una vez establecido el estándar, la unidad «base», todo lo demás se vincule a ella, ya sea por el método de «cascada» o por el método «em» (=unidad efímera).

Consejo n.8 – ¡En la columna!

Al cambiar de la versión de escritorio a pequeñas resoluciones móviles, es mejor colocar los distintos contenidos en una sola columna, incluso si se alarga.

Consejo nº 9 – Suprimir lo que no es necesario

En la versión móvil, no se necesita mucho contenido (por ejemplo, anuncios, archivos, etc.), así que ¡bórrelo!

Consejo n.10 – Usar la vista de metaetiquetas

Para evitar que el navegador del dispositivo móvil muestre la resolución del escritorio (¡esto ocurre a menudo!), podemos insertar la siguiente instrucción en el encabezado de nuestra página web
. De esta manera le decimos al navegador que muestre el sitio exactamente tan amplio como nuestro dispositivo.

Para resumir los 3 puntos clave a la hora de hablar, usted es RESPONSABLE:

Ahora que hemos visto los consejos más técnicos, hagamos algunas consideraciones estratégicas finales.

=> Pensar en términos de objetivos y no de tecnología.

Como dice Ted Schadler de Forrester: las empresas deberían dejar de pensar en el móvil como un pequeño sitio en un ordenador diminuto, pero deberían plantearse la cuestión de cómo involucrar a los usuarios en diferentes dispositivos.

Hay que partir de los objetivos finales (venta? reserva?) y «retroceder». Si queremos que nuestros usuarios nos compren, la opción «comprar ahora» en un dispositivo móvil debe ser claramente visible desde el principio. En otras palabras, debemos hacer explícito el LLAMADO A LA ACCIÓN
.
En el caso de un restaurante no tiene sentido que la página de apertura esté llena de información inútil (historia, menú, etc.); será mucho más útil tener el teléfono, los horarios de apertura, dónde estamos y un texto que resuma la propuesta de valor de ese restaurante.
En el caso de un hotel o de un alojamiento, el botón con la posibilidad de conocer la disponibilidad o la reserva debe ser inmediatamente accesible y claramente visible. Un sitio que optimiza las conversiones para móviles es AirBnB

Algunos casos de éxito

Concluimos con algunos casos que han tenido éxito y han aumentado sus ventas, después de la introducción del sitio en modo responsive.

La tienda de ropa de surf O'Neill, después de desarrollar un sitio responsive, ha visto un aumento significativo en sus ventas. Para verificar el impacto, se monitorearon algunas métricas durante 3 semanas antes de la introducción del sitio de respuesta y luego 3 semanas después, las mismas métricas.

Aquí están los resultados:

Dispositivos iPhone/iPod:

  • Conversiones: crecimiento + 65,71%.
  • Operaciones: crecimiento + 112,50%.
  • Ingresos: crecimiento + 101,25%.

Dispositivos Android

  • Conversiones: crecimiento + 407,32%.
  • Operaciones: crecimiento + 333,33%.
  • Ventas: crecimiento 591,42%.

El sitio web Think Tank Photo, que vende accesorios, estuches y bolsas para fotógrafos, es otra historia de éxito. Después de que las estadísticas demostraran que el número de visitas móviles al sitio se había triplicado en un año, alcanzando el 13% del número total de visitas, la empresa decidió crear un sitio que respondiera utilizando HTML 5.

Se creó así un comercio electrónico muy fácil de usar, capaz de adaptarse a tabletas, smartphones, ordenadores de sobremesa. Aquí están los impresionantes resultados:

  • Más del 188% de aumento de los ingresos, en comparación con el año anterior, en el período «Viernes Negro – Lunes Cibernético» (es el primer viernes después de Acción de Gracias y el lunes inmediatamente posterior, dos fechas que en Estados Unidos se consideran uno de los momentos de máxima compra, de hecho dan paso a las compras navideñas).
  • Aumento del 96% en las transacciones de los usuarios de smartphones y tablets
  • Incremento de páginas vistas por Móvil: + 224%.

Por último, Skinny Ties, una empresa familiar que ha estado creando lazos desde 1971, también decidió crear un sitio que se adapte a todos los dispositivos móviles. Lanzado en octubre de 2012, en un par de semanas ha obtenido resultados visibles.

  • Los ingresos de iPhone crecieron un sorprendente 377,6%.
  • La tasa de conversión de iPhone aumentó un 71,9%.
  • Los ingresos de todos los dispositivos subieron un 42,4%.
  • La tasa de conversión global aumentó un 13,6%.
  • La tasa de rebote cayó un 23,2%.

Ahora recomendamos un libro electrónico….

Si quieres leer algo sobre este tema te recomendamos A Book Apart, Responsive Web Design de Ethan Marcotte. El libro electrónico sólo cuesta $9.

…y le daremos algunas herramientas útiles

Fit Text es un plugin jquery para escalar escrituras y títulos: http://fittextjs.com/

FitVids es otro plugin jquery para mantener el tamaño de un vídeo reducido: http://fitvidsjs.com/

GitHub es un plugin jquery para redimensionar imágenes de fondo: https://github.com/danmillar/jquery-anystretch

Empresa de posicionamiento seo – NEGOCIO VIVO

Llámanos