Decisiones de diseño inspiradas: Revista Avaunt

Odio admitirlo, pero hace cinco o seis años mi interés por el diseño web comenzó a decaer. Por supuesto, tener un negocio significaba que tenía que seguir trabajando, pero mantener la motivación y ofrecer mis mejores ideas a los clientes se convirtió en una lucha diaria.

Mirar la web no mejoró mi motivación. El diseño web se había estancado, la previsibilidad había reemplazado a la creatividad y las ideas parecían menos importantes que los datos.

Las razones por las que me gustaba trabajar en la web ya no me parecían relevantes. El diseño había perdido su alegría. Conjuntos complejos de herramientas y procesadores de compilación incluso habían suplantado el simple placer de escribir HTML y CSS.

Cuando comencé a trabajar con el legendario diseñador de periódicos y revistas Mark Porter, me fascinó la dirección de arte y el diseño editorial. Como alguien que no había estudiado tampoco en la escuela de arte, todo lo relacionado con esta área del diseño era emocionante y nuevo. Leí todos los libros sobre directores de arte influyentes que pude encontrar y comencé a coleccionar revistas de los lugares que visitaba en todo el mundo.

Cuanto más me inspiraba el diseño de revistas, más rápido se recuperaba mi entusiasmo por el diseño web. Me preguntaba por qué muchos diseñadores web piensan que el diseño de impresión es anticuado e irrelevante para su trabajo. Pensé en por qué tan poco de lo que hace que el diseño de impresión sea especial se está transfiriendo a la web.

Mi objetivo se convirtió en buscar ejemplos inspiradores de diseño editorial, estudiar qué los hace únicos y encontrar formas de adaptar lo que había aprendido para crear diseños más convincentes, atractivos e imaginativos para la web.

Mis estanterías ahora están repletas de inspiración para el diseño de revistas, pero mi colección sigue creciendo. Tengo espacio limitado, así que soy exigente con lo que recojo. Compro una selección variada y rara vez colecciono más de un número del mismo título.

Busco diseños de página emocionantes, tipografía inspiradora y formas innovadoras de combinar texto con imágenes. Cuando una revista tiene muchos elementos de diseño interesantes, la compro. Sin embargo, si una revista incluye solo algunas piezas de inspiración, admito que no estoy por encima de fotografiarlas antes de volver a colocarla en el estante.

Compro revistas nuevas con la mayor regularidad posible y, una semana antes de Navidad, nos encontramos con unos amigos en Londres. Ningún viaje al “Smoke” está completo sin una parada en Magma, y ​​compré varias revistas nuevas. Después de explicar mi adición de inspiración, un amigo me sugirió que escribiera sobre por qué encuentro el diseño de revistas tan inspirador y cómo las revistas influyen en mi trabajo.

Esa conversación despertó la idea de una serie sobre cómo tomar decisiones de diseño inspiradas. Cada mes, elegiré una publicación, discutiré qué hace que su diseño sea distintivo y cómo podemos aprender lecciones que nos ayuden a hacer un mejor trabajo para la web.

Como usuario entusiasta de HTML y CSS, también explicaré cómo implementar nuevas ideas utilizando las últimas tecnologías; Cuadrícula CSS, Flexbox y formas.

Estoy feliz de decirte que estoy inspirado y motivado nuevamente para diseñar para la web y espero que esta serie también pueda inspirarte.

Revista Avaunt: Documentando lo extraordinario

Una mirada a mí te dirá que no soy muy aventurero. No me considero particularmente culto y mi esposa bromea regularmente sobre lo que dice que es mi falta de estilo.

Entonces, ¿qué me atrajo de la revista Avaunt y su cobertura de "aventura", "cultura" y "estilo" cuando hay tantas revistas variadas y en competencia?

A menudo, solo me toma unas pocas vueltas de página para decidir si una revista ofrece la inspiración que busco. Algo debe sobresalir en esos primeros segundos para que mire más de cerca, ya sea un diseño de página emocionante, un tratamiento tipográfico inspirador o una combinación innovadora de imágenes con texto.

