Cómo ver una página web en versión móvil

Ha llegado la era del móvil. Cuando Google insiste tanto tiempo en su famosa frase "mobile first" es por algún motivo. Nosotros como desarrolladores web, tenemos que estar al tanto siempre de las novedades que nos indican los chicos de California.

El móvil se ha convertido en una de nuestras principales fuentes de conocimientos. Hoy en día, en pleno siglo XXI, no hay nadie que no tenga un teléfono móvil. Iphone, Xiaomi, Samsung, LG,... da igual la marca. Al final todos cumplen con su función, que lejos de ser un aparato para emitir y recibir llamadas, se ha convertido en nuestra principal baza para consultar información y navegar por internet.

Esto hace que nuestras webs tienen que estar adaptadas a todo tipo de dispositivos. Grandes y pequeños. De más píxeles y de menos. El diseño responsive se ha convertido así en fundamental a la hora de desarrollar una página web.

En este post, vamos a ver hasta 5 herramientas, a través de las cuales podemos ver cómo se vería nuestra página web en móvil. De esta manera, antes de mandar a indexar a Search Console, comprobaremos si efectivamente Google tendrá una buena primera impresión móvil de nuestra web. Y ya sabes lo que dicen por ahí de las primeras impresiones...

La primera de todas las herramientas que quiero compartir en este listado, es el que tendremos más a mano. Se trata del inspector de elementos del propio navegador. Doy por hecho que todos utilizamos Google Chrome, ya que es el navegador más utilizado actualmente, pero si estás utilizando otro, no te preocupes, puesto que también lo suele traer.

Utilizarlo es muy fácil. Pinchamos con click derecho en la página web que queremos ver cómo se vería desde móvil y pulsamos la opción "Inspeccionar". Se nos abrirá un cuadro donde podremos ver la versión para teléfono de la web. Además, podremos intercambiar entre diferentes dispositivos para cerciorarnos de que efectivamente, se ve perfectamente en todas las pantallas móviles.

Este es posiblemente mi favorito. El primero que suelo utilizar para ver cómo ha quedado la versión móvil de mi página. Se trata de mobiletest.me.

Esta herramienta nos ofrece ver nuestra página en 6 dispositivos diferentes, lo que nos permite visualizar la versión responsive del sitio en los más comunes tamaños de pantallas. Los dispositivos son:

Resizer es otra herramienta que me gusta mucho. La dejé de utilizar porque descubrí la anterior, pero lo cierto es que es rápida y en apenas unos segundos podemos tener una visión general de cómo se ve nuestra página en los diferentes dispositivos (PC, Tablet y móvil).

Lo que más me gusta es que es muy intuitiva. Entras y simplemente insertando la web que queremos ver su diseño responsive, nos lo muestra rápidamente. 

Puedes acceder a esta herramienta desde aquí.

Responsinator es una herramienta rápida y efectiva. Su diseño sin distracciones hace de ella una web limpia e intuitiva.

El único inconveniente que veo a Responsinator es que para ver las diferentes adaptaciones de nuestra web tenemos que hacer scroll, perdiendo una perspectiva inicial que tenemos por ejemplo en mobiletest.

Aún así, es muy útil, y si no te importa perder esos segundos, posiblemente sea la herramienta más completa para ver el diseño responsive de una web.

Puedes acceder a su web desde este link. 

Esta herramienta no es una web donde podamos ver el diseño responsive de una página. Se trata de la prueba definitiva para ver si el sitio web está optimizado para poder ser visualizado desde cualquier dispositivo móvil. Es por así decirlo, el examen final que debemos superar para saber si nuestra web es mobile friendly.

Al ingresar en esta página, tenemos que insertar la dirección de la URL que queremos probar y cruzar los dedos. Puedes acceder a ella en este enlace.

Espero que estas 5 herramientas sean de utilidad para cuando estés lanzando la versión final de tu web. Es importante tener contento a Google y sin duda, el que nuestra web sea mobile friendly es fundamental si queremos dar una buena impresión a nuestros posibles clientes.

Si tienes dudas de como utilizar alguna de ellas, puedes ponerte en contacto conmigo sin problemas a través del formulario de contacto que encuentras en este sitio.