El comercio móvil ya representa casi el 40% de las ventas totales de comercio electrónico, y se proyecta que dominará alrededor del 54% para 2021, ¡lo que significa que podrías estar perdiendo ingresos importantes si tu sitio no está optimizado para el uso móvil!
Además de que los dispositivos móviles suelen ser el primer punto de contacto entre tú y tus clientes, considera la popularidad de los teléfonos inteligentes, la creciente presencia de consumidores más jóvenes y cada vez más expertos en tecnología móvil, y una cultura rápida, en movimiento y centrada en lo digital que exige más comodidad y más eficiencia a cada minuto. Es fácil ver la necesidad de la experiencia móvil, pero ¿cómo se traduce esto específicamente en las tiendas de productos digitales?
En esta publicación, repasamos algunas de nuestras recomendaciones para optimizar tu tienda de productos digitales para el uso móvil, para que puedas mantenerte al día con los tiempos, ¡y con las ventas!
Comprender el cambio hacia el minimalismo
Retrocedamos un minuto: son principios de los 2000 y la llegada de los teléfonos inteligentes está ejerciendo mucha presión sobre los proveedores de servicios de Internet para que se adapten al creciente consumo de ancho de banda. Los consumidores pueden usar Internet de forma regular mientras se desplazan, un gran cambio en el estilo de vida que instiga una revisión completa de cómo se presenta el contenido web.
Es hora de cambiar el guion de las animaciones impresionantes y el contenido cargado de gráficos a páginas web que se puedan cargar razonablemente rápido en redes celulares menos potentes, y los desarrolladores web ahora están optimizando la velocidad para mantenerse al día. Añade a esto los efectos de las plataformas de redes sociales como Facebook, que deben adaptarse a velocidades de hasta 2G para ser más accesibles a nivel mundial, ¡y puedes imaginar la creciente necesidad de un enfoque más "simplificado"!
La optimización móvil ha estado en el centro de esta progresión, ya que la sociedad ha llegado a ser aún más orientada a los teléfonos inteligentes con el tiempo. Ahora estamos en un punto de inflexión interesante; muchas personas usan teléfonos inteligentes y tabletas como dispositivos principales para todo tipo de propósitos, desde el trabajo y la educación hasta las compras y el entretenimiento.
Los teléfonos inteligentes son nuestras líneas de vida: tiendas únicas para nuestros horarios, contactos, comunicación e interacción social, salud y bienestar, compras, lectura, música, TV, películas, juegos, lo que sea. No hace falta decir que optimizar tu tienda de productos digitales para el uso móvil no es solo por diversión; es cada vez más necesario para cualquier sitio web, ¡y no querrás quedarte atrás! Entonces, ¿dónde empiezas?
Diseño web adaptable
Con tantos dispositivos diferentes, ¿cómo puedes estar seguro de que tu sitio se muestra correctamente? El diseño web adaptable es un método de diseño web que ajusta automáticamente tu contenido y diseño según el dispositivo que se esté utilizando. Un componente fundamental de la optimización para móviles, el diseño web adaptable permite a los usuarios de dispositivos móviles como smartphones y tablets (así como portátiles y ordenadores de escritorio) ver correctamente y usar eficazmente tu sitio web según diferentes estándares de visualización.
Cuando está optimizado, el contenido puede parecer más minimalista en dispositivos móviles para priorizar la funcionalidad, o más centrado en lo visual para reducir el desorden, dependiendo del tipo de contenido.
Ejemplo de smartphone pequeño (AudioTheme)
Ejemplo de tablet pequeña (AudioTheme)
Ejemplo de escritorio grande (AudioTheme)
Aparte de los beneficios estéticos y de ingresos, el diseño adaptable también ayuda a mejorar tu SEO. ¿Cómo? Bueno, Google anunció recientemente que comenzará a usar la indexación mobile-first, lo que significa que el motor de búsqueda se referirá en gran medida a las versiones móviles de los sitios para la clasificación y la indexación debido a la predominancia de usuarios móviles.
Entonces, ¿qué necesitas hacer para implementar el diseño web adaptable en tu propia tienda de productos digitales? Dependiendo de tu nivel de experiencia, hay algunas opciones:
- Instala un tema adaptable. La mayoría de los temas contemporáneos están diseñados para ser adaptables, por lo que esta es probablemente la opción más fácil, especialmente si administras tu propio sitio.
- Paga a tu diseñador web para que modifique tu tema existente o sitio personalizado para incluir el diseño adaptable.
- Modifica tu tema existente o sitio personalizado tú mismo, si realizas tu propio desarrollo web.
Las herramientas de análisis y mapas de calor pueden mostrarte las dimensiones promedio de pantalla y los patrones de actividad de los visitantes de tu sitio web, lo que te permite personalizar para tu audiencia específica. Incluso puedes segmentar a tus usuarios por tipo de dispositivo. Prueba a usar una herramienta como Responsive Design Checker para ver cómo se muestra actualmente tu sitio en diferentes dispositivos.
Rendimiento
¿Quieres asegurarte de que tu sitio funciona bien cuando se accede desde diferentes dispositivos? La velocidad lo es todo; ¡de hecho, puede hacer o deshacer la experiencia del usuario!
Si un sitio tarda en cargarse, es mucho más probable que la gente lo abandone por completo. Para minimizar las tasas de rebote, quieres que tu sitio cargue lo más rápido posible. Es importante recordar que las redes celulares tienden a ser menos estables que las redes de banda ancha, con una conectividad volátil que depende de la ubicación física, el uso compartido y otras variables. ¡Teniendo esto en cuenta, cuanto más ligero sea tu sitio, mejor!
“La mayoría de la gente abandonará una visita a un sitio móvil si la página tarda más de unos pocos segundos en cargarse.” –Google
Aquí tienes algunos trucos para una experiencia móvil de carga rápida:
- Minimiza los tamaños de los archivos HTML/CSS. Usa una herramienta como Gzip para comprimirlos, y trata de acercarte lo más posible a los 70 KB si quieres velocidades de carga ultrarrápidas.
- Reduce requests. Each component of your site (whether its an image, font, or stylesheet, etc.) generates its own request. Combine elements where possible to minimize this effect.
- Use a good host. An optimized server stack with server-level caching is ideal.
- Avoid unnecessary plugins. Keep your load as light as possible!
- Consider using a content delivery network (CDN) for images. This is especially relevant if your site has a lot of images. Also make sure your images are optimized for the web!
- Disable any functionality you don’t absolutely need.
- Use HTML5 instead of Flash, if you want to use any special effects.
- Don’t use pop-ups. They can be cumbersome to deal with on mobile devices.
- Limit the use of redirects and link shorteners unless they are necessary. These just add on to your load time!
Google offers this tool that allows you to compare your site’s mobile performance with other sites. You can also use it to estimate how speed improvements could impact your revenue.
Contenido
Another aspect of mobile optimization is how you present your content. The long-standing rule since the beginning of print media has been that you want to communicate the basic gist of your content “above the fold”. In the digital sense, this refers to the immediately visible area of a web page when it first loads.
However, some experts say that the fold no longer matters; that with modern trends in internet usage, it’s nearly irrelevant. When you think about extremely popular sites like Facebook that use infinite scrolling, you might agree! So, where does that leave us?
Well, even if it’s true that it’s less relevant than before, placing your most important information above the fold does guarantee that it’s the first thing your site visitors will see. Let’s compare a few desktop and mobile examples:
Search bar and menus are easily accessible, with the latest promotions front and center (Producer Loops)
It’s immediately obvious what the site offers, without having to scroll (UIdeck)
A clean and minimal look featuring the headline and top products, with easy access to the menu and support database / FAQs (ThemeBeans)
Navigation and interactivity
Navigation is a crucial element of mobile optimization, because smaller devices can significantly limit user functionality if left alone. Best practices point toward consolidating menus into the simplest and most relevant options, such as your store home or main product gallery (and/or product categories), support page, and contact page. The good news is that most themes come with a mobile menu option right out of the box!
When it comes to interactivity, factor in the differences in clickability when using different devices. Smaller buttons might be easy to click with a mouse, but they can be more difficult to tap on a smartphone, for example. Anything you can do to optimize your site’s mobile interactivity is ideal!
Muchas tiendas y servicios digitales ofrecen soporte de chat en vivo o acceso rápido y fácil a preguntas frecuentes, lo que facilita al máximo que los clientes hagan preguntas o obtengan más información sobre los productos. Podrías instalar un plugin de soporte de chat, por ejemplo, o crear una sección de preguntas frecuentes o una base de datos de soporte que esté organizada de forma intuitiva y sea consultable.
El factor de conveniencia
Es importante recordar que muchos usuarios de móviles compran en sus teléfonos solo por el factor de conveniencia, por lo que los procesos de pago sencillos, especialmente los de pago con un clic, son cada vez más populares. Esto se aplica también a otros elementos de tu sitio, como los menús, las páginas de productos y el soporte. ¡Piensa en lo que puedes hacer para consolidar la información de modo que sea concisa y requiera un mínimo de clics y navegación!
Contenido de audio y vídeo
Cuando sea posible, siempre es preferible alojar tus archivos de audio y vídeo en plataformas de terceros que ya estén específicamente optimizadas para el uso móvil. Por ejemplo, los vídeos de Vimeo y YouTube se pueden incrustar fácilmente en tus publicaciones o páginas, lo que reduce la necesidad de código personalizado o de ocupar una gran cantidad de espacio de almacenamiento en tu propio servidor.
En cuanto al audio, WordPress está perfectamente bien, ya que tiene un reproductor de audio adaptable integrado, pero también puedes optar por utilizar servicios como SoundCloud para alojar tus archivos de audio. La ventaja de la mayoría de las plataformas de audio y vídeo como estas es que las reproducciones desde tu sitio web cuentan para tu recuento de reproducciones en la plataforma.
¡No olvides probarlo todo!
Algunas empresas tienen departamentos enteros dedicados a las pruebas de dispositivos móviles, pero si tu operación es más pequeña, puedes utilizar servicios o sitios web de pruebas de dispositivos (como Responsive Design Checker o Responsinator) que te permiten previsualizar tu sitio en diferentes dispositivos.
También puedes simplemente ajustar el tamaño de la ventana de tu navegador para ver cómo responde tu diseño a medida que cambian las dimensiones. Recuerda que no necesariamente obtendrás un diseño perfecto en *todos* los casos; el diseño adaptable normalmente solo se centra en 3 o 4 resoluciones diferentes, adhiriéndose a los puntos de interrupción de resolución más comunes y actualizados (elementos CSS que dictan cómo aparecen los diseños en diferentes tamaños de pantalla).
La mayoría de los temas/sitios de comercio electrónico más populares se construyen utilizando frameworks de desarrollo web populares como Bootstrap 4 (utilizado por Twitter) y están construidos para ser "mobile first", utilizando un sistema de diseño de cuadrícula que se escalará y funcionará en todos los dispositivos de forma nativa. Esto permite a los desarrolladores crear temas atractivos sin preocuparse de que todos los dispositivos sean compatibles de forma nativa. Si encuentras problemas con ciertos dispositivos, normalmente puedes informar del problema al desarrollador del tema y es posible que publique una actualización.
Preparar tu tienda de productos digitales para el uso móvil no es un proceso de la noche a la mañana, pero esperamos que esta publicación te haya dado algunas ideas y directrices útiles. La optimización móvil sigue creciendo en necesidad; afortunadamente, ¡eso *también* significa que hay un número creciente de herramientas y recursos disponibles para ayudarte a lograrlo!
¿Tienes algún consejo que compartir sobre cómo optimizar tu propia tienda de productos digitales para uso móvil? ¿Qué obstáculos has encontrado y cómo los superaste? ¿Qué te ha resultado más útil? ¡Nos encantaría saber lo que tienes que decir en los comentarios a continuación!
Ilustración de Jessica Johnston.
