Como probar una web responsive con diferentes herramientas | Adrenalina

Como probar una web responsive con diferentes herramientas

Publicado Por | 07 abril , 2014 | Blog Adrenalina, SEO Técnico | No Comments

Como podemos comprobar que estamos usando de manera correcta las @media querys? Pues bien aquí les dejo unas cuantas herramientas para poder testear nuestro diseño responsive, ya que no todo el mundo puede tener los diferentes smartphones que existen en el mercado, con sus respectivas resoluciones, al igual que paso con las tablets o monitores.

Herramientas offline y extensiones

  • ChromeDeveloper Tools: Esta opción ya viene preinstalada con Google Chrome, es una manera muy fácil, solamente tenemos que abrir las herramientas de desarrolladores (CTRL+MAYUS+I), se abrirá el inspector de elementos, aquí podremos jugar con la ventana minimizada (arrastrando la ventana haciéndola más pequeña o más grande) y arriba a la derecha saldrá la resolución de la ventana.
  •  WindowResizer: Esta es una extensión parar Google Chrome y podemos variar la dimensión de la ventana de nuestro navegador indicando las diferentes resoluciones de pantalla, su único punto malo es que no podemos testear cuando el Smartphone o Tablet se encuentra en posición horizontal. Para Firefox hay la extensión L-Square.
  • Viewport: Esta extensión es muy parecía a la anterior, con la diferencia que esta sí permite testear en posición horizontal.

Herramientas online

  • IpadPeek: Con esta herramienta veremos cómo se adapta nuestro diseño en casi la totalidad de los dispositivos Apple, la ventaja de esta herramienta es que muestra de manera muy parecida al diseño del dispositivo con el espacio que ocupa el teclado y la barra del navegador.
  • The responsinator: Esta herramienta online nos permite probar con las diferentes resoluciones (Smarthpones y Tablets).La mayor ventaja es que permite ver al mismo tiempo en pantallas que van desde 240X320px hasta 1024X768px, la lástima es que no permite emularlo con cada plataforma de navegador.                                      
  • Matt Kersley Responsive: Es muy parecido a “The responsinator”, con la ventaja de poder probar el responsive en posición horizontal.
  • MobilePhone Emulator: Esta web a diferencia de las otras nos permite configurar el tamaño de las pantallas en pulgadas i no en pixeles (px), por otra parte también nos permite probar con diferentes modelos de smarthphones.

Autor: francis

Estudiamos y analizamos su negocio en profundidad, definimos objetivos y planteamos la estrategia de marketing más adecuada centrándonos en conseguir cada uno de los objetivos propuestos. Solicita Presupuesto Ahora

Uso de cookies

En este sitio web utilizamos cookies propias y de terceros para mejorar nuestros servicios, para que usted tenga la mejor experiencia de usuario y analizar su visita. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.