Superar últimos mesesexploro cómo ser creativo con propiedades CSS bien compatibles. Cada artículo tiene como objetivo alejar el diseño web de lo convencional y acercarlo a diseños más únicos y memorables. Un poco Comentarios de Philip Bugler Vale la pena seguir:
Todas las guías de Andy son interesantes, pero en su mayoría poco realistas en la vida real. Hay poca orientación sobre cómo funciona el diseño de estilo de revista en un entorno responsivo.
Bien dicho Felipe. Entonces, rompamos el mito de que el diseño web editorial no es práctico en pantallas pequeñas.
mi perfil: Patty Meltt es una estrella de la música country en ciernes que necesita un sitio web para lanzar su nuevo álbum y su gira. Quería que pareciera único y memorable, así que llamó tonterías y tonterías. Patty no es real, pero los desafíos de diseñar y desarrollar un sitio como el de ella sí lo son.
Problema de columna infinita
En los dispositivos móviles, las personas pueden perder el sentido del contexto y no poder distinguir fácilmente dónde comienza o termina una sección. Un buen diseño de pantalla pequeña puede ayudarles a orientarse utilizando una variedad de tecnologías.
Cuando el espacio en la pantalla es reducido, la mayoría de los diseñadores colapsan su diseño en una columna larga. Esto es excelente para la legibilidad, pero cuando la jerarquía desaparece, puede tener un impacto negativo en la experiencia del usuario; el ritmo se vuelve monótono y el contenido se desplaza sin cesar hasta volverse borroso. Luego, nada destaca y la página cambia de una experiencia de diseño a una fuente de contenido.
Al igual que una revista, el diseño proporciona señales visuales en el entorno de escritorio que permiten a las personas saber dónde están y sugerir adónde ir a continuación. Este ritmo y estructura pueden ser una parte tan importante de la narrativa visual como el color y la tipografía.
Pero estas pistas a menudo se pierden en la pantalla chica. Dado que no podemos depender de columnas complejas, ¿cómo podemos diseñar señales visuales para ayudar a los lectores a sentirse guiados a través del flujo de contenido y mantenerse interesados? Una respuesta es dejar de pensar en una lista larga por completo. En lugar de ello, piense en cada sección como un paquete único, un momento cuidadosamente elaborado que guía al lector a través de la historia.
Momentos de diseño, no pilares
Incluso dentro de una columna estrecha, puede agregar variedad y reducir la monotonía al tratar su contenido como una serie de momentos de diseño significativos, cada uno con un comportamiento y estilo únicos. Podríamos usar composiciones y tamaños alternativos, organizar elementos usando diferentes patrones o usar desplazamiento horizontal y vertical para crear experiencias y contar historias incluso cuando el espacio es limitado. Afortunadamente, tenemos las herramientas que necesitamos para que esto suceda:
Estos momentos pueden moverse horizontalmente, rompiendo la monotonía del desplazamiento vertical, dando a una sección su propio ritmo y manteniendo unido el contenido relacionado.
Aprovecha el desplazamiento horizontal
El diseño de mi escritorio para los discos de Patti incluye las portadas de sus álbumes dispuestas en una cuadrícula modular. Un diseño como este es fácil usando mi implementación. Generador de red modular.
Pero esta disposición no es necesariamente adecuada para pantallas pequeñas, y una solución práctica es convertir la cuadrícula modular en elementos de desplazamiento horizontal. El desplazamiento horizontal es un comportamiento común y una forma de darle al contenido agrupado su propio escenario, muy parecido a la portada de una revista.
Empiezo definiendo el padre de la cuadrícula modular; en este caso, nombrando imaginativamente modular-wrap — como contenedor:
.modular-wrap {
container-type: inline-size;
width: 100%;
}Luego, agregué estilos de cuadrícula para crear un diseño modular:
.modular {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
overflow-x: visible;
width: 100%;
}Es tentador colapsar los módulos de la cuadrícula en una sola columna en una pantalla pequeña, pero eso simplemente apila un álbum encima de otro.
Así que usé un Consulta de contenedor Organice las portadas de los álbumes horizontalmente y permita que alguien se desplace por ellas:
@container (max-width: 30rem) {
#example-1 .modular {
display: grid;
gap: 1.5rem;
grid-auto-columns: minmax(70%, 1fr);
grid-auto-flow: column;
grid-template-columns: none;
grid-template-rows: 1fr;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
Las portadas de los álbumes de Patti ahora están dispuestas horizontalmente en lugar de verticalmente, lo que crea un componente cohesivo y al mismo tiempo evita que las personas pierdan su lugar en el flujo general de contenido.
Empujar elemento fuera del lienzo
último tiempole expliqué cómo utilizar shape-outside y crea la ilusión de texto fluyendo a ambos lados de la imagen. A menudo se ve este efecto en las revistas, pero rara vez en línea.
Los monitores de escritorio tienen mucho espacio libre, pero ¿qué pasa con los monitores más pequeños? ok puedo borrar shape-outside Pero si hiciera eso, también perdería gran parte de la personalidad del diseño y su impacto en la narrativa visual. En lugar de eso puedo mantener shape-outside y colóquelo dentro de un componente de desplazamiento horizontal con algún contenido fuera del lienzo y fuera de la ventana gráfica.
Mi contenido está dividido en dos partes: la primera parte tiene la mitad de la imagen flotando hacia la derecha y la segunda parte tiene la otra mitad flotando hacia la izquierda. Las dos imágenes se combinan para crear la ilusión de una sola imagen en el centro del diseño:
<div class="content">
<div>
<img src="https://css-tricks.com/getting-creative-with-small-screens/img-left.webp" alt="">
<p><!-- ... --></p>
</div>
<div>
<img src="https://css-tricks.com/getting-creative-with-small-screens/img-right.webp" alt="">
<p><!-- ... --></p>
</div>
</div>Sé que esta implementación requiere una consulta de contenedor porque necesito un elemento principal cuyo ancho determine cuándo el diseño cambia de estático a desplazamiento. Entonces, agregué un section Fuera de ese contenido para poder hacer referencia a su ancho para determinar cuándo debe cambiar su contenido:
<section>
<div class="content">
<!-- ... -->
</div>
</section>section {
container-type: inline-size;
overflow-x: auto;
position: relative;
width: 100%;
}Mi técnica consiste en distribuir el contenido en dos particiones de igual ancho; estas propiedades de las columnas de la cuadrícula funcionarán para cada tamaño de pantalla:
.content {
display: grid;
gap: 0;
grid-template-columns: 1fr 1fr;
width: 100%;
}Luego, cuando el ancho de la sección esté por debajo 48remcambié el ancho de ambas columnas:
@container (max-width: 48rem) {
.content {
grid-template-columns: 85vw 85vw;
}
}Establecer el ancho de cada columna en 85 % (justo debajo del ancho de la ventana gráfica) hace que parte del contenido de la columna derecha sea visible, lo que implica que hay más contenido para ver y anima a las personas a desplazarse para verlo.
El mismo principio se aplica a mayor escala. En lugar de hacer pequeños ajustes, podemos convertir toda la sección en una mini revista que se desplaza como una historia impresa.
Cree una mini página desplazable
No hay razón para perder la expresividad de un diseño estilo revista al diseñar un entorno responsivo. Los capítulos pueden comportarse como minirevistas independientes, en lugar de tener todo agrupado en una larga columna.
mi final shape-outside Ejemplo de flujo de texto entre dos fotomontajes. Partes de estas imágenes se desprenden de sus contenedores, creando profundidad y un diseño con una sensación editorial distintiva. Mi contenido consta de dos imágenes y varios párrafos:
<div class="content">
<img src="https://css-tricks.com/getting-creative-with-small-screens/left.webp" alt="">
<img src="https://css-tricks.com/getting-creative-with-small-screens/right.webp" alt="">
<p><!-- ... --></p>
<p><!-- ... --></p>
<p><!-- ... --></p>
</div>Dos imágenes flotan hacia la izquierda o hacia la derecha, cada imagen shape-outside Aplicar para hacer que el texto fluya entre ellos:
.content img:nth-of-type(1) {
float: left;
width: 45%;
shape-outside: url("https://css-tricks.com/getting-creative-with-small-screens/left.webp");
}
.spread-wrap .content img:nth-of-type(2) {
float: right;
width: 35%;
shape-outside: url("https://css-tricks.com/getting-creative-with-small-screens/right.webp");
}Esto funciona muy bien en pantallas de gran tamaño, pero se siente estrecho en pantallas pequeñas. Para preservar la esencia del diseño, utilicé consultas de contenedor para transformar su diseño en algo completamente diferente.
Primero, necesito otro elemento principal cuyo ancho determinará cuándo debe cambiar el diseño. Entonces, agregué un section afuera para poder hacer referencia a su ancho y darle un poco padding y un borde para ayudar a distinguirlo del contenido cercano:
<section>
<div class="content">
<!-- ... -->
</div>
</section>section {
border: 1px solid var(--border-stroke-color);
box-sizing: border-box;
container-type: inline-size;
overflow-x: auto;
padding: 1.5rem;
width: 100%;
}Cuando el ancho de la sección transversal es menor que 48remintroduje el diseño horizontal de Flexbox:
@container (max-width: 48rem) {
.content {
align-items: center;
display: flex;
flex-wrap: nowrap;
gap: 1.5rem;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
}Debido a que este diseño depende de la consulta del contenedor, utilicé Unidad de consulta de contenedores (cqi) para el ancho de mi columna flexible:
.content > * {
flex: 0 0 85cqi;
min-width: 85cqi;
scroll-snap-align: start;
}
Ahora, en la pantalla pequeña, el diseño fluye de imagen en párrafo e imagen, y cada elemento encaja en su lugar cuando alguien desliza el dedo hacia un lado. Este enfoque reorganiza los elementos y ralentiza la lectura de alguien al hacer que cada deslizamiento sea una acción intencional.
Para evitar que la imagen se deforme cuando se curva, configuré la altura automática en object-fit:
.content img {
display: block;
flex-shrink: 0;
float: none;
height: auto;
max-width: 100%;
object-fit: contain;
}Antes de llamar a Flexbox order La propiedad coloca la segunda imagen al final de mi secuencia de pantalla pequeña:
.content img:nth-of-type(2) {
order: 100;
}Los minipaneles como este añaden movimiento y ritmo, pero las direcciones proporcionan otra forma de cambiar la perspectiva sin desplazarse. Una simple rotación puede ser la señal para una composición completamente nueva.
Hacer un diseño responsivo direccional
Cuando alguien gira su teléfono, el cambio de orientación puede servir como indicio de un nuevo diseño. En lugar de ampliar el diseño de una sola columna, podríamos reestructurarlo por completo, haciendo que la dirección transversal parezca una extensión completamente nueva.
Girar el teléfono de lado es una oportunidad para reorganizar el diseño, no solo reorganizarlo. No quiero que el mismo diseño apilado simplemente se estire más cuando los fanáticos de Patty giren el teléfono en posición horizontal. En cambio, quería aprovechar el ancho adicional para brindar una experiencia diferente. Esto podría ser tan simple como agregar columnas adicionales a la combinación en una consulta de medios que se aplica al iniciar el dispositivo. orientation detectado landscape:
@media (orientation: landscape) {
.content {
display: grid;
grid-template-columns: 1fr 1fr;
}
}Para contenido extenso en la página de biografía de Patti Melt, el texto fluye alrededor de polígonos clip-path colocado en un gran Imagen de fondo artificial. La imagen está en línea, flota y tiene su ancho establecido en 100%:
<div class="content">
<img src="https://css-tricks.com/getting-creative-with-small-screens/patty.webp" alt="">
<!-- ... -->
</div>.content > img {
float: left;
width: 100%;
max-width: 100%;
}Luego, agregué shape-outside Utilice coordenadas poligonales y agregue shape-margin:
.content > img {
shape-outside: polygon(...);
shape-margin: 1.5rem;
}Solo quiero que el texto fluya alrededor del polígono y que la imagen aparezca en el fondo cuando el dispositivo esté en orientación horizontal, así que incluyo esa regla en una consulta que detecta la orientación de la pantalla:
@media (orientation: landscape) {
.content > img {
float: left;
width: 100%;
max-width: 100%;
shape-outside: polygon(...);
shape-margin: 1.5rem;
}
}
Estas propiedades no se aplican cuando la ventana gráfica está en modo vertical.
Diseñe para adaptarse a la historia, no colapsar el diseño.
Las pantallas pequeñas no dificultan el diseño; más bien, lo hacen más reflexivo y exigen que los diseñadores consideren cómo mantener la personalidad de un diseño a pesar del espacio limitado.
Philip tiene razón al preguntar cómo funciona el diseño de estilo editorial en un entorno responsivo. Esto es cierto, pero no reduciendo el diseño de impresión. Funciona cuando pensamos de manera diferente sobre cómo el contenido se dobla, se mueve y rueda, y cuando el diseño responde no sólo al dispositivo sino también a cómo lo sostienen las personas.
El objetivo no es emular la microrevista de su teléfono, sino capturar la energía, el ritmo y la sensación de descubrimiento en los que destacan las revistas impresas. El diseño tiene que ver con contar historias, y el hecho de que haya menos espacio para contar historias no significa que sea menos impactante.
