Cómo adaptar mi WordPress para dispositivos móviles

¿Te has dado cuenta de que es rara la web que visitas por primera vez desde un ordenador de escritorio?

Ya sea porque las conoces desde el buscador de tu móvil o porque llegas a ellas desde una búsqueda, nuestra primera impresión de un sitio web es en base a su versión móvil.

Por ello, incluso aunque nuestro sitio fuese un extraño ser del universo Internet, y finalmente hiciese falta acceder a la versión de escritorio, debemos ser conscientes de que la primera imagen que vamos a ofrecer a nuestros clientes y visitantes va a ser la versión móvil de nuestra página web.

Y este sería el primer motivo del por qué debería adaptar mi web a dispositivos móviles.

¿Por qué debería adaptar mi web a dispositivos móviles?

Claramente, la introducción a esta guía es quizás el más contundente argumento a la hora de convencer a alguien de adaptar su web a dispositivos móviles, pero – quizás ligado a lo anterior – hay otros motivos que también influyen.

¿Cuál es el porcentaje de navegación desde móviles?

Si quieres saber si merece la pena ofrecer una versión móvil de tu web, aquí tienes el estudio de TechJury con unos cuantos datos sobre el porcentaje de navegación en Internet desde dispositivos móviles:

• Más del 80% de los usuarios de Internet utilizan dispositivos móviles para navegar por la web.
• El 83% de los usuarios móviles esperan una experiencia impecable cada vez que visitan un sitio web con cualquier dispositivo móvil.
• Hasta el 70 por ciento del tráfico web proviene de dispositivos móviles.
• El 95,1% del tráfico activo de Facebook proviene de dispositivos móviles.
• El 57% del tráfico de LinkedIn proviene de dispositivos móviles.
• Los dispositivos móviles son responsables de más del 70 % del tiempo de reproducción en YouTube.
• El 90% de las vistas de Twitter ocurren en dispositivos móviles.
• Google es responsable del 96% del tráfico de búsqueda proveniente de dispositivos móviles.
• El 80% de los sitios web mejor clasificados de Alexa están optimizados para dispositivos móviles.

¿Te queda alguna duda sobre la importancia de ofrecer una navegación móvil perfecta de tu web?

Google Mobile First

Hace tiempo que Google mide siempre primero la optimización, usabilidad y posicionamiento de una página en su versión móvil, así que de cara a todas las herramientas de Google debes ofrecer tu mejor cara precisamente en la versión móvil de tu web, pues será la que tendrá más en cuenta a la hora de «medirla».

Solo tienes que comprobar el análizador de Google de usabilidad, también conocido como PageSpeed, y ver que el primer resultado que ofrece es en dispositivos móviles.

Búsquedas por voz

Otra tendencia importante actualmente es el aumento de búsquedas por voz, casi exclusivamente realizadas desde dispositivos móviles.

Cada vez más usuarios de Internet utilizan a diario asistentes de voz como Alexa, Siri o Google Assistant para sus búsquedas habituales, y principalmente desde sus dispositivos móviles o gadgets especializados.

¿Qué es un dispositivo móvil?

Por dispositivo móvil no solo debes entender los teléfonos móviles o celulares, sino también cualquier otro dispositivo portable por un usuario en su uso diario.

Si quitamos de la ecuación los ordenadores de sobremesa y los ordenadores portátiles (o laptops), cualquier otro dispositivo, suficientemente pequeño y poco pesado como para llevarlo encima se puede considerar como dispositivo móvil.

Aquí entra cualquier dispositivo portátil, o sea, teléfonos móviles, asistentes personales, tabletas, phablets, relojes inteligentes e incluso dispositivos multimedia para automóviles. Todos ellos se benefician de las ventajas de ofrecer una experiencia móvil de tu web en algún momento, ya sea en la navegación web o en las búsquedas integradas. 

Administración de WordPress desde dispositivos móviles

Llegados a este punto ¿Está el mismo WordPress bien preparado para su uso desde dispositivos móviles?

