7 herramientas para ver tu web en dispositivos móviles

Herramientas para probar tu página web en dispositivos móviles
4
(36)

Si estás trabajando en el diseño de tu web, hay algo que tienes que tener siempre a mano: una herramienta para probar tu página web en dispositivos móviles.

Este tipo de herramientas funcionan como un simulador de dispositivos móviles. Es decir, tú introduces la URL de tu página web y ves cómo se ve tu sitio en diferentes marcas y modelos de dispositivos móviles. Incluso algunas de ellas te permiten añadir tamaños de pantalla personalizados.

¿Quieres ver algunas de las más utilizadas? Venga, pues vamos a grano 🙂

¿Por qué es tan importante tener una web responsive?

¿Sabías que casi el 70% del tiempo que pasamos navegando por Internet lo hacemos desde móviles?

Estoy segura de que este dato no te coge por sorpresa. Hace ya un tiempo que el diseño responsive ha dejado de ser una opción para convertirse en una obligación. Bueno, eso si quieres ofrecer a tus visitas una buena experiencia de usuario y, como no, que Google tenga en cuenta tu web a la hora de posicionarla en buscadores.

El Mobil-first Index de Google prioriza la versión móvil frente a la versión desktop. Así que, si estás trabajando en un nuevo diseño responsive para tu web o estás optimizando el que ya tenías, seguro que querrás probar tu web en diferentes tamaños de dispositivos móviles para que no se te pase nada por alto.

Pero, ¿cómo hacerlo? Pues muy fácil. En Internet existen un montón de herramientas que te permiten probar tu web en diferentes dispositivos o tamaños de pantalla. Para que te hagas una idea, son simuladores de dispositivos móviles que muestran cómo se ve tu web en diferentes modelos o marcas de teléfonos móviles.

¿Quieres ver cómo funcionan? Aquí tienes 7 de mis favoritas 🙂 .

7 herramientas para ver tu web en dispositivos móviles

1. Screenfly (BlueTree)

Para mí Screenfly es uno de los mejores simuladores de dispositivos móviles que te puedes encontrar online.

Tiene un panel muy completo e intuitivo, además un montón de funcionalidades que te serán útiles si estás trabajando en la versión responsive de tu sitio:

  • Simular tu web en movil, tablet o desktop.
  • Elegir marca y modelo del dispositivo.
  • Añadir una pantalla personalizada.
  • Opción de rotación.
  • Compartir los resultados con el resto de tu equipo.

Probar página web en dispositivos móviles con la herramienta Screenfly

2. Resposive Test Tool

Otro simulador de dispositivos móviles que me gusta mucho es Responsive Test Tool.

Esta herramienta te permite ver tu web en distintos dispositivos móviles. Tienes más de 50 marcas y modelos disponibles, así como diferentes tamaños de pantalla para tablet, ordenador e incluso TV.

Si el dispositivo que quieres probar no está en la lista, también tienes la posibilidad de añadir tamaños de pantalla personalizados.

Probar página web en dispositivos móviles con la herramienta Responsive Test Tool

3. Probar página web en dispositivos móviles con la herramienta Demostrating Responsive Design

El funcionamiento es muy similar a las herramientas que acabamos de ver. Primero abre Demostrating Responsive Design, introduce la URL de tu web, selecciona los píxels de ancho y alto de la pantalla y pulsa en Open para ver los resultados del simulador.

Una vez abierta la URL de tu web, puedes ir cambiando el tamaño y ver cómo se comporta tu sitio en diferentes pantallas.

Probar página web en dispositivos móviles con la herramienta Responsivepx

4. Responsinator

Una alternativa muy buena es Responsinator. Simplemente introduce la URL de tu página web y pulsa en Go. Automáticamente la herramienta te enseña cómo se ve tu web en diferentes marcas y modelos de dispositivos móviles.

Probar página web en dispositivos móviles con la herramienta Responsinator

5. Am I responsive?

Otra herramienta para probar tu web en dispositivos móviles es Am I responsive?. Algo más simple que las que acabamos de ver, pero te sirve para realizar un test rápido y comprobar si tu web se ve bien o no en dispositivos móviles.

Probar página web en dispositivos móviles con la herramienta Am I Responsive?

6. Demonstrating Responsive Design

Muy similar a la que acabamos de ver. Demonstrating Responsive Design es un simulador muy sencillo, pero útil y rápido para saber si una página web es responsive o no. Ofrece únicamente tres tamaños de pantalla con el dispositivo vertical y horizontal.

Probar página web en dispositivos móviles con la herramienta Demostrating Responsive Design

7. Extensiones para Chrome y Firefox

Aunque no son herramientas en sí, existen diferentes extensiones para tu navegador que permiten simular diferentes tamaños de pantalla y comprobar cómo se ve tu web en cada uno de ellos.

Si no quieres añadir ninguna extensión al navegador, también puedes utilizar el inspector de elementos (pulsando la tecla F12) para simular diferentes tamaños de pantalla. Por defecto, tienes varias marcas o modelos para elegir, pero también puedes personalizar los píxeles de largo y ancho de la pantalla.

Probar página web en dispositivos móviles con el inspector de elementos

Da un paso más… ¡Optimiza tu web para móviles!

Si estás probando tu web en diferentes dispositivos móviles es porque quieres mejorarla y ofrecer una mejor experiencia de usuario a quienes te visitan. Por eso, además de probar tu web, puedes realizar un test de optimización y velocidad de tu web en móviles, algo que te permitirá descubrir los puntos débiles de tu sitio para seguir mejorando.

Prueba de optimización para móviles de Google