Avaunt tiene todo eso, pero lo que más me llamó la atención fue la forma en que su director de arte usó el color, el diseño y la tipografía de diversas maneras, manteniendo una sensación uniforme en toda la revista. Hay hilos de diseño distintivos que recorren las páginas de Avaunt. Los usos audaces de un tipo de letra stencil serif y sans-serif geométrico son particularmente sorprendentes, al igual que la repetición de negro, blanco y rojo que los diseñadores de Avaunt usan de diversas maneras. Muchas de las opciones creativas de Avaunt son tan aventureras como las historias que cuenta.

Muchas revistas dedican sus primeros pliegos a la publicidad brillante, y Avaunt hace lo mismo. Al pasar esos anuncios, se encuentra la página de contenido de Avaunt y su fascinante cuadrícula modular de cuatro columnas.

Este diseño mantiene el contenido ordenado dentro de las zonas espaciales pero mantiene la energía al hacer que cada zona tenga un tamaño diferente. Este diseño podría adaptarse a muchos tipos de contenido en línea y debería ser fácil de implementar usando CSS Grid. Tengo ganas de probar eso.

Para titulares sans-serif, standfirsts y otros elementos tipográficos impactantes, Avaunt usa MFred, diseñado inicialmente para la revista Elephant por Matt Willey en 2011. Matt pasó a dirigir el arte del lanzamiento de Avaunt y encargó un tipo de letra stencil serif para la titulares en negrita de la revista y números distintivos.

Avaunt Stencil fue diseñado en 2014 por el estudio A2-TYPE con sede en Londres, que desde entonces lo ha puesto a disposición para licencia. Hay muchas fuentes de plantilla disponibles, pero puede ser complicado encontrar una que combine audacia y elegancia: ¿busca una fuente de plantilla alojada en Google Fonts? Stardos sería una buena opción para el tipo de tamaño de pantalla. Si necesita algo más exclusivo, pruebe Caslon Stencil de URW.

El uso de Avaunt de una cuadrícula modular no termina con la página de contenido y es la base para un artículo sobre las curiosidades del Museo Politécnico de la Guerra Fría de Moscú que primero me atrajo a la revista. Este despliegue utiliza una cuadrícula modular de tres columnas y zonas espaciales de varios tamaños.

Lo que me fascina de esta extensión de la Guerra Fría es cómo los módulos en la página del verso se combinan para formar una sola columna para el contenido del texto. Incluso con esta columna, las proporciones de la cuadrícula del módulo siguen informando la posición y el tamaño de los elementos del interior.

Si bien el diseño de muchas de las páginas de Avaunt está dedicado a una experiencia de lectura fabulosa, muchas otras empujan la cuadrícula y tiran de sus estilos tipográficos básicos en diferentes direcciones. Texto blanco sobre fondos oscuros, pliegos de colores brillantes donde los objetos se recortan para mezclarse con el fondo. Mayúsculas iniciales gigantes que llenan el ancho de una columna y grandes mayúsculas estampadas que dominan la página.

Los diseños divertidos de Avaunt agregan interés y la disposición de las páginas crea un ritmo que rara vez veo en línea. Estas variaciones en el diseño se mantienen unidas por el uso constante de Amberes, también diseñado por A2-TYPE, como tipo de letra para texto continuo y un tema de color negro, blanco y rojo que se encuentra en toda la revista.

Estudiar el diseño de la revista Avaunt puede enseñar e inspirar. Cómo una cuadrícula modular puede ayudar a estructurar el contenido de manera creativa sin que se sienta estático. (Más adelante les enseñaré más sobre rejillas modulares).

Cómo un conjunto bien definido de estilos puede convertirse en la base de diseños distintivos y diversos y, finalmente, cómo crear un ritmo a lo largo de una serie de páginas puede ayudar a los lectores a mantenerse interesados.

La próxima vez que pase por la tienda de revistas más cercana, acérquese y recoja una copia de la revista Avaunt. Se trata de aventuras, pero apuesto a que puede ayudar a inspirar tus diseños para que también sean más aventureros.

Di hola a las columnas delgadas

Durante lo que parece una eternidad, ha habido muy poca innovación en el diseño de cuadrículas para la web. Esperaba que los desafíos del diseño receptivo dieran como resultado enfoques creativos para el diseño, pero lamentablemente parece ser todo lo contrario.

