Krypton Solid

Cómo probar diseños adaptables de forma gratuita

Cómo probar diseños adaptables de forma gratuita

«¡Deja de cambiar el tamaño de ese navegador, lo vas a gastar!» ¿Cuántas veces has escuchado eso? Bueno, tal vez no tantas veces, pero si desarrolla sitios web de diseño receptivo, ya sabe de lo que estoy hablando: con cada edición de DOM o CSS, arrastra el borde del navegador hacia adelante y hacia atrás, probando sus cambios y buscando nada roto.

En última instancia, la mayor parte de este esfuerzo es un intento de emular el tamaño de pantalla de diferentes dispositivos.

Si está realizando un desarrollo corporativo, es posible que la empresa le proporcione una variedad de dispositivos para probarlos. Donde trabajo tenemos un iPad, iPod, una o dos tabletas, laptops y computadoras de escritorio. Si no tiene ese lujo, debe usar lo que tenga a mano.

En mi casa tenemos dos laptops diferentes, dos dispositivos Android diferentes, un Kindle y un Nexus 7. Estos son los dispositivos que utilizo para probar mi desarrollo autónomo, pero claramente esta no es una colección exhaustiva. No tengo ningún dispositivo iOS, y aunque soy un poco pionero en adoptarlo, no planeo comprar todos los teléfonos / phablet / tabletas nuevos a medida que salgan al mercado.

Entonces, ¿qué debe hacer un desarrollador? Afortunadamente, existe un número creciente de herramientas basadas en navegador disponibles que emulan los tamaños de pantalla de una amplia variedad de dispositivos. Las diferentes herramientas vienen con diferentes conjuntos de características y diferentes niveles de utilidad, por supuesto. Veremos varios de ellos aquí.

Para propósitos de prueba, utilicé el primer sitio verdaderamente receptivo que hice, PyjamasOnYourFeet.com. Este sitio se basa en el Plantilla HTML5 de Brownie, muy amablemente proporcionado a la comunidad de desarrollo de forma gratuita en EGrappler.

¿Soy receptivo?

¿Soy receptivo? es una vista instantánea y absolutamente simple de su sitio, ya que se mostraría en cuatro dispositivos diferentes. Los cuatro son iOS y el desarrollador explica que se centran en el sitio. No ofrece controles ni opciones, solo una presentación muy simple y elegante.

Los tamaños de las ventanas gráficas son

  • Escritorio: 1600 x 992px reducido a escala (0.3181)
  • Laptop: 1280 x 802px reducido a escala (0.277)
  • Tableta: 768 x 1024 px reducido a escala (0,219)
  • Móvil: 320 x 480 px reducido a escala (0,219)

Citando al desarrollador, “Esta no es una herramienta de prueba, es realmente importante que lo haga en dispositivos reales. En cambio, esta es una herramienta para capturas de pantalla rápidas (para mí) y para permitir que las personas ‘entiendan’ visualmente lo que usted quiere decir en las reuniones con los clientes «.

Dos características muy interesantes son la capacidad de arrastrar los «dispositivos» a donde desee en la pantalla y la capacidad de incrustar su sitio de prueba en un enlace que puede compartir. En Firefox, al menos con la estructura del sitio de prueba, la barra de desplazamiento lateral del iPhone no se muestra, pero sí en IE y Chrome.

dispositivo

dispositivo es similar a ¿Soy receptivo? ya que muestra su sitio de manera simple y limpia, sin controles ni opciones disponibles en lo que respecta a los dispositivos. Todos los dispositivos se muestran a la vez en una página larga. Tiene la característica interesante de que puede personalizar el encabezado del sitio editando un color de fondo del encabezado e incrustando su propio logotipo, y luego compartirlo mediante una captura de pantalla. Esto le permite marcar el sitio, de alguna manera, cuando comparte capturas de pantalla con un cliente.

Los dispositivos y tamaños de pantalla emulados en este sitio son

  • Macbook: 1280 x 800
  • Retrato de iPad – 768 x 1024
  • iPad horizontal: 1024 x 768
  • Retrato de Kindle – 600 x 1024
  • Kindle apaisado – 1024 x 600
  • Retrato de iPhone – 320 x 480
  • iPhone horizontal – 480 x 320
  • Retrato de galaxia – 240 x 320
  • Paisaje de galaxias: 320 x 240

Como ocurre con la mayoría de estas herramientas, las barras de desplazamiento se muestran en los dispositivos más pequeños. En el dispositivo real no se mostrarían, pero para permitir el desplazamiento de la vista de prueba en un dispositivo de desplazamiento no táctil, se deben hacer algunas concesiones.

prueba de respuesta

