DevOPS

Herramientas para ver nuestra web diferentes dispositivos responsive design

Siempre cuando estamos diseñando nuestro front end de nuestros sitios web o app necesitamos ver cómo es que funcionan en diferentes dispositivos móviles y verificar si nuestro sitio web efectivamente es responsive design para evitar problemas a la hora de sacar nuestras creaciones a producción.

Bueno esto ya no es ningún problema ya que hace tiempo he tenido una gran cantidad de herramientas que nos facilitan todo esto y estás van desde reducir la ventana del navegador pasando por extensiones hasta sitios web con diferentes vistas de esto.

Bueno nos vamos a ir de uno en uno enumerando sin contar su relevancia ya que todos son muy buenos.

Am i Responsive #1

Este es un sitio web muy bueno por que te crea un mockup dinámico y funcional pues puedes tomar captura de pantalla y usar la misma como presentación de tus diseños en tiendas online te invito a que visites el sitio web haciendo clic aquí: Am i responsive

Responsive design checker #2

Esta es una herramienta muy rápida de usar pero esta no muestra mockups así como la anterior mostrando todos los dispositivos juntos sino que muestra todos por separado y tiene para todas las resoluciones posibles, puedes verlo entrando aquí: Responsive design checker

Responsive test #3

Este es un sitio web con el que tu puedes modificar la resolución a cualquiera que se te plazca por que tiene la opción de escribir la resolución que quieres observar, es muy fácil e intuitivo de usar puedes verlo aquí: Responsive test

Responsinator #4

Este es un sitio web aún más sencillo pero igual de fácil de usar muestra las vistas desde un teléfono móvil hasta una pantalla grande de una tablet, esta herramienta solo muestra para dispositivos móviles ya sea en su versión portrait o landscape, pero no tiene mayor modificación alguna, puedes verla haciendo clic aquí: Responsinator

Screenfly #5

Este sitio web tiene una herramienta un poco más personaliza-ble ya que cuenta con refresh y giro de pantalla, también cuenta con muchas de las vistas que ya no se usan pero siempre es bueno saber, como son las vistas de dispositivos móviles antiguos, es muy buena puedes verla aquí: Screenfly.

Móvil test #6

Esta es una herramienta un poco más limitada pero te muestra como es que se vería tu sitio web en diferentes versiones de teléfono como lo puede ser una tablet, un iphone o un lumia, pues es muy sencilla de usar y no muy compleja en sus opciones, así que si la quieres ver lo puedes hacer haciendo clic aquí: Mobiltest.

Mobile friendly #7

Esta herramienta no es tanto para ver tu sitio en diferentes dispositivos sino para ver si tu sitio web tiene las características para ser amigable a dispositivos móviles, bueno es muy sencillo de usar y es una herramienta creada por google, lo cual hace que lo que te aparezca en pantalla sea totalmente toda la información que necesites mejorar en tu sitio web puedes hacer la prueba entrando aquí: mobile friendly

Extensiones para google chrome y firefox que muestran tu sitio web en diferentes dispositivos:

Estas extensiones son útiles si no quieres estar copiando y pegando el link en cualquiera de los sitios web anteriormente vistos, yo uso dos que son muy buenos los puedes descargar haciendo clic abajo:

Te recomiendo que estudies y uses la que mas te gusta y también si tu usas por ejemplo publicidad de adsense o cualquier otro tipo, recuerda que la hacer estas pruebas tu sitio se verá responsive solo si haces un refresh en la página de otra manera no