Es superfácil de utilizar, simplemente una vez que accedes a la Prueba de optimización para móviles, introduces la URL de la web y la herramienta te muestra cómo se ve tu web en un dispositivo móvil, así como los diferentes problemas de usabilidad que detecta y que podrían afectar a la experiencia de usuario de tus visitas.

Para que te hagas una idea, a continuación te muestro algunos problemas de los que te puede alertar:

  • Uso de contenido flash. Como algunos navegadores móviles no son capaces de reproducirlo, Google detecta si tu web lo utiliza y te alerta para que puedas buscar una alternativa.
  • Problemas en la ventana gráfica. Por ejemplo, si no tienes la ventana gráfica especificada con la etiqueta meta viewport Google te avisa, ya que los navegadores no podrían mostrar el contenido correctamente.
  • Tamaño de la fuente. Si tienes establecido un tamaño muy pequeño, quizá estés obligando a tus usuarios que hagan zoom en sus pantallas. Esto Google lo valora negativamente, así que prefiere alertarte para que lo corrijas.
  • Mala colocación de elementos táctiles. Imagínate que tienes dos CTA o llamadas a la acción muy próximas entre sí; Google te avisa para que lo mejores, ya que podría afectar a la correcta navegación del usuario.

Prueba la velocidad en móviles con Think with Google

Una vez que ya tengas tu web optimizada para dispositivos móviles, también puedes probar si cargan rápido o no en dispositivos móviles. Se trata de una herramienta tan sencilla como la que acabamos de ver. Introduce la URL de la web que quieras probar y ¡listo!

Como sabes, tener un buen servicio de alojamiento web como nuestros planes de Hosting SSD, te serán de mucha ayuda si quieres conseguir que los tiempos de carga de tu web sean bajos. Estos planes de hosting utilizan discos SSD, mucho más modernos que los discos SAS y proporcionan un rendimiento muy superior. Si quieres comprobarlo por ti mismo, puedes elegir la prueba gratuita durante 15 días; no necesitas introducir ningún dato de pago. Simplemente pruébalo y, si te gusta, puedes quedarte con nosotros 🙂

Hosting SSD

En conclusión

Si ya te has decidido de una vez por todas a crear una web responsive, estas herramientas te serán muy útiles para probar tu página web en diferentes dispositivos móviles. Además, las herramientas de Google te ayudarán a optimizar todavía más tu web en móviles, detectando posibles problemas de usabilidad o velocidad que podrían afectar seriamente a la experiencia de usuario.

Ahora es tu turno. ¿Has usado alguna de estas herramientas? ¿Conoces algún otro simulador de dispositivos móviles que podamos añadir a esta lista?

¡Puntúa este artículo!

Total votos: 36. Promedio: 4

14 Comentarios
  • Aherediaj
    Posted at 20:10h, 30 diciembre Responder

    al fin los encontre

    • carol.ramos
      Posted at 09:23h, 02 enero Responder

      ¡Muchas gracias por leernos! 🙂

  • SEO en Cali
    Posted at 20:27h, 12 noviembre Responder

    Excelente herramienta para poder visualizar la pagina y poder realizar un buen posicionamiento web

    • María Acibeiro
      Posted at 10:37h, 21 noviembre Responder

      ¡Muchas gracias!

  • Luis Alberto Gisado
    Posted at 14:20h, 08 abril Responder

    Muchas gracias, por la información de estas herramientas, saludos desde Cuba. Muchas bendiciones y éxitos

    • María Acibeiro
      Posted at 10:32h, 10 abril Responder

      ¡Muchas gracias, Luis Alberto! 🙂

  • Tecfys
    Posted at 17:14h, 13 enero Responder

    Muy buenas herramientas! Y todavía siguen funcionando! Gracias por el post.

    • María Acibeiro
      Posted at 10:20h, 17 enero Responder

      ¡Gracias a ti por leernos!

  • Andres
    Posted at 08:07h, 27 septiembre Responder

    Ninguna Funciona!
    Hace 15 años trabajo realizando web para distintas empresas.. como cualquier diseñador, utilizamos primero una web para testear antes de pasar al dominio del cliente. Ninguna tomo el sitio de testeo..solamente toman los sitios con ssl y verificados por google..Para esto entonces tendria que pasar mi sitio por un control seo, pero eso no es de lo que se habla aqui.
    Lastimosamente ninguna sirve.
    Saludos

    • LucusHost
      Posted at 11:05h, 27 septiembre Responder

      Hola Andrés,

      Justo hemos actualizado el post hace un par de días, y actualmente las herramientas que hay sí funcionan. Eso sí, por seguridad, algunos proveedores de hosting bloquean la carga de un dominio a través de un iframe cargado desde otro dominio. Si tienes tu web con nosotros, tendrías que quitar esta protección añadiendo la siguiente línea al principio del .htaccess de tu web:

      Header unset x-frame-options

      Cualquier duda, abre un ticket con soporte y te ayudamos 🙂

      ¡Un saludo!

  • Aarón Mendoza
    Posted at 23:45h, 18 enero Responder

    Justo lo que estaba buscando, gracias por publicar estos sitios.

    • Maria Acibeiro
      Posted at 10:25h, 20 enero Responder

      Muchas gracias a ti por leernos, Aarón 🙂

  • John
    Posted at 19:47h, 30 diciembre Responder

    Gracias por las herramientas. Son de gran ayuda

    • Verónica Casas
      Posted at 19:10h, 02 enero Responder

      ¡Espero que te hayan sido útiles! Gracias por leernos 🙂

Escribe un comentario