En lugar de los diseños de cuadrícula originales, las disposiciones de contenido de uno, dos, tres o cuatro bloques se convirtieron en la norma. Las cuadrículas del marco, como las que se incluyen con Bootstrap, siguen siendo el punto de partida para muchos diseñadores, ya sea que usen esos marcos o no.

Es cierto que hay más razones por las que gran parte de la web se ve igual que los diseñadores web que usan la misma cuadrícula. Después de todo, ha habido convenciones similares para revistas y periódicos durante décadas, pero de alguna manera las revistas no han perdido su personalidad de la forma en que lo han hecho muchos sitios web.

Siempre estoy buscando inspiración para el diseño y las revistas son una fuente rica. Leer Avaunt me recordó una técnica que encontré hace años pero que no había probado. Esta técnica agrega una columna extra estrecha a una rejilla de columna convencional. En el diseño de impresión, esta columna estrecha a menudo se denomina "columna o medida bastarda" y describe un bloque de contenido que no se ajusta al resto de una cuadrícula. (Esta es una publicación familiar, la llamaré una "columna delgada").

En estos primeros ejemplos, apretar una imagen en una columna reduce su peso visual y altera el equilibrio de mi composición. Hacer que la imagen llene dos columnas estándar también altera ese delicado equilibrio.

Dividir la columna final y luego agregar la mitad de su ancho a otra, crea el espacio perfecto para mi imagen y un resultado general más agradable.

Podría usar una columna delgada para informar el ancho de los elementos de diseño. Este logotipo de Mini Cooper coincide con el ancho de mi columna delgada y su tamaño se siente equilibrado con el resto de mi composición.

A veces, el contenido no cabe cómodamente en una sola columna, pero al combinar los anchos de las columnas estándar y delgadas, creo más espacio y una mejor medida para ejecutar el texto. Puedo colocar una columna delgada en cualquier lugar dentro de un diseño donde necesite mi contenido.

Una columna delgada vacía agrega espacios en blanco que permiten que el ojo deambule por un diseño. La asimetría creada al colocar una columna delgada entre dos columnas estándar también hace que un diseño estructurado se sienta más dinámico y enérgico.

Otra columna delgada y vacía talla un canalón ancho en este diseño y limita mi texto continuo a una sola columna, de modo que su altura refleje el formato vertical de la imagen. También puedo usar una columna delgada para convertir elementos tipográficos en elementos de diseño emocionantes.

Desarrollo con columnas delgadas

Diseños como estos son sorprendentemente simples de implementar utilizando el CSS actual. Necesito solo cuatro elementos estructurales; un logotipo, encabezado, figura y un artículo que contenga mi texto en ejecución:

 <body> <img src="logo.svg" alt="Mini Cooper"> <header>…</header> <figure>…</figure> <article>…</article> </body>

Comienzo con un diseño para pantallas de tamaño mediano aplicando CSS Grid al elemento del cuerpo dentro de mi primera consulta de medios. Con este tamaño, no necesito una columna delgada, por lo que estoy desarrollando una cuadrícula simétrica de tres columnas que se expande uniformemente para llenar el ancho de la ventana gráfica:

 @media screen and (min-width : 48em) { body { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 2vw; } }

Uso números de línea para colocar elementos en las columnas y filas de mi cuadrícula. Coloco mi logotipo en la primera columna delgada y en la primera fila usando un selector de atributo de coincidencia de subcadena. Esto apunta a una imagen con "logotipo" en cualquier parte de su valor de origen:

 [src*="logo"] { grid-column: 1; grid-row: 1; }

A continuación, coloco el elemento de encabezado, que contiene mi título y el primer párrafo, en la segunda fila. El uso de números de línea del 1 al -1 distribuye este encabezado en todas las columnas:

 header { grid-column: 1 / -1; grid-row: 2; }

Con display:grid; aplicado, todos los descendientes directos de un contenedor de cuadrícula se convierten en elementos de cuadrícula, que puedo colocar usando áreas, números de línea o nombres.

Este diseño incluye un elemento de figura con una gran imagen de Mini, además de texto de leyenda sobre el diseño original del modelo Cooper. Esta figura es crucial porque describe una relación entre img y figcaption. Sin embargo, aunque esta figura hace que mi marcado sea más significativo, pierdo la capacidad de colocar img y figcaption usando CSS Grid, porque ninguno de los dos es descendiente directo del cuerpo donde definí mi cuadrícula.

