Herramientas de precisión para pruebas con responsive design
Me encanta dedicarme a buscar diferentes herramientas que me ayuden a verificar como quedan los diseños de las paginas web en dispositivos mobiles, lo difícil es encontrar una donde puedas emular los diferentes viewport, pero mas difícil es que sean gratis 🙂
Screenqueri esta en fase beta pero me sorprende por la ayuda en la precisión que te pueda brindar.
Cuenta con una lista predefinida de diferentes dispositivos, varios viewport a tu disposición y tab rápidos para cambiar de resolución.
Registrate gratis y comienza a trabajar como un profesional de la web
Sitio: screenqueri.es
Herramienta para probas paginas adaptativas
Otro sitio web que me agrada por el efecto visual y tener condensado las funciones para visualizar tu sitio web es responsive.is
Coloca en la barra de texto tu sitio web y presiona Go!
MediaQueri.es Listado y Galeria sitios Responsive
Si no haz visitado esta pagina te recomiendo que la visites, MediaQueri.es es una lista grafica de mucho sitios web que se adaptaron al mundo Responsive.
BrowserStack Prueba tus sitios web en todas las plataformas
Hay clientes o proyectos que con hacerlos funcionar en Firefox y Chrome nos hacen ser felices, pero hay otras que quieren la perfección en Android, iOS, Windows Phone y la PC mas vieja de la oficina asi no lo usen, así que nos toca conseguir alguien que los tenga a todos.
BrowserStack te provee de un acceso remoto a los simuladores de todos los dispositivos que puedan existir y sus diferentes versiones de sistemas operativos donde podrás hacer pruebas de calidad de tu producto desarrollado.
Hay tantas funciones y características excelentes en esta pagina que te aseguro desearas decirle a tu jefe que pague la suscripción para disfrutar de capturas de pantallas, análisis de tus diseños adaptativos y visualización en tiempo real de tus sitio web.
MQTest.io Cual es la resolución de una pantalla
Cuando se desarrolla para PC no te preocupas por la resolución para la que diseñas pero cuando vas al diseño para mobiles se convierte en una búsqueda por nuestro amigo google de tablas y números que te hace invertir un tiempo extra a la hora de codear.
Pero si tienes algún dispositivo en físico en tu mano y te interesa saberlo ya rápido. Te lo tengo!
MQtest.io téndras los datos de ancho y alto, resolución, orientación entre otras cosas básicas para que no detengas tu producción
Fitvids Videos Responsive
Videos y otros objetos de comunicación son diferentes de las imágenes en que no mantienen relaciones de aspecto al cambiar de tamaño. Además nos toca hacer malabares y aplicar una gran variedad de codecs, la cuestión de escala establece un gran reto para los que sirve de vídeo a una serie de dispositivos de web-enable.
Afortunadamente, hay maneras de crear relaciones intrínsecas de vídeos (alistapart.com).
El Diseñador Chris Coyier y su equipo crearon FitVids.js (http://fitvidsjs.com/), un plug-in que hace el trabajo pesado para ti con el fin de servir a los vídeos que mantienen la relación de aspecto correcta al cambiar de tamaño.
Probar tus diseños responsive
Es una sitio sencillo, pero muy practico y rápido para pruebas en medio de tu desarrollo, aunque después de cierto tiempo probándolo no es 100% efectivo, pero igual sigue siendo uno de mis favoritos para mostrar los resultados a mis clientes.
Para utilizarlo solo debes ir a su sitio web (http://responsinator.com/) ingresar el enlace tu sitio web en la barra de búsqueda y presionas GO!
Listo te asombraras ver como luce tu sitio web en diferentes resoluciones de pantallas.
Solo queda que entres en y lo pruebes responsinator.com
IcoMoon Iconos para pantallas Retinas
En estos días todo el mundo está aparentemente volviendose loco sobre las pantallas Retina. Retina y otras pantallas de alta resolución están convirtiendose rápidamente en la norma. Una de las soluciones más eficaces para crear iconos sin importar de la resolución es crear una fuente icono personalizado e incrustación con CSS @font-face
Icomoon (http://iconmoon.io) es una herramienta web que facilita el proceso de creación e implementación de fuentes icono fáciles. Te permite elegir entre una biblioteca de iconos y también te permite cargar su cuenta otros nuevos, puede generar su fuente icono personalizado y descargar un paquete que incluye las fuentes y CSS correspondiente.
Incluso hay un CDN fuente que puede servir hasta sus fuentes de iconos personalizados. IcoMoon es una herramienta de gran ayuda en nuestra lucha por crear experiencias independientes de la resolución.
Mas sobre el tema: http://icomoon.io/
Jetstrap
Ha habido un cambio masivo en torno a conseguir el proceso de diseño para sitios web. Los wireframes estáticos y maquetaciones no muestran con precisión cómo el diseño se verá y funcionará en la cantidad de diferentes dispositivos que se utilizan para navegar en la web.
Aquí es donde Jetstrap (http://jetstrap.com) entra en juego es una herramienta visual de interfaz de la capacidad de los diseñadores para reunir rápidamente prototipos rápidos en el navegador de arrastrar y soltar componentes de interfaz de usuario en un lienzo. No requiere incondicionales niveles de cualificación de desarrollo frontend para empezar. También proporciona el nivel adecuado de abstracción para ser accesible a los tipos que no sean desarrolladores, pero es lo suficientemente poderosa de demostrar cómo un diseño realmente funciona en su entorno final.
Lo que me hace poner triste de esta genial herramientas, es no tener un plan gratis para jugar con ella y darles un detalle mas completo pero si tienes la posibilidad de probarla cuéntame que tal te fue.
Responsive Wireframes
Una de las dificultades de la construcción de sitios web construidos con Responsive es saber como se deben mostrar y cómo funcionaria. James Mellers ha creado esta herramienta experimental para mostrar cómo el wireframing responde a diseños complejos.
Fuente: http://www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop