Probablemente ya hayas elegido un tema responsivo de WordPress. La mayoría de los temas modernos tienen en cuenta la creciente importancia del tráfico móvil. ¿Pero fuiste más allá? ¿Puso algún esfuerzo especial en su página de destino móvil?
En esta publicación, sostendré que el diseño receptivo por sí solo no es suficiente para crear una página de destino móvil de calidad. Tienes que ir un paso más allá. En esta publicación, le daré algunas de las mejores prácticas para crear páginas de destino móviles. También iré más allá y te mostraré cómo implementar fácilmente muchos de estos consejos con Divi y Divi Builder.
Si todavía vives en un mundo de ensueño donde los visitantes de escritorio son los reyes, me disculpo por el impacto que estoy a punto de dejarte…
Según un informe de 2016 de Hitwise , ~58% de las búsquedas de Google ahora se realizan en dispositivos móviles. Esto coincide con una publicación de blog de 2015 de AdWords , en la que admitieron lo mismo (aunque para mercados limitados).
Y hay mucho en juego cuando esos buscadores aterrizan en su sitio web: aproximadamente el 40% de ellos elegirá otro resultado si su sitio no es compatible con dispositivos móviles.
El tráfico móvil también está más orientado a las compras de lo que piensas. Por ejemplo, un sorprendente 40 % de las compras en línea del Black Friday provinieron de dispositivos móviles. En dólares reales, eso fue más de mil millones en ventas desde dispositivos móviles.
Con números como esos, no puede darse el lujo de ignorar el móvil.
¿Qué hace que una página de destino móvil sea diferente?
1366×768…
Esa es la resolución de pantalla más popular en las computadoras de escritorio.
¿Sabes lo que es en el móvil?
- iPhone 7 – 375×667
- Google Píxel – 411 x 731
- Samsung Galaxy S7 – 340 x 640
No hace falta ser matemático para darse cuenta de que esos números son bastante diferentes.
En primer lugar, el móvil tiene una resolución visible más pequeña. Y segundo, la relación de aspecto está completamente invertida.
Agregue las diferentes dinámicas del toque y no puede esperar que el diseño de la página de destino móvil imite perfectamente su contraparte de escritorio.
Prácticas recomendadas para la página de destino móvil
Para estas mejores prácticas, no voy a tocar mucho las mejores prácticas generales de la página de destino. Hay conceptos que se aplican a todas las páginas de destino, independientemente del dispositivo. Si quieres consejos generales, ya tenemos algunos posts sobre landing pages:
- Cómo construir una página de destino efectiva desde cero con Divi Leads
- 5 páginas de destino de alta conversión creadas con Divi
- Crear páginas de destino usando WordPress
Para obtener consejos específicos sobre las páginas de destino para dispositivos móviles, siga leyendo…
Minimice las distracciones eliminando elementos innecesarios
Ya sea móvil o de escritorio, nunca querrá distracciones en su página de destino. Pero en la pequeña pantalla de un móvil, hay más en juego… y la definición de lo que es una distracción es más amplia.
Las pantallas móviles son pequeñas, por lo que su título, subtítulo y CTA probablemente ya ocuparán gran parte del espacio visible. Cualquier otro elemento grande corre el riesgo de distraer a sus lectores de completar su CTA.
Si está utilizando Divi, puede elegir fácilmente eliminar algunos elementos de la versión móvil de respuesta de su sitio.
¿No estás seguro de cómo?
Cada vez que agregue un nuevo módulo en Divi Builder, simplemente desplácese hacia abajo hasta la configuración Deshabilitar en Configuración general :
Si marca la casilla junto a Teléfono , ese módulo específico no se mostrará para los usuarios móviles. Es posible que también desee comprobar Tablet , según el módulo.
Si deshabilita módulos específicos, una buena práctica recomendada es tenerlo en cuenta mediante el uso de una etiqueta de administrador personalizada. El cuadro Etiqueta de administrador también se encuentra en Configuración general :
De esa manera, puede crear una nota que le recuerde que un módulo está deshabilitado en el dispositivo móvil. Algo como esto:
No es necesario, pero es muy útil si alguna vez necesita realizar cambios en su página en una fecha posterior.
Acorte su título en el móvil
Debido a que tiene menos espacio visible en dispositivos móviles, si desea mantener su título en negrita y que llame la atención, debe acortarlo.
Si está utilizando Divi, puede mostrar diferentes versiones de su título utilizando el mismo concepto que describí anteriormente. Excepto que tendrás que hacer una adición.
En lugar de un módulo que contenga su título, cree dos. Deshabilite la versión de escritorio de su título en dispositivos móviles y tabletas, y deshabilite la versión móvil/tableta de su título en computadoras de escritorio.
¡Bam! Una forma sencilla de acortar el título de tu landing page móvil sin tener que recurrir a soluciones externas.
Cuando los visitantes vayan a su sitio, solo verán el título que está habilitado para su dispositivo específico.
Acorte su copia también
No son solo los titulares los que deben recortarse, también deberá acortar su copia si desea que los visitantes móviles realmente se queden y la lean. La duración promedio de una sesión móvil es aproximadamente la mitad de la duración de una sesión promedio de escritorio.
Por lo tanto, es posible que la misma copia de formato largo que se convierte bien en la versión de escritorio de su sitio no haga lo mismo en dispositivos móviles.
Reduzca su copia a lo esencial. En caso de duda, muestra a tus amigos tu copia en el móvil. Si la longitud es abrumadora para ellos, probablemente también abrumará a sus visitantes.
Puede usar exactamente el mismo truco Divi que describí anteriormente para agregar diferentes versiones de copia para diferentes dispositivos.
Siga las recomendaciones móviles de Google
Las páginas de destino utilizables son buenas páginas de destino. Si sus lectores tienen dificultades para leer el texto de su página, no se convertirán bien. Nadie quiere perder el tiempo haciendo zoom y desplazándose solo para entender lo que está sucediendo.
Afortunadamente, no tienes que tratar de averiguar qué hace que una página sea utilizable. Google ha establecido pautas de usabilidad móvil como parte de su impulso para mejorar la experiencia del usuario móvil en la web.
Por ejemplo, Google recomienda que utilice un tamaño de fuente mínimo de 16 px en dispositivos móviles. Eso significa que su texto normal debe ser de 16 px; los encabezados deben ser más grandes.
Pero, ¿qué sucede si no desea que el tamaño de su texto sea de 16 px para todos los dispositivos? Bueno, si está usando Divi, puede configurar diferentes tamaños de fuente para diferentes dispositivos.
Solo tienes que ir a Divi → Personalizador de temas . Luego busque el cuadro Estilos móviles y haga clic en Teléfono .
Allí, puede configurar tamaños de texto personalizados específicamente para la versión móvil de su sitio:
Puede encontrar más recomendaciones de Google en el Informe de usabilidad móvil en Google Search Console (deberá agregar su sitio como una propiedad en Search Console para ejecutar el informe). Este es el mismo informe que solía ser parte de PageSpeed Insights.
Hacer que los números de teléfono se puedan hacer clic
Esta es una gran molestia personal…
Si sus visitantes están en el móvil, están absolutamente preparados para llamarlo. ¡Ya tienen el dispositivo necesario en la mano!
Así que no hagas que sea difícil para ellos llamar. Permítales hacer clic en su número para llamarlo de inmediato en lugar de obligarlos a tratar de recordarlo o copiarlo y pegarlo.
Tenemos una publicación completa sobre cómo puede agregar la funcionalidad de hacer clic para llamar tanto a Divi como a otros sitios de WordPress.
Coloque su CTA en una ubicación fácilmente accesible
En la pantalla de una computadora, los visitantes pueden hacer clic prácticamente en cualquier parte de la pantalla con facilidad. Pero en los teléfonos móviles, las cosas no son tan flexibles.
La investigación de UX Matters muestra las áreas en las que se puede hacer clic para los métodos más comunes de sostener un teléfono. Por ejemplo, si sus lectores sostienen un teléfono con una mano, el área en la que se puede hacer clic se parece mucho a uno de estos:
Imagen de UX Matters
Fuente de la imagen: UX Matters
El artículo completo de UX Matters incluye ejemplos de todas las posiciones comunes de las manos.
Una buena regla general es poner tu CTA en el cuadrante inferior izquierdo de la pantalla. Eso debería ser fácil de hacer clic para la mayoría de los usuarios diestros, sin importar cómo sostengan su teléfono.
Acorte las longitudes de los formularios si es posible
Si está pidiendo a sus usuarios que completen un formulario en su página de destino, por ejemplo, una suscripción, debe saber cuánto tiempo dura ese formulario. Recuerde que sus usuarios están escribiendo en un teclado móvil: si su formulario es demasiado largo o incluye demasiadas casillas de verificación molestas, sus visitantes pueden desecharlo por completo.
De todos modos, las formas más cortas suelen convertir mejor .
Además, también debe asegurarse de que haya suficiente espacio entre los campos del formulario para que los visitantes usen toques táctiles. Los dedos no tienen la misma precisión de precisión que un mouse, por lo que necesita un poco más de búfer entre los campos de formulario si es posible.
Los tiempos de carga de la página importan más que nunca
Obviamente, este no es estrictamente móvil. Los tiempos de carga de la página son importantes para cada versión de su sitio web.
Pero las consecuencias de un sitio móvil de carga lenta pueden ser aún más desastrosas cuando los visitantes utilizan datos móviles en lugar de su conexión doméstica (normalmente) más rápida.
De hecho, es probable que el 74% de los visitantes móviles abandonen un sitio web que tarde más de 5 segundos en cargarse.
Por lo tanto, si su página de destino para dispositivos móviles se carga lentamente, no solo está reduciendo la experiencia de su usuario… sino que los está alejando.
Si completó el paso «minimizar las distracciones» que mencioné anteriormente, con suerte ya eliminó algunos elementos innecesarios de la versión móvil de su sitio. La eliminación de imágenes y videos grandes contribuirá en gran medida a mejorar el tiempo de carga de la página de su página de destino móvil.
Seguir nuestros otros consejos para mejorar los tiempos de carga de la página también marcará una gran diferencia, sin importar si sus visitantes están en dispositivos móviles o de escritorio.
Envolviendo las cosas
Si bien muchos de los mismos principios generales de conversión que se aplican a las páginas de destino para computadoras de escritorio se aplican a las páginas de destino para dispositivos móviles, no todos son iguales.
En general, los dos aspectos específicos que debe considerar absolutamente para su página de destino móvil son:
- Resolución visible drásticamente reducida. Con menos bienes inmuebles, debe ser más conciso y minimalista.
- Las deficiencias del tacto. Recuerde siempre que sus visitantes no tienen un mouse: la navegación debe ser simple.
Si bien esos dos principios no lo son todo, si los tiene en cuenta (y sigue mis otros consejos), estará por delante de la mayoría de la competencia.
¿Ha utilizado Divi para crear una página de destino móvil personalizada para su sitio? Si tiene algún consejo adicional para hacerlo, me encantaría escucharlo.
Imagen en miniatura del artículo de inspiron.dell.vector/shutterstock.com