Ya sabe cómo usar las consultas de los medios para crear un diseño receptivo, pero ¿ha intentado usarlas para otra cosa? ¿Es posible que las consultas de medios se puedan utilizar de forma nativa para mejorar su flujo de trabajo?
Continúe mientras nos separamos completamente de la tradición y secuestramos las consultas de los medios para ayudarnos a probar y modificar un diseño. ¡Nunca antes has visto consultas de medios como esta!
Más allá del diseño responsivo
Con el auge de las técnicas de diseño receptivo, las preguntas de los medios se han puesto de relieve como el salvador del diseño web moderno. Proporcionan un método increíblemente fácil y práctico para crear un sitio que funciona en una gran cantidad de tamaños de ventanas de pantalla y navegador.
"Más allá de usar consultas de medios en mi producto final para proporcionar una mejor experiencia de usuario, tal vez pueda usar consultas de medios en un entorno de prueba local para ayudar con algunas tareas básicas".Todo eso está bien, pero quería sacudir un poco las cosas. Comencé a hacerme una pregunta interesante: ¿para qué más puedo usar las consultas de los medios?
Esta pregunta lleva a algunas ideas interesantes. Aquí tenemos una tecnología que esencialmente me permite cambiar mi CSS de una manera booleana básica: si la ventana de mi navegador es de tamaño x, haz y. Esto trae inmediatamente a la mente implicaciones para mejorar mi flujo de trabajo. Más allá de usar consultas de medios en mi producto final para proporcionar una mejor experiencia de usuario, tal vez pueda usar consultas de medios en un entorno de prueba local para ayudar con algunas tareas básicas.
Corriendo con esta línea de pensamiento, ¡veamos con qué podemos llegar!
Depurando tu CSS y visualizando el DOM
El diseño CSS puede ser una bestia difícil. Ya sea que sea un desarrollador nuevo o un veterano experimentado, hay ocasiones en que la posición de algo en su vista previa en vivo no coincide con lo que buscaba en su código.
En estas circunstancias, realmente ayuda poder visualizar lo que está sucediendo en el DOM. Cuando obtenga una imagen visual de la relación padre / hijo / hermano junto con una imagen decente de lo que están haciendo sus márgenes y relleno, se sorprenderá de cuántos problemas puede detectar de inmediato la respuesta.
Chris Page publicó una solución en 2006 que es bastante útil para tal propósito. Utiliza el selector universal para aplicar contornos de colores a diferentes capas del árbol DOM para que pueda obtener una idea de cómo está estructurado el contenido:
Tomé este fragmento y lo llevé un paso más allá agregando algunos colores de fondo útiles y luego lo envolví todo en una consulta de medios:
¿Por qué harías esto?
Sé que esto parece una locura, pero en realidad es bastante útil. Cuando está utilizando el fragmento de código anterior para solucionar problemas de su CSS, puede ser un dolor comentarlo dentro y fuera para que pueda ver su diseño como debe ser. Con la consulta de medios, puede cambiar rápida y fácilmente entre las dos vistas cambiando el tamaño de la ventana de su navegador.
Aquí hay una página de muestra como normalmente aparece en todo el ancho en mi navegador:
Ahora, cuando abro un poco el lateral de la ventana del navegador, veo a mis ayudantes de diseño. Observe que a medida que nos adentramos en el DOM, el color de fondo se vuelve más oscuro.
Ahora puedo modificar mi código mientras veo los resultados en el modo de depuración, luego aparecer en mi vista normal con un rápido arrastre de la ventana.
Verlo en acción
Ahora que hemos visto el código, es hora de lanzar la demostración. Asegúrate de cambiar el tamaño de la ventana del navegador y ver cómo aparecen los ayudantes de depuración cuando obtienes alrededor de 1,100 píxeles de ancho.
Manifestación: Haga clic aquí para lanzar.
Debe ser visto en una computadora de escritorio o portátil.
Modifica tu diseño
Otra forma en que podría usar las consultas de los medios es ayudar a tomar decisiones entre diferencias sutiles en un diseño. Por ejemplo, digamos que no está del todo satisfecho con la altura de la línea de su copia del cuerpo y le gustaría probar algunas opciones. Puede configurar algunas consultas de medios diferentes, cada una con su propia altura de línea:
Ahora, cuando está viendo su diseño en el navegador, puede ver las diferentes iteraciones arrastrando y alejando la ventana de su navegador. Esto te ayudará a comparar rápidamente tus opciones de altura de línea y elegir la que más te guste.
Puedes usar esta misma técnica para los colores de fondo, las fuentes y cualquier otra cosa que puedas imaginar.
Verlo en acción
Esta vez, al cambiar el tamaño del navegador, observe cómo afecta la altura de la línea. Esto definitivamente sería una manera decente de comparar rápidamente las tres opciones.
Manifestación: Haga clic aquí para lanzar.
Debe ser visto en una computadora de escritorio o portátil.
Comparar el diseño del navegador con Photoshop Mockup
Si construyes con frecuencia sitios web a partir de composiciones de Photoshop, te será de ayuda poder comparar tu versión en vivo con la maqueta que intentas emular.
Una vez más, una consulta de medios nos proporciona una manera fácil de intercambiar entre las dos versiones. Aquí, lo que he hecho es configurar todo mi contenido con una opacidad del 40%, luego introduje mi composición original como fondo para el cuerpo. Esto crea una especie de efecto de superposición que me ayuda a detectar cualquier diferencia importante.
Verlo en acción
Para esta última demostración, el tamaño del navegador eliminará la opacidad de todo el contenido de la página y mostrará una imagen de opacidad completa de la maqueta de Photoshop para que pueda comparar los dos.
Manifestación: Haga clic aquí para lanzar.
Debe ser visto en una computadora de escritorio o portátil.
Conclusión
El propósito de este artículo es más exploratorio que educativo. La intención es iniciar una discusión acerca de si las consultas de los medios tienen o no un potencial para otros propósitos que no sean el diseño de respuesta.
Los tres de mis experimentos anteriores se inclinan hacia las pruebas de diseño locales, por lo que ni siquiera tenemos que preocuparnos por la semántica, la compatibilidad del navegador y otros problemas que suelen surgir con este tipo de conversación. En su lugar, se trata de crear trucos útiles que mejoren su propio flujo de trabajo personal.
¿Se te ocurre algo divertido o útil que hacer con las consultas de los medios? Háganos saber sus pensamientos en la sección de comentarios a continuación.