En 2016, el uso de Internet en dispositivos móviles fue mayor que en ordenadores. Desde entonces, no ha mostrado signos de ralentización. De hecho, según Broadband Search, en enero de 2022, los dispositivos móviles se mantuvieron en cabeza con una cuota de mercado del 55 %, mientras que los ordenadores alcanzaron el 42 % y las tabletas, el 3 %.
Esto quiere decir que, dependiendo de tu nicho de negocio, más de la mitad de las personas que visiten tu sitio lo harán a través de su dispositivo móvil.
Como propietario de la web, tendrás que asegurarte de ofrecer una apariencia adecuada en todos los dispositivos, de modo que la marca, la empresa y las ventas no se vean perjudicadas. Para ello, lo más aconsejable es que tu web sea adaptable a los dispositivos móviles.
Si no es así, la gente no encontrará, visitará ni seguirá usando tu web o negocio. Plataformas conocidas como WordPress.com te lo ponen fácil, ya que todos sus temas están optimizados para móviles (incluso los gratuitos).
En este artículo veremos cómo es el proceso de creación de webs adaptables a dispositivos móviles y por qué es importante para tu negocio.
Antes de empezar, vamos a ponerlo todo en contexto.
Diseño optimizado para móviles y diseño adaptable a dispositivos móviles. ¿Cuál es la diferencia?
Antes de ver cómo puedes crear una web adaptable a dispositivos móviles, analicemos las principales diferencias entre los diseños optimizados para móviles y los diseños adaptables a dispositivos móviles.
Diseño optimizado para móviles
Si un diseño está optimizado para móviles, está desarrollado de tal forma que funciona exactamente igual en diferentes dispositivos. Tanto si ves el sitio en un ordenador como si lo haces en un móvil, la experiencia será, en esencia, la misma.
Por defecto, elementos como la navegación compleja, las animaciones largas o las imágenes grandes no funcionan bien en un móvil. Por lo tanto, un sitio optimizado para móviles debe crearse sin esos elementos, independientemente de la plataforma en la que se vaya a ver. Los usuarios de dispositivos móviles pueden interactuar con formularios, usar menús desplegables y ver animaciones como si estuvieran usando un ordenador.
Es lo que se suele denominar experiencia móvil “clásica”, ya que a menudo parece como si estuvieras intentando navegar por un sitio que no se ha diseñado pensando en los usuarios de dispositivos móviles, incluso aunque el diseño del sitio se haya cambiado para adaptarse a los usuarios de móviles y mejorar la “optimización” móvil en general.
Diseño adaptable
Una opción más habitual y actual para las webs modernas es el “diseño adaptable”. Este tipo de diseño garantiza que la web responderá en función de las necesidades del dispositivo desde el que se está viendo.
Por ejemplo, cambia el diseño de tres columnas al de una columna cuando el usuario pasa del modo horizontal al modo vertical en su dispositivo móvil. También modifica el tamaño de las imágenes para adaptarlas a la anchura de la pantalla. De esta forma, quien visite tu web verá las imágenes con una resolución óptima, sea cual sea el tamaño de la pantalla del dispositivo. El diseño adaptable también ajusta el menú de navegación al dispositivo. Por ejemplo, puede aparecer como una barra lateral en el ordenador, pero se convierte en un menú hamburguesa desplegable en el dispositivo móvil.
¿Cómo puedes crear webs adaptables a dispositivos móviles?
Con la herramienta de prueba de optimización para móviles de Google, puedes comprobar si Google considera que tu web está optimizada para móviles o no. Sí, es cierto que acabamos de decir que nos vamos a centrar en la adaptabilidad a dispositivos móviles en contraposición a la optimización para móviles. En realidad, esta herramienta prueba si tu sitio es adaptable a dispositivos móviles, pero ¿quiénes somos nosotros para decirle a Google que sea coherente con la terminología?
Solo tienes que introducir la URL de tu sitio, y obtendrás el resultado al instante. Si tu sitio no está optimizado para móviles, Google puede penalizarte en las clasificaciones de búsqueda en dispositivos móviles, y menos gente encontrará tu sitio en los resultados de sus búsquedas.
Por lo tanto, si descubres que el rendimiento en dispositivos móviles de tu sitio tiene defectos, esto es lo que puedes hacer para ofrecer a tus usuarios la mejor experiencia posible:
Usa una plataforma compatible con el diseño web adaptable
En primer lugar, debes utilizar una plataforma que sea compatible con el diseño web adaptable.
Si decides crear tu web con WordPress.com, puedes elegir entre más de 100 preciosos temas que te permiten cambiar su apariencia.
Con estas plantillas personalizables, los usuarios pueden cambiar el diseño y la estética general de su sitio. Hay temas de WordPress.com disponibles para todos los sectores, incluyendo la educación, el negocio inmobiliario, la publicidad, la salud, el deporte, la cocina, la repostería, el software y la fotografía. La lista es casi infinita.
Todos los temas de WordPress.com son adaptables. ¿Qué quiere decir esto? Pues que, independientemente del tema que decidas usar, tu web se cargará exactamente como tú quieras tanto en dispositivos móviles como en tabletas y ordenadores.
Por ejemplo, si decides poner una imagen en la página de inicio de tu web, aparecerá exactamente donde tú quieres cuando la gente visite la web, sin importar el tipo de dispositivo que usen para acceder a ella. De esta manera, mejorará la experiencia del usuario en tu web y la clasificación del sitio en los resultados de búsqueda en dispositivos móviles. Cada tema de WordPress cuenta con un diseño diferente de los menús, los widgets, las páginas, etc., pero todos lucirán un aspecto estupendo en cualquier dispositivo.
Prueba las personalizaciones minuciosamente
Muchos creadores de webs ofrecen temas y experiencias adaptables listos para usar. Sin embargo, a veces no satisfacen las necesidades de los propietarios de negocios, ya que están pensados para webs sencillas. En cuanto empiezas a personalizar tu sitio, puedes encontrarte con problemas insólitos.
Por ejemplo, imaginemos que añades elementos CSS a tu web con el fin de atraer la atención hacia un texto importante. Cuando un usuario visite tu web, el texto podría tener un aspecto diferente al que tú querías. Así es difícil que puedas ofrecer la misma experiencia de usuario a los usuarios de dispositivos móviles.
Todas las personalizaciones que apliques en el Personalizador de WordPress.com funcionan por defecto en todos los dispositivos móviles. Por lo tanto, una vez que añadas las opciones de personalización, no tendrás que preocuparte de si los usuarios de dispositivos móviles no pueden ver el nuevo diseño de tu sitio.
Si tienes un plan de WordPress.com con plugins activados, puedes añadir elementos personalizados a tu web, además de CSS y plugins de externos. Cuando uses diferentes opciones de personalización, prueba una y otra vez para asegurarte de que tu web tenga la máxima compatibilidad con dispositivos móviles.
Cerciórate también de que los plugins que quieres usar cuentan con un diseño web adaptable antes de instalarlos en tu web. Así no acabarás preguntándote por qué tu sitio no es adaptable aunque estés usando un tema adaptable.
También es recomendable evitar elementos emergentes que ocupen toda la pantalla, ya que pueden resultar molestos en un dispositivo móvil. Por ejemplo, si un usuario de dispositivo móvil está leyendo un artículo de tu blog, lo último que le apetece ver es un elemento emergente que ocupa todo el espacio —ya de por sí limitado— de su pantalla.
Por otro lado, puedes usar consultas de medios de CSS y puntos de interrupción para aplicar diferentes conjuntos de reglas a elementos personalizados en función de ciertas condiciones, como la anchura del navegador o el tipo de dispositivo. Esto quiere decir que, cuando un usuario de dispositivo móvil visite tu web, los elementos CSS cambiarán automáticamente y se ajustarán en función del tamaño de su pantalla. Aquí ya nos adentramos en aspectos técnicos que van más allá del tema que se trata en este artículo. Puedes obtener más información sobre el uso de puntos de interrupción para dispositivos móviles aquí.
Comprime tus archivos
Comprimir archivos en tu web es una buena forma de mejorar la adaptabilidad a dispositivos móviles. Puesto que la mayoría de los dispositivos móviles tienen menos potencia y disponen de un ancho de banda menor que los ordenadores, minimizar el consumo de datos y de batería es fundamental para disfrutar de una buena experiencia de uso. Desde el punto de vista técnico, esto significa que las imágenes de alta resolución y las animaciones de tu web pueden ralentizar la experiencia de algunos usuarios de dispositivos móviles.
Lo bueno es que, con WordPress.com, tu sitio se ocupa automáticamente de comprimir los archivos CSS, HTML y JavaScript. No tendrás que preocuparte de buscar plugins de externos que te ayuden con eso.
Una vez que hayas añadido todos los elementos CSS y el código a tu web, no tendrás que inquietarte por si hacen que tu web no sea adaptable para los usuarios de dispositivos móviles. Además, los sitios de WordPress.com también sirven imágenes usando la red de publicación de contenido Photon de Jetpack. Gracias a ello, las imágenes se cargarán rápidamente estén donde estén los usuarios, y su experiencia será mucho más fluida.
Simplifica la navegación
Tanto si el menú de navegación se pliega en un solo icono como si se muestra en horizontal en la parte superior de una ventana del dispositivo móvil, se aplica la misma regla: que sea sencillo.
La presencia de demasiadas opciones de navegación o submenús puede llegar a abrumar, e incluso puede provocar problemas de formato en los dispositivos móviles.
Cuando un usuario visita una web, lo último que quiere ver son opciones de navegación complicadas. Pueden resultar confusas en los dispositivos móviles, donde no se pueden ver todas las opciones a la vez. Si te decantas por la sencillez, ayudarás a los usuarios de dispositivos móviles a navegar por tu web sin dudar sobre dónde hacer clic.
Por ejemplo, si vendes ropa, en lugar de ofrecer una opción de navegación de cada subcategoría de vaqueros, puedes elegir mostrar solo las categorías principales. De este modo, en lugar de crear un elemento de menú para Vaqueros slim y Vaqueros rectos, puedes crear un elemento de menú para Vaqueros que incluya ambas subcategorías. Así al usuario no le costará encontrar los vaqueros en tu web cuando navegue por ella a través de su dispositivo móvil.
Crea un texto optimizado para móviles
Se puede dividir a los visitantes de una web en tres categorías:
- Los que leen por encima. Personas que echan un vistazo a la página web en busca de datos clave. Eso es lo único que buscan cuando visitan la página de tu sitio.
- Los que leen a fondo. Personas que, cuando visitan tu web, deciden ir más allá y leen hasta la última letra.
- Híbridos. Estos visitantes son una mezcla de los dos tipos anteriores. Su interacción con tu web dependerá de lo atractiva que sea.
Ahora que conoces los tres tipos de visitantes que pueden ver tu sitio, parte de tu plan de diseño adaptable a dispositivos móviles debe ser redactar para todos ellos.
Ten en cuenta la recomendación que hace E-Write acerca del método bocado/aperitivo/comida (“Bite/Snack/Meal”).
El bocado consiste en usar el encabezado de una página o entrada para que los lectores se hagan una idea de lo que van a encontrar. Por ejemplo, puedes usar algo como Cómo te ayudan nuestros servicios a mejorar las ventas o Cómo se reducen tus gastos con nuestros servicios como encabezados que despierten el interés del lector y decida leerlo bien.
El aperitivo consiste en crear un resumen o una conclusión que ofrezca una noción concisa. Por ejemplo, puedes facilitar los contenidos clave de la entrada de blog en los apartados del resumen. Así los lectores pueden saborear la esencia del artículo. Esto se puede hacer con la sección de preguntas frecuentes o una sección demasiado larga que cuesta leer entera.
La comida es el contenido completo, que aporta explicaciones más detalladas que llenan los espacios que los lectores no hayan cubierto en los pasos anteriores.
Crea tu web adaptable a dispositivos móviles
Crear una web adaptable a dispositivos móviles es mucho más fácil una vez que conoces las diferentes cuestiones que se deben tener en cuenta al hacerlo. Con un creador de webs sólido como WordPress.com, no tendrás que preocuparte de hacer un esfuerzo titánico para que tu web sea adaptable a dispositivos móviles, ya que hace casi todo el trabajo por ti.
Cuando pruebes tu web con la herramienta de prueba de optimización para móviles de Google, sabrás si es adaptable o no. Si no lo es:
- Usa una plataforma compatible con el diseño web adaptable a dispositivos móviles. Así se determinará la eficacia con la que responderán el tema y el diseño a los usuarios que accedan usando un dispositivo móvil.
- Pon a prueba minuciosamente todas las personalizaciones para asegurarte de que tu diseño tenga exactamente el aspecto que tú quieres a ojos de los usuarios tanto de ordenador como de dispositivos móviles.
- Comprime los archivos para que los usuarios no tengan que esperar mucho a que los archivos CSS, HTML y JavaScript se carguen en el teléfono móvil.
- Simplifica la navegación para ofrecer a los usuarios de dispositivos móviles que visiten tu web una experiencia más sencilla y placentera.
¿Quieres crear sitios adaptables a dispositivos móviles? ¡Pásate al plan WordPress.com Business!
Velocidad increíble
En la prueba independiente de 2021 de Review Signal, WordPress.com recibió la calificación de «proveedor de alojamiento más rápido de WordPress» en todo el rango de precios.
INFORMACIÓN SOBRE EL AUTOR
Go WordPress - WordPress.com 