El diseño web sensible es uno de los temas más candentes entre los diseñadores y desarrolladores en este momento. Si no está completamente seguro de qué se trata, lo guiaremos por lo que es, cómo funciona y cómo las consultas de medios CSS son algo que necesita para comenzar a incorporar en sus propios diseños.
Para colmo, terminaremos con veinte diseños realmente impresionantes que utilizan consultas de los medios para presentar experiencias específicamente dirigidas a diferentes visitantes.
#
¿Qué son las consultas de medios?
CSS3 ha generado una tonelada de efectos visuales de fantasía como sombras y animaciones, pero ¿qué hay de las mejoras prácticas? ¿Hay algo sobre CSS3 que realmente mejore la forma en que puede crear sitios web desde un punto de vista de usabilidad?
¿La respuesta es un sí rotundo? y se debe en gran parte a la inclusión de consultas de medios. Las consultas de los medios son increíblemente útiles porque resuelven un gran problema que surgió repentinamente en el diseño web: la necesidad de diseñar para tamaños de pantalla muy diferentes.
Los tamaños de las pantallas de los usuarios siempre han diferido, pero en su mayor parte esta diferencia se limitó a unos pocos centímetros y podría apostar a una gran mayoría de su audiencia, ajustándose a parámetros que eran bastante fáciles de diseñar. En estos días, aunque tiene algunos usuarios en una pantalla de cine Apple de 27 "y otros en un teléfono inteligente de 3.5".
Esa es una gran diferencia y hay muchas paradas en el camino. El número cada vez mayor de dispositivos compatibles con la Web hace que sea cada vez más difícil para los diseñadores presentar una solución estática que satisfaga las necesidades de todos.
Esta necesidad ha dado origen a la idea de un diseño web sensible, que va mucho más allá del ancho de la página y realmente cambia dramáticamente el diseño de una página a medida que cambia el tamaño de la ventana del navegador o el tamaño de la pantalla del dispositivo. Las consultas de medios son una de las herramientas más poderosas para cumplir con este objetivo porque le permiten al diseñador establecer CSS especial de acuerdo con ciertas reglas preestablecidas.
Owltastic: un excelente ejemplo de diseño web sensible
La información anterior es un poco abstracta, así que veamos cómo funciona esto en el mundo real observando un ejemplo del talentoso diseñador y desarrollador Meagan Fisher. Así es como se ve su sitio en la pantalla del navegador de mi MacBook de 13 "a pantalla completa.
Ahora, si ajusto el tamaño de la ventana, muchas cosas comienzan a suceder. Las columnas ajustan su ancho, el diseño cambia para ser más vertical y los elementos no esenciales desaparecen por completo. Aquí hay una captura de pantalla con dos anchos de página más, verifique cuánto se adapta el diseño a diferentes situaciones.
Observe que comenzamos con un diseño de tres columnas, que luego se transformó en un diseño de dos columnas y finalmente aterrizó en un diseño de columna única con la ventana de mi navegador tan pequeña como sería. Esto es más que solo un diseñador que muestra a otros, esto representa un intento realmente impresionante de hacer que el sitio no solo sea utilizable, sino que esté optimizado específicamente para la amplia gama de dispositivos que probablemente lo vean.
Cómo funciona
Esto puede parecer que va a ser un montón de trabajo adicional, y estaría mintiendo si dijera que es un proceso indoloro, pero la buena noticia es que las consultas de CSS y los medios de comunicación hacen mucho del trabajo pesado para usted. Saltemos un poco en el código de Owltastic para ver cómo funciona todo esto.
Para empezar, vas a ver un montón de uso experto de flotadores y porcentajes utilizados para el tamaño. Observe que en el fragmento de código de abajo, Meagan utilizó porcentajes tanto para el ancho del elemento como para el margen. También es meticulosa en decirte de dónde provienen estos porcentajes en forma de un comentario con algunas matemáticas rápidas.
Esto definitivamente hace que el diseño sea un poco más complicado, pero establece una buena base para los anchos de página flexibles incluso antes de que llegue a las consultas de los medios. Sin embargo, las propiedades que se muestran arriba son, en su mayor parte, lo que ve que se manipula aún más dentro de las consultas de medios.
Aquí podemos ver que Meagan se ha dirigido a un ancho de pantalla máximo de 800 px y luego definió una serie de estilos que se aplican directamente a los dispositivos que cumplen con esa especificación. Desde aquí, las flotaciones, los márgenes, el relleno, la visualización e incluso las imágenes se ajustan para lograr un diseño óptimo en ese tamaño.
Se configuran un total de cinco consultas de medios diferentes para diferentes circunstancias: ancho máximo: 960px, 800px, 640px, 540px y 480px. Cada uno de estos es bastante minucioso al describir comportamientos específicos para ese tamaño de pantalla. Aquí está la sección de ancho máximo: 480px.
Un truco interesante aquí al que debe prestar especial atención es el uso de imágenes fluidas. Al establecer el ancho de una imagen al 100%, se ajustará al ancho de su contenedor y se redimensionará a medida que cambie la ventana del navegador. Ethan Marcotte explica esta técnica en profundidad en su sitio Unstoppable Robot Ninja.Asegúrese de cambiar el tamaño de la ventana del navegador en su sitio y ver cómo responden las imágenes del encabezado.
Más ejemplos en vivo
La mejor manera de estudiar el diseño web sensible y las consultas de los medios es vislumbrarlas en acción. Aquí hay una breve lista que contiene algunos sitios que me parecieron impresionantes. Con cada sitio, no solo mire el diseño, pruébelo cambiando el tamaño de la ventana de su navegador. Además, profundice en el CSS para ver cómo funcionan los sitios y piense cómo puede implementar estas técnicas en sus propios diseños.
Una lista aparte: Ejemplo de artículo
Trent walton
Piensa la vitamina
Deren K.
Hacer conferencias
About.com
Festival de Sasquatch
hora terrestre
Feed BMX
Remo - Powerstroke Pro
Los caballeros modernos
Naomi atkinson
Converge SE
Sleepstreet
Alsacreaciones
Un diseño diferente
Yiibu
Club de Sweet Hat
Laufbild Werkstatt
Lapso
Dmig 5
Conclusión
En resumen, la gran cantidad de dispositivos que acceden a la web en estos días hace que sea necesario crear diseños de sitios web que sean adaptables a una gran cantidad de tamaños de pantalla diferentes y que las consultas de medios CSS sean una forma fácil de hacer exactamente eso.
Para ser honesto, cuando escuché por primera vez acerca de las preguntas de los medios de comunicación, puse los ojos en blanco, pensando que agregaría simplemente otra capa de trabajo a todos los pasos que ya tenemos que seguir para hacer que nuestros diseños pasen como utilizables. Sin embargo, cuanto más aprendo y experimento con ellos, más estoy convencido de que así es como se debe abordar el diseño web en lo que Steve Jobs llama "una era post-PC".