¡Deja de cambiar el tamaño de tu navegador, lo gastarás!” ¿Cuántas veces has oído eso antes? Bueno, tal vez no muy a menudo, pero si desarrollas sitios de diseño sensibles, ya sabes de lo que estoy hablando: Con cada edición de DOM o CSS, usted tira del borde del navegador hacia adelante y hacia atrás, prueba sus cambios y busca algunos defectos.
En última instancia, la mayor parte de este esfuerzo es un intento de simular el tamaño de la pantalla de diferentes dispositivos.
Si usted está involucrado en el desarrollo de negocios, puede poner a disposición un gran número de dispositivos de su empresa para que sean probados. Donde yo trabajo, tenemos un iPad, un iPod, una o dos tabletas, laptops y computadoras de escritorio. Si no tienes ese lujo, tienes que usar todo lo que tienes a mano.
En mi casa tenemos dos portátiles diferentes, dos dispositivos Android diferentes, un Kindle y un Nexus 7. Estos son los dispositivos que utilizo para probar mi desarrollo freelance, pero por supuesto esta no es una colección completa. No hay ningún dispositivo iOS en absoluto, y aunque soy un poco temprano en adoptar, no tengo la intención de comprar cada nuevo teléfono / phablet / tablet cuando salga al mercado.
Entonces, ¿qué puede hacer un desarrollador? Afortunadamente, hay un número creciente de herramientas basadas en navegadores que replican los tamaños de pantalla de una variedad de dispositivos. Las diferentes herramientas, por supuesto, tienen diferentes conjuntos de características y diferentes niveles de uso. Echemos un vistazo a algunos de ellos aquí.
Para las pruebas, utilicé el primer sitio que creé, PajamasOnYourFeet.com, basado en el modelo Brownie HTML5 que se proporciona gratuitamente a la comunidad de desarrolladores de EGrappler.
Resumen de el Contenido
- 1 ¿Soy sensible?
- 2 deviceponente (dia__6) Deviceponsive es similar a Am I Responsive? en el sentido de que muestra su sitio web de forma fácil y limpia, sin controles ni opciones disponibles para los dispositivos. Todos los dispositivos se muestran a la vez en una página larga. Tiene la interesante característica de que puede personalizar el header de la página editando un color de fondo para el área del header e incorporando su propio logotipo y luego compartiéndolo a través de la captura de pantalla. De esta manera, puede marcar el sitio de alguna manera al compartir capturas de pantalla con un cliente. Los dispositivos y tamaños de pantalla replicados en este sitio son Macbook – 1280 x 800 imagenes verticales de iPad – 768 x 1024 iPad Landscape – 1024 x 768 imagenes verticales de fuego – 600 x 1024 Iluminación paisajística – 1024 x 600 imagenes verticales de iPhone – 320 x 480 iPhone Landscape – 480 x 320 imagenes verticales de galaxia – 240 x 320 Paisaje de la galaxia – 320 x 240 Como la mayoría de estas herramientas, las barras de desplazamiento se muestran en los dispositivos más pequeños. No se mostrarían en el dispositivo real, pero es necesario hacer algunas concesiones para permitir el desplazamiento desde la vista de prueba en un dispositivo de desplazamiento sin contacto. Prueba de reacción
- 3 responsive.is
- 4 Screenqueries
- 5 Mosca de la pantalla
- 6 Conclusión
¿Soy sensible?
Am I Responsive? es un resumen simple e instantáneo de su sitio web, ya que aparece en cuatro dispositivos diferentes. Los cuatro son iOS, y el desarrollador explica que la atención se centra en el sitio. No hay controles ni opciones, sólo una presentación muy simple y elegante.
Los tamaños de la vista son
- Escritorio – 1600 x 992px reducido a escala (0.3181)
- Ordenador portátil – 1280 x 802px reducido a escala (0,277)
- Tableta – 768 x 1024px reducida a escala (0.219)
- Móvil – 320 x 480px reducido a escala (0.219)
Cita del desarrollador:Esto no es una herramienta de pruebas, es muy importante que lo hagas en dispositivos reales. En cambio, esta es una herramienta para tomar capturas de pantalla rápidas (para mí) y permitir visualmente que la genteentienda” lo que usted quiere decir en las conversaciones con los clientes.
Dos características muy agradables son la capacidad de arrastrar losdispositivos” en la pantalla a donde quieras, y la capacidad de incrustar tu página de prueba en un enlace que puedes compartir. En Firefox, al menos con la estructura de la página de prueba, la barra lateral no se muestra en el iPhone, sino en IE y Chrome.