Afortunadamente, hay una propiedad CSS que, cuando se usa cuidadosamente, puede solucionar este problema. No necesito diseñar la figura, solo necesito diseñar su img y figcaption. Al aplicar display:contents; a mi figura, la elimino efectivamente del DOM con fines de estilo, por lo que sus descendientes toman su lugar:

 figure { display: contents; }

Vale la pena señalar que, aunque la pantalla elimina efectivamente mi figura del DOM para fines de diseño, cualquier propiedad que herede, incluidos los tamaños y estilos de fuente, aún se hereda:

 figure img { grid-column: 2/-1; grid-row: 4; } figcaption { grid-column: 1; grid-row: 4; align-self: end; }

Coloco mi artículo y le doy estilo al texto en tres columnas usando Diseño de varias columnas, una de mis propiedades favoritas de CSS:

 article { grid-column: 1 / -1; grid-row: 3; column-count: 3; column-gap: 2vw; }

Es hora de implementar un diseño que incluya una columna delgada para pantallas más grandes. Utilizo una consulta de medios para aislar estos nuevos estilos, luego creo una cuadrícula de cinco columnas que comienza con una columna delgada de 1fr de ancho:

 @media screen and (min-width : 64em) { body { grid-template-columns: 1fr repeat(4, 2fr); } } 

Luego agrego valores para reposicionar el encabezado, img y figcaption, y el artículo, recordando restablecer el recuento de columnas para que coincida con su nuevo ancho:

 header { grid-column: 3/-1; grid-row: 1; } figure img { grid-column: 4 / -1; grid-row: 2; } figcaption { grid-column: 2; grid-row: 2; align-self: start; } article { grid-column: 3; grid-row: 2; column-count: 1; }

Cambiar radicalmente la apariencia de un diseño usando solo CSS, sin hacer cambios en la estructura de HTML, me hace sonreír, incluso después de casi dos décadas. También sonrío cuando cambio la composición para crear un diseño dramáticamente diferente sin cambiar la cuadrícula. Para este diseño alternativo, busco una apariencia más estructurada.

Para mejorar la legibilidad de mi texto en ejecución, lo divido en tres columnas. Luego, para separar este bloque de contenido de otros elementos de texto, coloco mi columna delgada entre las dos primeras columnas estándar. No hay necesidad de cambiar la estructura de mi HTML. Todo lo que necesito son cambios menores en los valores de la cuadrícula en mi hoja de estilo. Esta vez, mi valor de columna delgada de 1fr de ancho se encuentra entre dos anchos de columna estándar:

 @media screen and (min-width : 64em) { body { grid-template-columns: 2fr 1fr 2fr 2fr 2fr; } }

Coloco mi encabezado en la segunda fila y el artículo en una fila directamente debajo:

 header { grid-column: 3 / -1; grid-row: 2; } article { grid-column: 3 / -1; grid-row: 3; column-count: 3; column-gap: 2vw; }

Debido a que ni img ni figcaption son descendientes directos del elemento del cuerpo donde definí mi grilla, para ubicarlos necesito el display:contents; propiedad de nuevo:

 figure { display: contents; } figure img { grid-column: 3/5; grid-row: 1; } figcaption { grid-column: 5/-1; grid-row: 1; align-self: start; }

Dependiendo de cómo los use, la introducción de columnas delgadas en sus diseños puede hacer que el contenido sea más legible o transformar un diseño estático en uno que se sienta dinámico y enérgico.

Las columnas delgadas son solo un ejemplo de aprender una técnica de impresión y usarla para mejorar un diseño para la web. Tenía ganas de probar columnas delgadas y no me ha decepcionado.

Agregar una columna delgada a sus diseños a menudo puede ser una decisión inspirada. Le brinda flexibilidad adicional y puede transformar un diseño estático en uno lleno de energía.

Diseño de rejillas modulares

La revista Avaunt contiene muchos diseños inspiradores, pero quiero centrarme en dos páginas en particular. Este pliego contiene objetos de 'Diseño de la Guerra Fría' dentro de un diseño que podría aplicarse a una amplia variedad de tipos de contenido.

A primera vista, las rejillas modulares pueden parecer complicadas, sin embargo, es fácil trabajar con ellas. Me sorprende que tan pocos diseñadores web los usen. Quiero cambiar eso.

Cuando utiliza rejillas modulares cuidadosamente, pueden llenar sus diseños con energía. Son excelentes para poner orden en grandes cantidades de contenido variado, pero también pueden crear diseños visualmente atractivos cuando hay muy poco contenido.

Para este diseño, inspirado en Avaunt, baso mi cuadrícula modular en seis columnas simétricas y cuatro filas espaciadas uniformemente. Los módulos de cuadrícula definen la ubicación y el tamaño de mi contenido.

Enlazo varios módulos para crear zonas espaciales para imágenes grandes y texto en ejecución en una sola columna a la izquierda. Las líneas de límite ayudan a enfatizar la estructura visual de la página.

Este tipo de diseño puede parecer complicado al principio, pero en realidad es maravillosamente simple de implementar. En lugar de basar mi marcado en el diseño visual, comienzo usando los elementos más apropiados para describir mi contenido. En el pasado, habría usado elementos de mesa para implementar cuadrículas modulares. Avance rápido unos años, y las divisiones reemplazaron esas celdas de la tabla. Increíblemente, ahora solo necesito dos elementos HTML estructurales para lograr este diseño; un artículo seguido de una lista ordenada:

 <body> <article>…</article> <ol>…</ol> </body>

Ese artículo contiene un título, párrafos y una tabla para información tabular:

 <article> <p class="standfirst">…</p> <h1>…</h1> <p>…</p> <table>…</table> </article>

La cuadrícula modular de Mini blueprints es el aspecto visual más complicado de mi diseño, pero el marcado que lo describe es simple. Los planos están ordenados por fecha, por lo que una lista ordenada parece el elemento HTML más apropiado:

 <ol class="items"> <li> <h2>1969</h2> <img src="front.svg" alt=""> </li> <li> <h2>1969</h2> <img src="back.svg" alt=""> </li> </ol>

Mi HTML pesa solo 2Kb y tiene menos de sesenta líneas. Es una buena idea validar ese marcado, ya que un poco de tiempo dedicado a la validación temprana ahorrará mucho más tiempo en la depuración de CSS más adelante. También abro la página sin estilo en un navegador, ya que siempre necesito asegurarme de que mi contenido sea accesible sin una hoja de estilo.

Comienzo a desarrollar un diseño simétrico de tres columnas para pantallas de tamaño mediano al aislar los estilos de cuadrícula mediante una consulta de medios:

 @media screen and (min-width : 48em) { body { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 2vw; } }

El artículo y la lista ordenada son los únicos descendientes directos del cuerpo, pero es lo que contienen lo que quiero colocar como elementos de cuadrícula. Yo uso display:contents; para permitirme colocar sus contenidos en cualquier lugar de mi cuadrícula:

 article, ol { display: contents; }

Cada elemento de mi artículo debe abarcar las tres columnas, por lo que los coloco usando números de línea, comenzando con la primera línea (1) y terminando con la línea final (-1):

 .standfirst, section, table { grid-column: 1 / -1; }

Los elementos de mi lista ordenada se colocan uniformemente en la cuadrícula de tres columnas. Sin embargo, mi diseño exige que algunos elementos abarquen dos columnas y uno abarque dos filas. Los selectores de enésimo tipo son herramientas perfectas para seleccionar elementos sin recurrir a agregar clases en mi marcado. Los uso, la palabra clave span y la cantidad de columnas o filas que quiero que abarquen los elementos:

 li:nth-of-type(4), li:nth-of-type(5), li:nth-of-type(6), li:nth-of-type(14) { grid-column: span 2; } li:nth-of-type(6) { grid-row: span 2; } 

Al obtener una vista previa de mi diseño en un navegador, puedo ver que no aparece exactamente como estaba planeado porque algunos módulos de cuadrícula están vacíos. De forma predeterminada, el flujo normal de cualquier documento organiza los elementos de izquierda a derecha y de arriba a abajo, al igual que los idiomas occidentales. Cuando los elementos no se ajustan al espacio disponible en una cuadrícula, el algoritmo de ubicación de CSS Grid deja los espacios vacíos y coloca los elementos en la siguiente línea.