Como dispositivo patrocinado, prueba de respuesta muestra su sitio en una variedad de dispositivos, pero en lugar de mostrarlos todos en la página a la vez, usted elige qué dispositivo ver en un menú simple en la parte superior de la página. Al ver este sitio en una computadora portátil de tamaño mediano, encontré que alejar la página funciona bien, lo que le permite ver todo el sitio de prueba dentro del bisel del dispositivo de prueba.

Aquí se ofrecen trece vistas diferentes, que van desde un gran monitor de escritorio hasta lo que ellos llaman ‘Android de mierda’ (para ser justos, también tienen una opción llamada ‘Android más agradable’).

Una vez más, Firefox es el navegador que tropieza un poco en este sitio. Observe que en la captura de pantalla, entre el encabezado verde y el área de contenido de fondo blanco, solo hay una franja azul donde se debe mostrar un control deslizante de imagen.

responsive.is

Muy similar a las dos entradas anteriores, lo único que establece responsive.is Aparte de ellos, está la animación fluida de la pantalla de un dispositivo a la siguiente, y una superposición semitransparente que muestra el espacio real del sitio que queda fuera de la ventana gráfica.

Las únicas opciones de dispositivo disponibles aquí son auto, que llena la ventana de su navegador, mostrando el sitio como lo vería si realmente estuviera allí, Escritorio; Paisaje de la tableta; Retrato de tableta; Paisaje de SmartPhone; y SmartPhone Portrait, no se dan las dimensiones en píxeles.

Screenqueries

Una vez más, se establecen algunas características y opciones diferentes Screenqueries ligeramente aparte de los demás. Aquí se proporcionan 14 teléfonos y 12 tabletas, con un control separado para cambiar entre el modo vertical y horizontal. Se muestran en una cuadrícula de píxeles numerada, con las dimensiones mostradas en la parte inferior derecha de la pantalla de prueba. Los bordes de la pantalla se pueden arrastrar para que pueda probar tamaños personalizados. Pase el mouse o haga clic en el área de prueba y el fondo cambia a gris, lo que le brinda una vista menos desordenada.

Una característica interesante de este sitio es que para varios de los dispositivos hay una opción «Trueview» que muestra su sitio envuelto en el navegador Chrome del dispositivo especificado.

Desafortunadamente, y ya me estoy acostumbrando, Firefox no muestra el control deslizante de imagen del sitio de prueba. No me llames, Firefox es en realidad mi navegador preferido, pero afortunadamente tenemos opciones.

Screenfly

Screenfly realmente aumenta el cociente de usabilidad. Ofrece nueve dispositivos más grandes que una tableta, desde una computadora portátil de 10 ″ hasta una computadora de escritorio de 24 ″, cinco tabletas, nueve teléfonos inteligentes, tres tamaños de televisión y una opción de tamaño de pantalla personalizado. Cualquier opción que elija se puede girar a vertical u horizontal con un control de menú independiente. Puede optar por permitir el desplazamiento o no, y puede generar un enlace para compartir con el clic de un botón.

El sitio es útil de forma proactiva con la forma en que presenta la información sobre las dimensiones de los píxeles. Cada dispositivo en los menús se muestra con el nombre y las dimensiones en píxeles, las dimensiones de la ventana de su navegador real se muestran cerca de la parte superior derecha de la ventana, y las dimensiones de la opción seleccionada se muestran en un pie de página debajo de la pantalla, junto con la URL de el sitio que se está probando. Esa pequeña característica agrega un toque agradable para documentar capturas de pantalla y compartir la información con los clientes.

Todo lo mencionado anteriormente haría de esta una herramienta perfectamente buena, pero los desarrolladores de Screenfly consideraron oportuno darle un paso más y proporcionar una función de servidor proxy. Citando su sitio, “Screenfly puede usar un servidor proxy para imitar dispositivos mientras visualiza su sitio web. El servidor proxy imita la cadena de agente de usuario de los dispositivos que selecciona, pero no el comportamiento de esos dispositivos «.

Todas las demás herramientas cubiertas aquí tratan únicamente con CSS. Screenfly es el único que permite realizar pruebas basadas en la cadena del agente.

Al probar con el único sitio que hice que proporciona una versión móvil basada en la cadena del agente, los resultados para el sitio móvil fueron muy buenos. Las cosas se mostraron exactamente como esperaba y las funciones se pudieron probar. Es cierto que las pruebas de cadenas de agentes son de la vieja escuela, pero este sitio se creó «en el pasado», y la función de servidor proxy es una adición útil a este sitio.

Conclusión

Por lo tanto, vemos que hay bastantes recursos para probar sus sitios receptivos. Diferenciados por características únicas, los sitios que podría usar se basarán en sus propias preferencias y requisitos individuales, y lo animo a explorar y experimentar con ellos. Cuantas más herramientas realmente útiles tengamos como desarrolladores web, mejor.

¿Utiliza alguna de estas herramientas? ¿Cómo prueba sus diseños receptivos? Háznoslo saber en los comentarios.

Deja un comentario