Afortunadamente sí, incluso la administración de WordPress está totalmente preparada para su gestión desde dispositivos móviles de cualquier tipo y tamaño.

Lógicamente, cuanto mayor sea el tamaño del dispositivo más cómodas y sencillas serán de realizar las tareas de administración, no digamos la de creación de contenidos, pero poderse se puede utilizar al completo desde cualquier dispositivo móvil.

Ahora bien, también influirá la disposición del dispositivo, horizontal o vertical, pues no esperes ver una vista previa de la web desde la personalización de WordPress si accedes desde un teléfono móvil en vertical.

Como comprobarás, no es que WordPress simplemente adapte el tamaño de sus pantallas a tamaño del dispositivo, sino que incluso cambia el diseño de algunas de sus pantallas, iconos e incluso el modo de navegación, que reconoce los «toques» en pantalla con los dedos o el desplazamiento móvil, algo fundamental para la experiencia de navegación en dispositivos móviles.

Cómo elegir un tema WordPress perfecto para dispositivos móviles

Ahora que hemos comprobado que podemos incluso usar WordPress desde dispositivos móviles, pues realmente se adapta al tamaño, incluso cambiando su aspecto, toca elegir un tema, plantilla o como lo quieras llamar que no solo muestre de manera genial nuestro diseño y contenido en ordenadores de sobremesa, sino especialmente en dispositivos móviles.

Personaliza siempre en la vista previa para móviles

Mi primer consejo, y más importante, a la hora de elegir un tema para tu web WordPress es que te centres, desde el principio, en sus capacidades y posibilidades móviles, y para esto no hay manda más práctico que acostumbrarte a previsualizar siempre en el modo de tamaño móvil.

Solo tienes que hacer clic en el icono del teléfono móvil de la parte inferior del personalizador de WordPress, la herramienta perfecta para elegir, cambiar y personalizar tu web.

Cada vez que cambies de tema, antes de activarlo, comprueba que tu contenido se verá y será útil y fácil de navegar especialmente en la visualización móvil.

Prestaciones específicas para dispositivos móviles

Otro aspecto muy importante son las capacidades de personalización específicas para dispositivos móviles que el tema tenga en sus ajustes, lo que te permitirá adaptar la experiencia de navegación para que sea perfecta independientemente del tamaño del dispositivo del usuario que la esté visitando.

Así, por ejemplo, debes revisar si los ajustes principales del tema, como el tamaño de letra, disposición de menús, etc. puedes cambiarlos según el tamaño del dispositivo. Esto normalmente suele venir identificado por un icono en el ajuste que, cada vez que le haces clic, cambia a otro dispositivo y ahí cambias los ajustes para cada tamaño o dispositivo.

De este modo puedes tener un tamaño de letra, relleno de botones, o incluso estructura de cabecera y pie de página diferente para cada dispositivo.

Este tipo de personalizaciones son realmente importantes, pues lo que puede ser perfecto para un ordenador de sobremesa con una pantalla de muchas pulgadas, puede convertirse en una terrible experiencia de uso y navegación desde dispositivos móviles, más pequeños.

Optimización de velocidad de carga

El otro aspecto vital a la hora de elegir un tema perfecto para dispositivos móviles, o sea, para la mayoría de tus visitantes, es que el tema muestre tu contenido rápidamente, con unos buenos tiempos de carga de página.

La velocidad de carga de las páginas de tu web siempre es importante, pero es especialmente relevante a la hora de servirlas a dispositivos móviles, por los siguientes motivos:

• Las conexiones móviles no son tan rápidas normalmente como las disponibles en tu casa u oficina. Así, una web que desde una conexión de fibra óptica puede parecer rapidísima podría, al mismo tiempo, ser una pesadilla de espera al visualizarla desde un dispositivo móvil en medio de un parque de la ciudad.
• Google mide la experiencia de usuario en PageSpeed con una conexión virtual de conectividad 3G, lo que supone un reto extra a la hora de medir la velocidad de carga de las páginas de tu web en dispositivos móviles. 

Temas WordPress recomendados para dispositivos móviles

Hay muchos temas WordPress que cumplen con los beneficios específicos para navegación en dispositivos móviles, pero los siguientes son quizás los que mejor tienen en cuenta estas necesidades específicas, incluida la velocidad.

• Astra – Tema muy ligero que ofrece ajustes específicos de tipografía y diseño para distintos dispositivos (escritorio, tableta y teléfono móvil), así como un maquetador propio de cabeceras y pies de página que también puedes personalizar según el dispositivo.
• Blocksy – Tiene cientos de personalizaciones, y en las más importantes puedes aplicarlas según el dispositivo (escritorio, tableta y teléfono móvil).
• GeneratePress – Tiene ajustes de tipografía específicos por dispositivo (escritorio, tableta y teléfono móvil)
• OceanWP – Quizás el más completo en cuanto a las adaptaciones de personalización para cada tipo de dispositivo (escritorio, tableta y teléfono móvil), pues prácticamente todos los ajustes importantes de diseño los puedes personalizar para cada tamaño de dispositivo. Eso sí, no es tan ligero como los anteriores, pero destaca en personalización adaptada a dispositivos móviles, y en que prácticamente puedes ajustar cualquier detalle del aspecto de tu web, incluso en la versión gratuita.

Cómo personalizar mi web WordPress para dispositivos móviles

Una vez que hayas elegido un tema WordPress perfecto para la visualización de tu diseño y contenidos en dispositivos móviles, el siguiente paso es abrir el personalizador de WordPress, desde Apariencia → Personalizar de la administración de tu sitio WordPress, y repasar todos y cada uno de los ajustes que el tema ofrezca, prestando especial atención a configurar cada elemento de manera diferente según el tamaño y tipo de dispositivo.

Desde el personalizador ya vas a poder previsualizar – más o menos – cómo se verá tu contenido según los ajustes que configures, pero no te quedes ahí, porque debes tener en cuenta un aspecto importante de los dispositivos móviles: Tamaños y sistemas operativos móviles.

Pues sí, resulta que una web se puede ver y navegar a la perfección en un dispositivo con el sistema operativo Google Android pero, por el contrario, ofrecer una mala experiencia en dispositivos móviles desde un móvil o tableta con el sistema operativo iOS de Apple, por decir los dos sistemas operativos móviles principales.

Así que hay un paso adicional imprescindible que debes tener en cuenta siempre, y es que, tras personalizar tu sitio WordPress ajustando las opciones a dispositivos móviles, tienes obligatoriamente que visitar las distintas secciones y páginas de tu sitio web desde dispositivos móviles reales, cuántos más mejor, y con distintos sistemas operativos.

Apúntate esto y no lo olvides: no existe ningún simulador de dispositivos móviles que sea realmente fiable.

No es necesario que tú mismo dispongas de todos y cada uno de los posibles dispositivos móviles y sistemas operativos, puedes pedir a amigos o familiares que hagan la prueba desde sus dispositivos móviles.

Esta es la única prueba real e indiscutible de que tu sitio web WordPress se verá y navegará a la perfección en todo tipo de dispositivos móviles.

Cómo escribir en mi web WordPress para dispositivos móviles

No te equivoques, no me refiero a si es posible escribir en WordPress desde un dispositivo móvil, sino cómo debo escribir, cómo debo crear mis textos para usuarios que van a leerlos en dispositivos móviles.

Y no, no vale un mismo texto para ordenadores grandes, de escritorio, que para dispositivos móviles, principalmente por el tamaño de la pantalla,  pero también por el modo de lectura en ambos tipos de dispositivos.

Mientras en un ordenador de sobremesa hay una actitud de lectura y navegación, pues el usuario se ha sentado para navegar, leer, etc., en un dispositivo móvil es un tipo de lectura intermitente, ocasional, que no es que vaya a leer menos, pero sí va a leer por partes, en distintos momentos.

