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.
Detector Libreria para saber información sobre las características del navegador
Diferenciar las características y perfiles de dispositivos puede ser una tarea difícil. Ademas bibliotecas especificas por dispositivos son difíciles de manejar, el identificar las características del navegador del lado del cliente y únicamente basándose en que pueden limitar la flexibilidad al ofrecer funcionalidad a una amplia gama de los agentes de usuario mas complicado de lo que piensas.
Eso es lo que llevó desarrollador David Olsen para crear Detector (http://detector.dmolsen.com/), un navegador PHP y JavaScript basada en la biblioteca y la función de detección. Una combinación de Modernizr (http://modernizr.com) y detección de agente de usuario para determinar las clases de dispositivos, detector puede adaptarse a los nuevos dispositivos y navegadores por sí sola sin la necesidad de instalar una base de datos central de información del navegador.
IE-Amigable mobile-first CSS
Todos sabemos lo increíble que son los media queries pero desafortunadamente para versiones viejas de Internet explores menor a 9 no tienen soporte. Algo que nos obliga a pensar en abandonar mobile-first.
En los siguientes enlaces podrás aprender un poco mas como no darte por vencido.
Jake Archibal: http://jakearchibald.github.io/sass-ie/
Nicolas Gallagher: http://nicolasgallagher.com/mobile-first-css-sass-and-ie/
Ellos demuestran que con Sass (http://sass-lang.com)puedes realizar estilos simultáneos que puedan ser soportados apropiadamente por los navegadores viejos de IE.
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/