Comprueba de forma sencilla tu WordPress para dispositivos móviles

Al diseñar nuestra web en WordPress, comprobar que funcione correcta en cualquier tipo de dispositivo y tamaño de pantalla es algo esencial. Y no es extraño ver como muchas personas, al querer saber como funciona su web en un dispositivo móvil, lo hagan directamente abriendo la página desde su smartphone. No es mala idea, pero puede resultar un poco ortopédico si estamos trabajando desde nuestro ordenador de sobremesa o portátil, y tenemos que ir cambiando de dispositivo cada vez que queremos comprobar algún cambio. Pero tenemos métodos alternativos para poder hacer esto aunque no tengamos un smartphone o tablet a mano.

Pero, ¿tan importante es testear nuestros diseños en dispositivos móviles?. Si tenemos en cuenta datos como los que nos ofrecen desde Statista, el 54,8% de las visitas a webs en el primer trimestre de 2021 se hicieron desde dispositivos móviles, con una tendencia al alza desde hace años. Por eso, si no cuidamos la experiencia de navegación de estos usuarios, podríamos perderles, y con ellos, posiblemente más de la mitad de nuestras visitas. Por eso es tan importante el diseño responsive y, si somos diseñadores web, usar herramientas tan útiles como las media queries en CSS.

En definitiva, lo que queremos conseguir es recrear en la pantalla de nuestro ordenador de sobremesa o portátil la pantalla de un smartphone o tablet, para así saber de primera mano como va a verse nuestra web sin necesidad de tener físicamente ninguno de estos dos dispositivos. Aparte, hará que nuestro flujo de trabajo sea más rápido, al evitar tener que ir cambiando de pantalla.

Este artículo lo vamos a dividir en dos partes, cada una con su propio método para testear nuestros diseños. El primero es el que nos ofrece WordPress de forma interna al crear una página o entrada, y desde donde podemos ver los cambios realizados de forma automática a los vayamos haciendo. La otra forma es gracias a las herramientas de desarrollador de nuestro navegador web que, aunque pueda parecer algo más complejo, nos ofrece más alternativas a las que nos da WordPress.

Comprobación desde WordPress

Empezamos con el método más sencillo, y que vamos a tener más a mano ya que está directamente implementado en WordPress, y con solo hacer un clic ya tendremos disponible.

Desde el editor de páginas / entradas

Si creamos una nueva entrada o página en WordPress, veremos que en la esquina superior derecha, justo al lado del botón Publicar/Actualizar, vemos una opción llamada Vista previa. Si pulsamos sobre ella, se nos abre un menú desplegable con varias opciones.

Por defecto, estará en Escritorio, pero si pulsamos en Tableta o Móvil, veremos como cambia el aspecto del editor, teniendo un visor adaptado a la opción que hayamos escogido.

Lo bueno de usar este método es que veremos los cambios de forma automática conforme estemos trabajando en WordPress. Si añadimos cualquier bloque, directamente tendrá el aspecto adaptado a tableta o móvil. Por supuesto, en cualquier momento podemos volver atrás sin problemas a la vista escritorio.

Desde el Customizer

Esto mismo también podemos realizarlo desde el Customizer de WordPress. Si vamos a Apariencia > Personalizar, veremos que en la parte inferior del panel izquierdo hay tres iconos. Cada uno de ellos equivale a un modo de visualización: Escritorio, Tableta y Móvil. Como pasaba en el editor de entradas/páginas, por defecto está la vista escritorio, pero podemos cambiarla a cualquiera de los dos otros modos con solo hacer un clic.

El poder cambiar el modo de visualización desde esta pantalla nos viene muy bien para comprobar que los cambios que hagamos en el menú, el logotipo de la web, la imagen de fondo, widgets, etc, se aplican de forma correcta los cambios en todo tipo de dispositivos.

Comprobación desde tu navegador web

Para testear nuestra web desde el navegador, usaremos nuestro siempre socorrido amigo el inspector web. En este artículo vimos como empezar a usar el inspector web si es la primera vez que te enfrentas a él. Pero la forma más sencilla de hacerlo es hacer clic derecho sobre cualquier parte de una web, y elegir la opción Inspeccionar en el menú contextual. Hoy nos centraremos en como hacerlo desde Chrome y Firefox.

Desde Chrome

Al abrir el inspector en Chrome, se nos abrirá en la parte inferior, o en alguno de los laterales del navegador. En el panel que se nos abrirá, vemos que en la parte superior izquierda tendremos un pequeño icono de un smartphone y una tablet. Si pulsamos en sobre él, veremos como cambia nuestro navegador.

Es posible que al poner este modo por primera vez no se adapte bien la pantalla, por lo que es recomendable refrescar el navegador pulsando F5. Una vez este todo listo, vemos que sobre la vista de la web está la resolución del dispositivo junto con su nombre. Si hacemos clic en el nombre, tendremos una lista con vario dispositivos conocidos, como iPhone, Galaxy o Pixel.

Al final de dicha lista, tenemos la opción Edit. Esto nos abrirá la posibilidad de editar la lista con más dispositivos que nos da Chrome por defecto, o incluso añadir otros dispositivos que no estén disponibles mediante la introducción de su nombre y su resolución. Ideal si queremos ver como quedará nuestra web en un dispositivo en concreto.

Desde Firefox

En Firefox, el proceso es muy parecido, solo que en esta ocasión, al abrir el inspector, el icono para activar el modo de visualización de dispositivos móviles se encuentra en la parte superior derecha del panel del inspector.

También ofrece la opción de elegir entre diversos modelos, o introducir el que nosotros queramos. Como veis tanto mediante el inspector de Chrome como de Firefox, tenemos muchas más opciones que las que nos ofrecía WordPress. Eso sí, para ver los cambios tendremos que ir refrescando el navegador conforme los vayamos haciendo.

Como hemos podido ver, ya sea a través de las propias herramientas que nos ofrece WordPress, o desde un navegador web gracias al inspector, comprobar que nuestra web funciona de forma correcta en cualquier dispositivo móvil, ya sea un smartphone o una tablet, es muy sencillo. Y todo esto sin que necesitemos tener a mano el propio dispositivo el cual queremos testear. Por supuesto, si trabajamos con varios monitores o en una pantalla grande, podremos hacer este trabajo de forma paralela a como se vería en escritorio, con el ahorro de tiempo que nos va a dar.

Y es que como dijimos al principio, saber que nuestra web funciona de forma correcta y ofrece una navegación amigable desde cualquier tipo de dispositivo es esencial. El hecho de que las visitas casi se repartan por igual entre usuarios de escritorio y portátiles, y de tablets y smartphones, nos debería hacer pensar en la importancia de que nuestra web se adapte a todo tipo de pantallas. Y de ahí la importancia que, ya sea al crear desde cero o introducir cualquier cambio en nuestra web, saber que no estamos rompiendo nada, ya sea en escritorio o móviles.

Esperemos que os haya gustado este artículo. Como siempre, tenéis disponibles los comentarios para hacernos llegar vuestras dudas, sugerencias y experiencias que hayáis tenido trabajando y adaptando vuestros diseños a dispositivos móviles, y que método es el que más os gusta y/o el que soléis utilizar en vuestro día a día.