Herramientas para probar un sitio web responsive

Blog, Desarrollo Web

Esta vez he querido compartirles un par de herramientas para probar nuestros sitios Web Responsive, ya que muchos desarrolladores no tenemos la posibilidad de tener en nuestras manos Smartphones o Tables de diferentes fabricantes y tamaños la mejor alternativa es usar herramientas online o extensiones del navegador que emulen estos dispositivos y nos permitan hacer test de nuestro diseño Responsive.

Herramientas online:

The responsinator: Esta web nos permite probar los media queries definidos para diferentes smartphones y tablets, permite ver la web al mismo tiempo en pantallas que van desde 240X320 pixeles hasta 1024×768 pixeles, su gran desventaja es que no permite emular el navegador de cada plataforma. sin embargo es genial para mostrarle la web en vivo al cliente.

Matt Kersley Responsive: su única ventaja en comparación con The responsinator es que nos permite ver los diferentes tamaños de dispositivos en linea horizontal, esto ayuda a encontrar posibles errores de una manera fácil.

Screenqueri: Esta herramienta es mas completa que las dos anteriores aunque no emula directamente los navegadores de los dispositivos tiene un listado muy completo de smartphones y tablets incluyendo Blackberry, Sony Xperia, HTC y Motorola.

IpadPeek: Con IpadPeek podemos ver como se comporta nuestro diseño en los dispositivos de Apple la mayor ventaja es que muestra de manera muy real el diseño del dispositivo junto con el espacio que ocupa la barra del navegador web y el teclado qwerty.

MobilePhoneEmulator: Esta herramienta posee muy buenas opciones y permite configurar el tamaño de las pantallas en pulgadas, también permite elegir dentro de diferentes modelos de teléfonos y recomienda hacer test en los otros navegadores web.

Herramientas Offline o extensiones:

Window Resizer: Es una extensión para Chrome y con ella es posible redimensionar la ventana del navegador con los diferentes tamaños de pantalla de dispositivos, permite personalizar tamaños de resoluciones y ordenarlos a nuestro gusto, su única desventaja es que no permite probar de manera facil cuando el dispositivo esta de manera horizontal (landscape), para Mozilla Firefox existe L-Square

Viewport (Responsive testing tool): Otra extensión para Chrome, funciona como Window Resizer solo que a diferencia esta permite ver ambas vistas, horizontal (landscape) y vertical (portrait).

Chrome Developer Tools:Esta es la forma mas sencilla y personalizable que existe sin que sea necesario instalar una extensión, basta con abrir las Herramientas para desarrolladores de Google Chrome (CTRL+MAYUS+I), hacer clic en el piñon que aparece en la parte derecha inferior ir a “Overrides” y personalizar las versiones del navegador y la resolución del dispositivo.

overrides

¿Sabes de alguna herramienta y la quieres compartir?

Anuncios

8 comentarios en “Herramientas para probar un sitio web responsive

  1. Great blog here! Also your site loads up very fast!

    What web host are you using? Can I get your affiliate link to your host?
    I wish my website loaded up as quickly as yours lol

  2. Hola yo hago testing de páginas responsive, y esto, perdonarme pero no vale para nada. Vamos a ver, esta muy bien para ver diferentes resoluciones, pero no es practico a la hora de subir a producción, porque estos programas van a servir para ver esas resoluciones en dicho navegador. Es decir, que si cojes y minimizas la pantalla pues el resultado es el mismo y sin tener que ir a estas herramientas.Pero a la hora de la verdad, tu te vas a un dispositivo, y como utiliza un navegador nativo, vas a obtener diferentes resultados.

    Resumiendo, para ver resoluciones con un navegador (ie, chrome, firefox, safari) puedes minimizar la pantalla y vas viendo los cortes (sin necesidad de ir a ninguna herramienta), si se cambian cuando deben, pero para poco más te sirve, ya que para simular tamaños de dispositivos, no es suficiente con ello por lo que he explicado antes.

Dejar un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s