Está comprobado que los usuarios leen más desde dispositivos móviles, en pequeños espacios de tiempo, pero más. Por ejemplo, son muchos más los usuarios que leen artículos largos, incluso libros completos, desde su teléfono móvil o tableta, pero no desde su ordenador de sobremesa.

Esto es así porque se lee mucho en los trayectos cortos en transporte colectivo, entre paradas de metro o bus, día a día, y es poca la gente que decide ponerse delante de un ordenador, sentado en su escritorio, a leer un libro, por ejemplo.

Lo mismo pasa con las redes sociales, cuyo mayor porcentaje de lectura, entre el 80 y 90% es desde dispositivos móviles.

Sabiendo esto, y que la mayoría de tu tráfico va a ser móvil, debes aprender algunos sencillos consejos de escritura para dispositivos móviles:

• Usa títulos breves y descriptivos, que al mismo tiempo sean atrayentes y que motiven a compartirlos en redes.
• Los párrafos deben ser cortos, aproximadamente de la mitad de palabras de cómo los escribirías para una lectura en ordenador de sobremesa. Plantéate que no superen, al escribirlos en un ordenador de sobremesa, de 3 líneas, lo que supondrá más del doble en un dispositivo móvil, y haría que se llenase toda la pantalla de texto, que precisamente es lo que tienes que evitar. En mi experiencia, he comprobado que no hay ningún punto y seguido que no pueda leerse igual y tener el mismo sentido que con punto y aparte (este mismo párrafo, por ejemplo, ya ha superado con mucho la longitud deseable para dispositivos móviles, no cabe entero en una pantalla de teléfono móvil.
• Separa los textos largos en distintos «capítulos» mediante subtítulos que expliquen cada sección de tu texto, como estoy haciendo yo mismo en esta guía por ejemplo. Todo el rato estoy hablando de lo mismo pero separado en varias partes.
• Utiliza listas para explicar conceptos complejos, en vez de largos párrafos explicativos.
• Usa formato de negritas en alguna frase llamativa de cada párrafo, para que mientras el usuario lee el anterior párrafo, «algo» ya le esté incitando a leer el siguiente párrafo.

Suelo resumir cómo debe ser la escritura en Internet para dispositivos móviles en que tu objetivo es que debes conseguir que cada párrafo anime a leer el siguiente, y así sucesivamente. Para conseguirlo, puedes ayudarte de los anteriores consejos.

Un truco obvio a la hora de escribir para dispositivos móviles es ir haciendo vistas previas para móviles de manera frecuente desde el editor de WordPress.

No es necesario que escribas todo el rato en la vista previa de móvil, pero sí cambia a esta vista de vez en cuando, sobre todo cuando sospeches que llevas demasiado tiempo escribiendo sin cambios de párrafo, sin aplicar recursos como subtítulos, listas, negritas, etc.

Como mínimo, deberías realizar una vista previa para móviles al menos antes de publicar tu contenido.

Análisis de legibilidad

Una herramienta fantástica para ayudarte a escribir para dispositivos móviles es el análisis de legibilidad del plugin Yoast SEO.

Una vez instalado y activo, este plugin – entre otras cosas – añade una caja al editor de WordPress con un análisis SEO basado en frases clave objetivo, interesante de cara al posicionamiento, pero también incluye en esa misma caja un análisis de legibilidad que te será especialmente útil para la escritura orientada a dispositivos móviles.

En este análisis de legibilidad encontrarás una serie de puntuaciones basadas en cuán legible es tu texto para una fácil lectura.

Hay muchos parámetros posibles pero es sorprendentemente efectivo a la hora de detectar textos con párrafos largos, frases largas, frases reiterativas, frases que no animan a seguir leyendo por falta de palabras de transición, etc.

Siempre digo que no es necesario hacer caso 100% al análisis SEO de los plugins pues están basados en algoritmos informáticos de Google que no siempre ayudan a crear textos más humanos, pero con el análisis de legibilidad de Yoast SEO mi consejo es justamente el contrario, pues ayuda a hacer textos más legibles, sencillos y atractivos, especialmente para usuarios con dispositivos móviles.

Cómo diseñar mi web WordPress para dispositivos móviles

Si pensabas que con elegir un buen tema WordPress para ofrecer una buena experiencia de navegación en dispositivos móviles está todo hecho no puedes estar más equivocado.

No todo es el tamaño de letra o espaciado entre secciones, ni siquiera vale en todo momento escribir siempre para dispositivos móviles, habrá situaciones en las que deberías plantearte si no vas a necesitar crear versiones distintas de tus páginas, igual no de todas, pero sí de algunas en concreto, especiales para dispositivos móviles, o para ordenadores de sobremesa, si siempre escribes y diseñas pensando en dispositivos móviles.

Aquí no hay misterios, lo que necesitas es que la herramienta con la que creas tus páginas en WordPress te permita seleccionar qué contenidos verán los usuarios desde cada tipo de dispositivo. Esto pasa en la totalidad de las ocasiones por crear distintas versiones de tus páginas o de algunas partes de tus páginas, para cada tipo de dispositivo.

Desafortunadamente, aún el editor de WordPress por sí solo no permite especificar para cada bloque de contenidos en qué dispositivo se verá y en cuáles no, así que tendremos que ayudarnos de otras herramientas de diseño y maquetación de textos que sí permitan realizar esta discriminación de textos por dispositivo.

Si utilizas el editor de WordPress para crear tus páginas, puedes especificar bloques concretos para cada tipo de dispositivo ayudándote de plugins que añaden esta funcionalidad al editor de bloques de WordPress.

Mi plugin favorito de lejos para añadir esta característica es EditorsKit, una caja de herramientas para el editor de bloques de WordPress que añade un montón de utilidades que no incorpora por defecto, al menos de momento.

Y entre ellas está la de poder especificar para cada bloque de un texto en qué dispositivos estará visible y en cuáles no.

Esto, por supuesto, cambia tu metodología de escritura y maquetación de los contenidos, que para un creador de contenidos concienciado con ofrecer la mejor experiencia posible en todo tipo de dispositivos sería así:

1. Crea tu página, primero pensando solamente en un único tipo de dispositivo.
2. Cuando esté terminada revisa cada parte o sección de la página en el resto de tamaños de dispositivo y si alguna parte no se visualiza perfecta en algún dispositivo ocúltala para ese tipo de dispositivo y crea, a continuación de la misma, otra con similar contenido, pero adaptado a los dispositivos en los que la primera versión no se visualizaba bien, ocultando esta sección adaptada en el dispositivo original.
3. Y así con cada párrafo, parte o sección.

Al final lo que tendrás será una página en la que unos párrafos serán iguales para todos los dispositivos, mientras que de otros párrafos, partes o secciones tendrás hasta 3 versiones o más, cada una adaptada a un tamaño o tipo de dispositivo diferente.

Igual pensarás que esto es demasiado trabajo como para ponerte ahora mismo a revisar todas y cada una de las páginas y entradas de tu web, pero piensa en que el objetivo es que tus páginas principales estén perfectamente optimizadas para todo tipo de dispositivos, especialmente para los móviles.

Mi consejo para rentabilizar y optimizar tu trabajo es el siguiente:

1. Edita siempre las entradas pensando especialmente en dispositivos móviles. Si se ven bien en móviles se verán bien en el resto de dispositivos. A fin de cuentas una entrada es básicamente texto y recursos visuales (imágenes, vídeo) y esto no implica una maquetación diferenciada.
2. Tus páginas principales (inicio, productos, servicios, destino, etc.) siempre deben estar maquetadas de manera diferenciada en cada una de sus partes, secciones y párrafos para cada tipo de dispositivo, pues aquí el objetivo es conseguir la mayor conversión posible independientemente del dispositivo del visitante, y una maquetación o diseño perfecto para un tamaño de dispositivo puede generar cero conversiones en el resto de dispositivos.

Plugins para adaptar mi web a dispositivos móviles

¿Hay plugins que hagan versiones móviles perfectas de mi web sin tener yo que trabajar?

La cruda realidad es que no, no hay milagros, no existe ningún plugin, ni siquiera tema, que vaya a ofrecer una versión adaptada a cada tipo de dispositivo de todos tus contenidos.

Como ya hemos visto a lo largo de esta guía, hay temas que te ayudarán a adaptar los elementos de aspecto básicos (tipografías, botones, cajas, contenedores, etc.) a cada tipo de dispositivo, pero ninguno de estos temas, ni ningún plugin que ofrezca versiones móviles de tu web, van a «crear» una versión para dispositivos móviles perfecta de tu web.

Es verdad que antiguamente, hace años, había plugins para crear versiones móviles, pero han quedado obsoletos desde el momento en que la inmensa mayoría de temas WordPress se adaptan a los dispositivos móviles sin necesidad de instalar ningún plugin y, además, muchos de ellos incorporan ajustes específicos.

Así, plugins antiguamente imprescindibles en cualquier sitio WordPress, como WPTouch, que casi todos hemos tenido instalado, actualmente no es que aporten poco, sino que no son nada recomendables, pues limitan las capacidades del tema, normalmente más versátil a la hora de ofrecer versiones móviles de tu web.

Lo que sí puede ser interesante a veces es ayudarte de otros plugins, como el visto anteriormente EditorsKit, para funcionalidades concretas, o plugins para hacer versiones móviles de tus menús en caso de que no te satisfaga cómo la genera tu tema, pero poco más.

Una lista de estos plugins que podrían servirte para cuestiones muy concretas relacionadas con la visualización de tu web WordPress en dispositivos móviles sería la siguiente (verás que no es muy larga):

• EditorsKit – Ofrece la posibilidad de especificar en qué tipo de dispositivo se verá cada bloque del editor de WordPress, entre otras muchas utilidades más para el editor.
• WP Mobile Menu – Plugin con el que crear versiones especiales de tus menús para teléfonos móviles, cuando el tema no te ofrece lo que necesitas en este sentido.
• Max Mega Menu – Plugin para crear mega menús (menús horizontales, con imágenes, etc.), para todo tipo de dispositivos.

¿Debería ofrecer una versión AMP de mi web WordPress para dispositivos móviles?

Para terminar, es posible que si eres un usuario avanzado de WordPress hayas echado de menos que haya citado la creación de versiones en AMP de tu web.

Hasta hace relativamente poco tiempo era casi obligatorio tener una versión en AMP de tu web, pues Google priorizaba las páginas AMP sobre el resto en su buscador móvil, pero recientes denuncias por monopolio y uso abusivo han forzado a que Google prácticamente abandone este desarrollo, que actualmente lo prioritario para posicionar sea – como siempre – el contenido bueno y original, y la optimización para móviles.

Para los nostálgicos, AMP es una versión simplificada de HTML que creó Google, que teóricamente ofrecía páginas para móviles más rápidas, pero al mismo tiempo eran demasiado limitadas, y la realidad es que todo el mundo adoptó este nuevo estándar simplemente porque Google le daba prioridad, por obligación.

Crear versiones AMP para móviles en WordPress es tan sencillo como instalar el plugin oficial de AMP para WordPress, pero absolutamente no te lo recomiendo actualmente, pues ya te digo que es un estándar que está prácticamente muerto. Mejor céntrate en crear páginas optimizadas para cada tipo de dispositivo, especialmente para dispositivos móviles, y para eso ya hemos visto algunos consejos y recursos en esta guía, que espero que te hayan ayudado.

Para cualquier otra cosa, pregunta en los comentarios o en mis redes sociales.

Si deseas aprender más sobre cómo puedes adaptar tu web WordPress para dispositivos móviles, o si prefieres verlo con ejemplos en vídeo, lo puedes hacer desde nuestro canal de YouTube en el Curso WordPress: