Cree un sitio receptivo en una semana: consultas de medios (parte 4)

Contenido

• 01. Adición de consultas de medios
• 02. Anatomía de una consulta de medios
• 03. Una cosa más ...
• 04. Elegir puntos de interrupción
• 05. Ajustando nuestras miniaturas
• 06. No solo ancho

• Conocimientos necesarios: CSS y HTML intermedios
• Requiere: Editor de texto, navegador moderno, software de gráficos
• Tiempo del proyecto: 1 hora (5 horas en total)
• Archivo de soporte

Una parte relativamente nueva de la especificación CSS, las consultas de medios son sin duda el aspecto más emocionante del diseño web receptivo y un área propicia para una mayor experimentación.

Habiendo aceptado la necesidad de diseños adaptables, algunos han visto las consultas de medios como un medio para adaptar los diseños adaptables a los sitios de ancho fijo existentes. Entre los que han adoptado diseños receptivos, muchos lo han hecho desde la perspectiva del escritorio, ocultando el contenido y las funciones a medida que la ventana gráfica se estrecha.

A lo largo de este tutorial, hemos adoptado un enfoque alternativo, el móvil primero. Ahora, cuando buscamos incluir consultas de medios, podemos pensar en agregando características a medida que aumenta el espacio en pantalla, con la certeza de que el marcado y el diseño que sustentan nuestro sitio proporcionan una referencia respetable.

Hoy, iremos más allá de nuestra cartera de patrones y crearemos las páginas individuales necesarias para nuestro sitio web. Al hacerlo, veremos cómo se construyen las consultas de medios y las implementaremos de una manera verdaderamente receptiva.

01. Adición de consultas de medios

Con los componentes de nuestro portafolio de patrones completos y trabajando fuera de los límites de cualquier diseño, es hora de moverlos a las diferentes páginas que componen nuestro sitio.

Comenzaremos con nuestra página de inicio. Desde el diseño orientado al escritorio, podemos ver que en las ventanas de visualización más amplias nuestro diseño debería aparecer de la siguiente manera:

Tomando medidas de nuestro diseño, podemos describir el área del documento en CSS de la siguiente manera:

.document {
acolchado: 0 5%;
}
.principal {
ancho: 74.242424242424%; / * 784/1056 * /
flotador izquierdo;
}
.complementary {
ancho: 22.727272727273%; / * 240/1056 * /
flotar derecho;
}

Como aprendimos en la segunda parte de este tutorial, usamos la siguiente fórmula para calcular el ancho porcentual de estas columnas:

(objetivo / contexto) * 100 = resultado

Cuando cambiemos el tamaño de nuestro navegador, veremos que el diseño de nuestro escritorio se escala de la pantalla de menor tamaño a la más grande. Por supuesto, en tamaños pequeños, las columnas son demasiado estrechas y la longitud de las líneas es tan corta que el contenido es difícil de leer. Solo queremos este diseño cuando hay suficiente espacio disponible para que funcione.

Aquí es donde entran en juego las consultas de medios. Suponiendo que este diseño solo debe tener efecto cuando el navegador tiene un ancho superior a 768 px, podemos agregar el siguiente CSS:

.document {
acolchado: 0 5%;
}
@media pantalla y (ancho mínimo: 768px) {
.principal {
ancho: 74.242424242424%; / * 784/1056 * /
flotador izquierdo;
}
.complementary {
ancho: 22.727272727273%; / * 240/1056 * /
flotar derecho;
}
}

Ahora, cuando la ventana gráfica sea más estrecha que 768px, se ignorará todo lo que se encuentre dentro de la consulta de medios. Cualquier navegador que no admita consultas de medios también lo ignorará.

02. Anatomía de una consulta de medios

Para comprender lo que está sucediendo aquí, veamos cómo se construye una consulta de medios. Podemos dividirlo en dos partes:

• @media pantalla: La primera parte de una consulta de medios es la tipo de medio. Puede reconocer esta sintaxis si alguna vez ha incluido estilos de impresión en su CSS. También puede reconocer el nombre del tipo de medios de comunicación atributo en el enlace> elemento. Esto se debe a que ambos aceptan el conjunto aprobado de tipos de medios que se encuentran en la especificación CSS 2.1.
• (ancho mínimo: 768px): La segunda parte es la consulta. Esto incluye el característica a consultar (en este caso, el ancho mínimo de la ventana gráfica) y el correspondiente valor para probar (768px).

Cuando hablamos de diseño web receptivo, hay una tendencia a centrarse en el ancho, pero hay otras características que también podemos probar:

• (min- | max-) ancho y (min- | max-) altura: Estos nos permiten consultar el ancho y alto de la ventana gráfica (es decir, la ventana del navegador).
• (min- | max-) ancho de dispositivo y (min- | max-) altura del dispositivo: Estos nos permiten consultar el ancho de toda la pantalla. En mi experiencia, suele ser más sensato basar los diseños en la ventana gráfica que en la pantalla.
• orientación: Puede pensar inmediatamente en las posibilidades aquí; Piense en aplicaciones que muestren contenido diferente según la orientación de su teléfono; lo mismo es posible en la web.
• (min- | max-) relación de aspecto: Esto nos permite adaptar los diseños en función de la proporción de la ventana del navegador ...
• (min- | max-) relación de aspecto del dispositivo: … Y esto nos permite hacer lo mismo en función de la relación de aspecto del dispositivo. Owen Gregory escribió un artículo maravilloso el año pasado que exploró cómo podemos usar esta consulta para vincular nuestros diseños a los dispositivos en los que aparecen.
• (min- | max-) monocromo: También podemos probar si un dispositivo tiene una pantalla monocromática o no. ¡Imagínese lo útil que sería esto si los dispositivos Kindle de tinta electrónica de Amazon no mintieran y reportaran sus pantallas como color!

La parte final de nuestra consulta es posiblemente la más útil. Mediante el uso y, podemos probar varias funciones en una consulta. Por ejemplo:

@media pantalla y (ancho mínimo: 768px) y (orientación: paisaje) {
...
}

Como puede ver, las consultas de medios pueden ayudarnos a crear experiencias bastante atractivas, y solo he tocado la superficie. Si está buscando una lectura ligera antes de acostarse, podría hacer algo peor que leer la especificación de consulta de medios W3C que describe todas las características que podemos probar.

03. Una cosa más ...

A pesar de que hemos incluido consultas de medios en nuestro CSS, si vemos nuestro sitio en un dispositivo móvil, notará que nuestro sitio todavía se está renderizando como si la pantalla fuera más ancha que 768px.

Para comprender por qué sucede esto, debemos tomar una breve lección de historia.

Cuando se anunció el iPhone original en 2007, uno de sus grandes puntos de venta fue la capacidad de navegar por la 'web real', incluso si eso significaba sitios orientados al escritorio de ancho fijo que debían reducirse para que quepa en su pequeña pantalla. El iPhone pudo hacer esto informando que su pantalla tenía un ancho de 980 px, antes de reducir la escala de las páginas web para que se ajustaran a su pantalla de 320 px de ancho.

Pero el iPhone se introdujo antes de la llegada del diseño receptivo. Ahora que los autores están diseñando sitios diseñados para dispositivos móviles, esta función es menos útil. Afortunadamente, Apple incluyó un medio para evitar este comportamiento y, dado que ha sido adoptado por otros fabricantes, se ha convertido casi en un de facto estándar. Simplemente implica agregar un solo meta elemento a nuestro marcado:

meta name = "viewport" content = "initial-scale = 1.0, width = device-width" />

Esto le dice a los navegadores que reconocen la ventana gráfica que un sitio web no debe reducirse y que el ancho de la ventana del navegador debe tratarse de la misma manera que el ancho total del dispositivo. Una vez que hayamos agregado esta línea, nuestro sitio web aparecerá con el diseño previsto:

04. Elegir puntos de interrupción

Regresemos a nuestra consulta de medios:

@media pantalla y (ancho mínimo: 768px) {
...
}

Los valores a los que se adapta un diseño se denominan comúnmente puntos de interrupción. Si recuerdas, en la segunda parte dije que el uso de píxeles es una indicación de pensamiento insensible, pero aquí he elegido 768px, probablemente porque es el ancho de un dispositivo familiar.

En lugar de elegir puntos de interrupción en función de las características de los dispositivos populares, puede ser más eficaz observar los valores derivados de nuestro contenido, por ejemplo, longitudes de línea cómodas para la lectura o el tamaño máximo de una imagen.

Dado que nuestro tipo se dimensiona con ems, parece sensato que nuestras consultas de medios también utilicen ems. De hecho, hacerlo tiene un beneficio adicional. Cuando un usuario cambia el tamaño del texto en el navegador, las páginas se adaptarán para usar puntos de interrupción más pequeños. Nuestro sitio web no solo se adaptará en función del tamaño de la ventana gráfica, sino también del tamaño de la fuente. De hecho, fue solo cuando vi a Jeremy Keith demostrar las consultas de medios basadas en em que me di cuenta de lo poderosas que podían ser.

Si bien nuestro diseño puede proporcionar alguna indicación de posibles puntos de interrupción, a menudo la mejor manera de elegirlos es a través de la experimentación. Al ajustar el ancho de la ventana del navegador, he decidido que 800px es un buen ancho para cambiar a un diseño más complejo.

Sin embargo, ¿cómo expresamos 800px en ems? Nuevamente, podemos usar nuestra fórmula, pero ¿cuál es el contexto? Al calcular ems para consultas de medios, el contexto es siempre el tamaño de fuente predeterminado del navegador. independientemente de si este valor se ha anulado en su CSS. Este valor predeterminado suele ser de 16 píxeles, lo que nos da:

800 / 16 = 50

Ahora podemos actualizar nuestra consulta de medios así:

@media pantalla y (ancho mínimo: 50em) {/ * 800px * /
...
}

05. Ajustando nuestras miniaturas

Recordará que en la parte 2 diseñamos nuestras miniaturas para que respondan. Sin embargo, una vez que las imágenes dentro de estas miniaturas alcanzan su ancho completo, aparece un área de espacio en blanco a la derecha de cada imagen. Una vez más, las consultas de medios nos permiten solucionar este problema.

Aquí está nuestro CSS original:

ol.media li.media-item {
color de fondo: #fff;
margen: 0 4.16666666667% 4.16666666667% 0;
ancho: 47.91666666667%;
flotador izquierdo;
}
ol.media li.media-item: nth-child (2n) {
margen derecho: 0;
}

El punto en el que aparece este espacio en blanco es justo cuando el navegador crece más ancho que los 560px.Elegiremos este valor en el que cambiar para mostrar tres miniaturas por fila. Podemos hacerlo agregando el siguiente CSS:

@media pantalla y (ancho mínimo: 35em) {
.media-item {
ancho: 30.612244897959%; / * 240/784 * /
margen: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: nth-child (3n) {
margen derecho: 0;
}
}

Tenga en cuenta que no necesitamos reescribir todos los estilos requeridos para la miniatura dentro de esta consulta de medios, solo las partes que deseamos adaptar.

Al ver este cambio en el navegador, notará que no hay margen a la derecha de cada segunda miniatura. Esto se debe a que la siguiente regla CSS aún permanece activa:

ol.media li.media-item: nth-child (2n) {
margen derecho: 0;
}

Necesitamos modificar el CSS dentro de nuestra consulta de medios para restablecer ese valor:

@media pantalla y (ancho mínimo: 35em) {
.media-item {
ancho: 30.612244897959%; / * 240/784 * /
margen: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: nth-child (2n) {
margen derecho: 4.081632653061%;
}
.media-item: nth-child (3n) {
margen derecho: 0;
}
}

Al crear consultas de medios, siempre tenga en cuenta los problemas de herencia como este.

06. No solo ancho

Es importante pensar en las consultas de medios no solo en términos de ancho, sino también en otras variables. Por ejemplo, el video en nuestra página de elementos multimedia está parcialmente oculto cuando la altura de la ventana gráfica disminuye. Contamos con la tecnología:

.media-object-wrapper {
fondo acolchado: 56,25%;
ancho: 100%;
altura: 0;
posición: relativa;
}
@media pantalla y (altura máxima: 35em) y (orientación: paisaje) {/ * 560px * /
.media-object-wrapper {
ancho: 60%;
fondo acolchado: 33,75%;
}
}

Incluso he incluido una consulta de orientación para afinar aún más este comportamiento.

Podemos seguir un enfoque similar para las otras partes de nuestro diseño, intercambiando una versión más grande del encabezado y moviendo los enlaces de navegación a la parte superior de la página una vez que haya espacio disponible.

• Ver nuestra página de inicio receptiva
• Ver nuestra página de elementos multimedia adaptables

¡Y ahí lo tenemos! Hemos creado un sitio web receptivo, ¡y con un día libre! Bueno, no del todo. Los diseños flexibles, las imágenes y las consultas de medios son solo el comienzo del proceso de diseño receptivo.

Mañana: En la parte final de este tutorial, iremos más allá del diseño web receptivo y veremos cómo podemos crear sitios web verdaderamente receptivos.

Paul es un diseñador de interacción con sede en Brighton, Inglaterra. Es más feliz cuando crea interfaces simples pero atractivas que son nativas de la web.