Puedo anular el valor predeterminado del algoritmo aplicando la propiedad grid-auto-flow y un valor denso a mi grid-container, en este caso el cuerpo:

 body { grid-auto-flow: dense; }

Fila es el valor de flujo automático de cuadrícula predeterminado, pero también puede elegir columna, columna densa y fila densa. Use grid-auto-flow con prudencia porque un navegador llena cualquier módulo vacío con el siguiente elemento en el flujo del documento que puede caber en ese espacio. Este comportamiento cambia el orden visual sin alterar la fuente, lo que puede tener implicaciones para la accesibilidad.

Mi diseño de tamaño mediano ahora se ve tal como lo había planeado, así que ahora es el momento de adaptarlo para pantallas más grandes. Solo necesito hacer cambios menores en los estilos de la cuadrícula para convertir primero mi artículo en una barra lateral, que ocupa toda la altura de mi diseño, luego colocar elementos de lista específicos en módulos en una cuadrícula más grande de seis columnas:

 @media screen and (min-width : 64em) { body { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } article { grid-column: 1; grid-row: 1 / -1; } li:nth-of-type(4) { grid-column: 5 / span 2; } li:nth-of-type(5) { grid-column: 2 / span 2; } li:nth-of-type(6) { grid-column: 4 / span 2; grid-row: 2 / span 2; } li:nth-of-type(14) { grid-column: 5 / 7; } }

Hacer un seguimiento de las líneas de ubicación de la cuadrícula a veces puede ser difícil, pero afortunadamente, CSS Grid ofrece más de una forma de lograr un diseño de cuadrícula modular. Usar grid-template-areas es un enfoque alternativo y creo que no recibe suficiente atención.

Usando grid-template-areas, primero defino cada módulo dándole un nombre, luego coloco elementos en un módulo o en varios módulos adyacentes conocidos como zonas espaciales. Este proceso puede sonar complicado, pero en realidad es una de las formas más fáciles y obvias de usar CSS Grid.

Le doy a cada elemento un valor de área de cuadrícula para colocarlo en mi cuadrícula, comenzando con el logotipo y el artículo:

 [src*="logo"] { grid-area: logo; } article { grid-area: article; }

A continuación, asigno un área de cuadrícula a cada uno de los elementos de mi lista. Elegí un valor i+n simple, pero podía elegir cualquier valor, incluidas palabras o incluso letras como a, b, c o d.

 li:nth-of-type(1) { grid-area: i1; } … li:nth-of-type(14) { grid-area: i14; }

Mi cuadrícula tiene seis columnas explícitas y cuatro filas implícitas, cuya altura se define por la altura del contenido dentro de ellas. Dibujo mi cuadrícula en CSS usando la propiedad grid-template-areas, donde cada punto (.) representa un módulo de cuadrícula:

 body { grid-template-columns: repeat(6, 1fr); grid-template-areas: ". . . . ". . . . ".. .. ".. .. . ." . ." . ." . ."; }

Luego, coloco elementos en esa cuadrícula usando los valores de área de cuadrícula que definí anteriormente. Si repito valores en varios módulos adyacentes, ya sea en columnas o filas, ese elemento se expande para crear una zona espacial. Dejar un punto (.) crea un módulo vacío:

 body { grid-template-columns: repeat(6, 1fr); grid-template-areas: "article logo i1 i2 i3 i3" "article i4 i4 i5 i5 "article i7 i8 i5 i5 "article i10 i11 i12 i14 i14"; }

En todos los ejemplos hasta ahora, aislé estilos de diseño para diferentes tamaños de pantalla utilizando puntos de interrupción de consulta de medios. Esta técnica se ha convertido en la forma estándar de lidiar con las complejidades del diseño web receptivo. Sin embargo, existe una técnica para desarrollar cuadrículas modulares receptivas sin utilizar consultas de medios. Esta técnica aprovecha la capacidad de un navegador para redistribuir el contenido.

