Herramientas Responsive Design

junio 19, 2013 | Html5 & Css3, Recursos

Cuando empezamos un proyecto con responsive web design siempre necesitaremos re-dimensionar nuestra pantalla a los distintos tamaños de dispositivos ya sea: tablet, ipad, iphone, smartphone o desktop.
es cierto que hay muchas herramientas en Internet que nos ayudan e incluso hay tantas que nos alborotan y no sabemos cual es el mejor, es por eso que quise escribir un articulo con algunas herramientas que a mi parecer son las mas buenas para comprobar nuestro responsive design.

responsinator

Este sitio te presenta pre visualizaciones de todos los dispositivos, solo basta con poner la Url a consultar y responsinator simulara los dispositivos de una manera casi real, a mi parecer es muy bueno ya que no hay necesidad de estar modificando dimensiones o eligiendo tamaños, te lo presenta todos a la misma ves.

mattkersley

Este sitio te presenta a los principales tamaños de dispositivos y todos a la misma ves, al igual que responsinator, solo basta con colocar la Url en consulta y listo.

herramientas-online

Herramientas online cuenta con una seccion dedicada a las pruebas de tamaño responsivo, presenta de una manera muy cercana como se visualizara nuestra sitio responsivo en los diferentes dispositivos, nos ofrece muchas resoluciones que podremos elegir para comprobar nuestro responsive design.

Screenqueri

una de las cosas bonitas de esta herramienta online es que nos presenta todos los dispositivos de una manera detallada por ejemplo: el nombre y marca del fabricante de los diferente dispositivos como apple, blackberry, samsung, LG, HTC entre otros.

Vista de Diseño Adaptable de FireFox Mozilla

Una de la herramientas que siempre esta a la mano es herramienta que tiene firefox mozilla  para poder re-dimensionar su navegador y comprobar nuestra web responsiva, para acceder a dicha herramienta solo hay que presionar: (Ctrl + Mayús + M) también podemos acceder a ella en el menú principal que se encuentra en la parte superior izquierda de color anaranjado: Menu > Desarrollador Web > Vista de Diseño Adaptable.

Overrides Google Chrome

el navegador de google no se queda atras, también presenta una herramienta para poder comprobar nuestro diseño adaptable, este nos presenta una lista de marcas y fabricantes de dispositivos mas destacados en el mercado como: ipad, dispositivos adroid, blackberry, etc.
1.) abren la consola (Ctrl+Mayús+I)
2.) Haz clic en el icono de engranaje en la esquina inferior derecha.
3.) Entra a las pestaña Orrides
4.) Haga clic en el icono de engranaje en la esquina inferior derecha.
5.) Activa la casilla de User Agent y listo!

Estas fueron algunas herramientas que personalmente uso y me parecen muy buenas a la hora de comprobar el responsive design de los proyectos que realizo, espero les sirva de mucha ayuda, tanto como a mi.

Relacionados