El diseño receptivo ha generado una nueva lista de desafíos para los diseñadores web que han decidido dar el paso y dejar atrás el diseño estático. Crear un diseño que funcione bien en no uno, sino en varios, o incluso en todos los anchos posibles requiere paciencia, creatividad y, por supuesto, muchas pruebas.
Nada reemplaza la verificación de su diseño en los dispositivos reales a los que se dirige, pero a medida que construye, es bueno poder echar un vistazo rápido al diseño en varios anchos directamente en su computadora. Puede cambiar el tamaño de la ventana de su navegador manualmente, pero esto se vuelve ridículamente tedioso si está buscando dimensiones de píxeles precisos. Afortunadamente, varios desarrolladores talentosos ya han creado algunas herramientas excelentes para ayudarlo en este proceso. Únase a nosotros hoy mientras echamos un vistazo a tres de ellos.
Espera, ¿por qué necesito estos?
Si no está familiarizado con el concepto de diseño web adaptable, entonces podría estar confundido acerca de por qué las siguientes utilidades son útiles. Básicamente, el objetivo del diseño responsivo es crear un sitio que se adapte y evolucione a diferentes tamaños de vista. Entonces, en lugar de crear un sitio que funcione bien en equipos de escritorio, otro para dispositivos móviles y un tercero para tabletas, se crea un diseño único que responde bien a todos esos escenarios.
Para lograr esto, por supuesto, debe poder ver su diseño en varios anchos diferentes. Personalmente, recomiendo diseñar para cada ancho posible en lugar de simplemente apuntar a anchos de dispositivos populares, pero definitivamente es una buena idea intentar tener una idea del diseño que verán los usuarios de dispositivos particulares. Las siguientes herramientas te ayudarán a simplificar ese esfuerzo.
El responsable
El Responsinator es probablemente la forma más fácil de obtener una vista rápida de su diseño en los anchos de dispositivos populares. Es rápido, simple y la experiencia ha sido diseñada para que cualquier persona pueda saber de inmediato lo que está sucediendo. Este es un concepto importante que aún no hemos tocado. A veces necesita mostrar su diseño sensible a su cliente, y herramientas como esta simplifican dramáticamente ese proceso.
La razón por la que este sitio comunica tan bien el concepto de diseño responsivo es que utiliza siluetas de dispositivos populares, dentro de los cuales se mostrará el sitio de su elección.
Para comenzar, todo lo que tiene que hacer es escribir la URL de un sitio web que le gustaría probar. No tiene que ser un sitio de su propiedad, por lo que también es una excelente manera de investigar lo que otros diseñadores han hecho. Para este ejemplo, tiré en el sitio web de United Pixel Workers.
Desde aquí, simplemente desplácese hacia abajo en la página y vea las vistas previas del diseño en todos los dispositivos disponibles. Estas vistas previas son en vivo y se pueden desplazar, hacer clic, etc. El rango de vistas previas aquí es bastante impresionante, no solo han incluido dispositivos principales como iPads, sino que también se han lanzado en anchos comunes utilizados en múltiples dispositivos como el? ¿Androide? Ejemplo a continuación.
El Responsinator es la única herramienta como esta que he visto que en realidad toma en cuenta la IU del software. Por ejemplo, en lugar de mostrar su sitio a 1024 x 768 para un iPad horizontal, en realidad reservan los 125 píxeles más o menos para el navegador del navegador Safari en dispositivos móviles.
Antes de pasar a la siguiente herramienta, aquí hay un rápido resumen de las ventajas y desventajas de esta aplicación.
Responsables Pros
- Casi sin esfuerzo, solo tienes que pegar en un enlace y desplazarte
- Un montón de diferentes vistas previas de dispositivos
- Bonita representación visual que los clientes entenderán.
- Las dimensiones de la interfaz de usuario del software se explican claramente
Responsable contras
- Tiene que cargar varias instancias de cada sitio.
- No hay manera de explorar tamaños que no están listados
Responsive.is
La siguiente herramienta en la lista es Responsive.is. El concepto aquí es el mismo que antes, el sitio proporciona una manera rápida de ver su diseño en múltiples anchos diferentes. Sin embargo, el enfoque es drásticamente diferente.
Para empezar, no hay siluetas de dispositivos. Hay una pequeña barra de herramientas en la parte superior de la pantalla, pero el resto está reservado para una vista previa del sitio que cambia según el dispositivo seleccionado. Esto es un poco más conveniente ya que elimina el desplazamiento aparentemente interminable, así como la carga de múltiples vistas previas, pero parte de la evidencia de lo que está sucediendo se pierde en el proceso. La interfaz mínima es realmente agradable, algo que aprecié después de pasar mucho tiempo con las voluminosas siluetas de The Responsinator.
Responsive.is en realidad viene con un menú que contiene sitios de respuesta integrados para probar el manejo, de modo que pueda tener una idea de cómo funciona el servicio (usé Food Sense). Si desea probar otro sitio, simplemente ingréselo en el cuadro.
La barra de herramientas en la parte superior le ofrece seis opciones diferentes para el tamaño de las vistas, cada una de las cuales está representada por un pequeño icono: Escritorio, tableta, vertical de tableta, horizontal de smartphone, vertical de smartphone y automático.
Como es de esperar, al hacer clic en un dispositivo se obtiene una vista previa del sitio en ese ancho. Me gusta mucho cómo se ha manejado la vista previa aquí. El sitio completo se muestra en el ancho especificado, pero todo lo que se encuentre fuera de la parte visible de la ventana gráfica se oscurece.
Mi mayor preocupación aquí es que los anchos reales del dispositivo no están realmente especificados. En lugar de las dimensiones en píxeles, solo te quedan íconos genéricos. Dado que este es el caso, este sitio es definitivamente más para pruebas generalizadas que para circunstancias específicas (aunque usted podría medir los distintos tamaños usted mismo).
Responsive.is Pros
- Limpia, interfaz mínima que se centra en el contenido.
- Solo se carga una instancia del sitio de prueba
- No es necesario desplazarse, simplemente haga clic en un icono para cambiar la ventana gráfica
- Opciones de prueba integradas
Responsive.is Contras
- Estás limitado a seis vistas genéricas
- No se enumeran dimensiones específicas
- Puede ser más difícil para los clientes descubrir que el Responsinator
Responsivepx
Hasta ahora, todas las herramientas que hemos visto te obligan a tener dimensiones predeterminadas para las pruebas. Si no te gustan los tamaños de prueba o simplemente quieres agregar otro, ¡duro! No hay manera de hacerlo. Entonces, ¿a dónde acudir si desea dictar con precisión las dimensiones de la prueba? La respuesta es un sitio llamado Responsivepx.
Aquí tenemos una simple pantalla de bienvenida con algunas instrucciones y un enlace a un video tutorial. Para comenzar, simplemente ingrese una URL en el cuadro en la parte superior derecha. Responsivepx es asombroso, ya que le permite incluso probar sitios locales que residen en su computadora y se están trabajando actualmente. Usaremos el sitio de Bryan Connor como ejemplo para esta prueba.
Una vez que haya ingresado un sitio, es hora de modificar las dimensiones a través de las herramientas en la parte superior de la pantalla. Como se puede ver en la foto de abajo, esta vez no hay ningún tamaño preestablecido. Usted controla completamente las dimensiones de la vista previa ya sea ingresando un número o usando los controles deslizantes.
A medida que cambia la configuración, la vista previa del sitio se actualiza para reflejar esos cambios. Se muestra en una cuadrícula de transparencia similar a la de Photoshop.
En mi opinión, Responsivepx es, con mucho, la opción más útil para los desarrolladores que trabajan en su propio sitio de respuesta. Hay un número de razones para esto. Primero, se creó específicamente para ayudarlo a encontrar puntos de corte basados en su diseño único. Puede cargar un diseño, mover el ancho a un punto donde el diseño ya no funciona y luego tomar los valores de píxel específicos listados para insertar en su consulta de medios. Una vez que haya explicado los cambios, guarde su archivo, actualice la vista previa y estará listo para atacar su próximo punto de interrupción. Una vez más, el hecho de que funcione con archivos locales realmente es útil aquí.
Además, a medida que ingresa casos de prueba y cambia la configuración, la dirección en la barra de URL de su navegador se actualizará para reflejar esos cambios, lo que hace que sea muy fácil compartir un caso de prueba específico con sus colegas.
Dado que esta aplicación es una excelente manera de decidir los puntos de ruptura potenciales, me encantaría ver un botón incluido que genere una consulta de medios basada en el tamaño actual de la ventana gráfica. Esto realmente haría de Responsivepx una herramienta asesina para los diseñadores receptivos.
Responsivepx Pros
- Tú decides las dimensiones de la vista previa
- Perfecto para encontrar puntos de interrupción.
- Pruebas remotas y locales
- Fácil de compartir casos de prueba específicos
Responsivepx Contras
- Principalmente para desarrolladores, use una opción diferente para los clientes.
- La barra de herramientas de la interfaz de usuario podría tener algún trabajo
Conclusión
Ahora tienes tres nuevas armas en tu arsenal de diseño web sensible. Todos estos sitios tienen sus fortalezas particulares y vale la pena marcarlos para más adelante. El Responsinator le permite simular rápida y fácilmente una gran cantidad de dispositivos diferentes y puede ser excelente para ayudar a los clientes a concentrarse en lo que está tratando de lograr. Responsive.is es una manera decente de tener una idea general de cómo se realiza un diseño sensible en diferentes géneros de dispositivos. No es lo mejor para propósitos de prueba específicos, pero puede ser útil para una prueba rápida. Finalmente, Responsivepx es la herramienta definitiva para encontrar puntos de interrupción ideales para su diseño. Usted toma el control sobre las dimensiones exactas de los píxeles y puede probar los archivos locales en los que está trabajando actualmente.
¿Has probado alguna de las herramientas anteriores? ¿Qué piensas de ellos? ¿Cómo podrían mejorarse? También asegúrese de informarnos sobre cualquier otra herramienta similar que haya encontrado.
Imágenes proporcionadas por: Bigstock.