Antes de continuar, vale la pena recordar que mi diseño requiere solo dos elementos HTML estructurales; una lista ordenada para el contenido y un artículo que transformo en una barra lateral cuando hay suficiente ancho disponible para que ambos elementos estén uno al lado del otro. Cuando no hay suficiente ancho, esos elementos se apilan verticalmente en el orden del contenido:

 <body> <article>…</article> <ol>…</ol> </body>

La lista ordenada forma la parte más importante de mi diseño y siempre debe ocupar un mínimo del 60% del ancho de una ventana gráfica. Para asegurarme de que esto suceda, uso una declaración de ancho mínimo:

 ol { min-width: 60%; }

Si bien normalmente recomiendo usar CSS Grid para el diseño general de la página y Flexbox para componentes flexibles, para implementar este diseño le doy la vuelta a ese consejo.

Convierto el elemento del cuerpo en un contenedor flexible, luego me aseguro de que mi artículo crezca para llenar todo el espacio horizontal usando la propiedad flex-grow con un valor de 1:

 body { display: flex; } article { flex-grow: 1; }

Para asegurarme de que mi lista ordenada también ocupe todo el espacio disponible siempre que los dos elementos estén uno al lado del otro, le doy un valor de crecimiento flexible ridículamente alto de 999:

 article { flex-grow: 999; }

El uso de base flexible proporciona un ancho inicial ideal para el artículo. Al configurar la envoltura del contenedor flexible para envolver, me aseguro de que los dos elementos se apilen cuando se alcanza el ancho mínimo de la lista y no hay espacio suficiente para que se coloquen uno al lado del otro:

 body { flex-wrap: wrap; } article { flex-basis: 20rem; }

Quiero crear una cuadrícula modular flexible que permita cualquier número de módulos. En lugar de especificar el número de columnas o filas, el uso de la repetición permite que un navegador cree tantos módulos como necesite. autocompletar llena todo el espacio disponible, ajustando el contenido donde sea necesario. minmax le da a cada módulo un ancho mínimo y máximo, en este caso 10rem y 1fr:

 ol { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); grid-column-gap: 2vw; }

Para evitar que los módulos permanezcan vacíos, uso grid-auto-flow nuevamente con un valor denso. El algoritmo del navegador redistribuirá mi contenido para llenar cualquier módulo vacío:

 ol { grid-auto-flow: dense; }

Al igual que antes, algunos elementos de la lista abarcan dos columnas y uno abarca dos filas. Una vez más, utilizo selectores de tipo n para apuntar a elementos de lista específicos, luego grid-column o grid-row con la palabra clave span seguida del número de columnas o filas que quiero abarcar:

 li:nth-of-type(4), li:nth-of-type(5), li:nth-of-type(14) { grid-column: span 2; } li:nth-of-type(6) { grid-column: span 2; grid-row: span 2; }

Este CSS simple crea un diseño receptivo que se adapta a su entorno sin necesidad de múltiples consultas de medios o conjuntos de estilos separados.

Mediante el uso de CSS moderno, incluidos Grid y Flexbox, confiando en la capacidad de los navegadores para redistribuir el contenido, además de algunas opciones inteligentes sobre tamaños mínimos y máximos, este enfoque se acerca más a lograr los objetivos de una web verdaderamente receptiva.

Leer más de la serie

1. Decisiones de diseño inspiradas: Revista Avaunt
2. Decisiones de diseño inspiradas: Asuntos apremiantes
3. Decisiones de diseño inspiradas: Ernest Journal
4. Decisiones de diseño inspiradas: Alexey Brodovitch
5. Decisiones de diseño inspiradas: Bea Feitler
6. Decisiones de diseño inspiradas: Neville Brody
7. Decisiones de diseño inspiradas: Otto Storch
8. Decisiones de diseño inspiradas: Herb Lubalin
9. Decisiones de diseño inspiradas: Max Huber
10. Decisiones de diseño inspiradas: Giovanni Pintori
11. Decisiones de diseño inspiradas: Emmett McBain
12. Decisiones de diseño inspiradas: Bradbury Thompson

NB: Miembros de Smashing Los miembros de Smashing tienen acceso a un PDF bellamente diseñado de la revista Inspired Design Decisions de Andy y ejemplos completos de código de este artículo. Puede comprar el PDF y los ejemplos de este número, así como cualquier otro número, directamente desde el sitio web de Andy.