Getting Creative With Small Screens
Getting Creative With Small Screens êŽë š
Over the past few months, Iâve explored how we can get creative using well-supported CSS properties. Each article is intended to nudge web design away from uniformity, toward designs that are more distinctive and memorable. One bit of feedback from Phillip Bagleg deserves a follow up:
Andyâs guides are all very interesting, but mostly impractical in real life. Very little guidance on how magazine style design, works when thrown into a responsive environment.
Fair point well made, Phillip. So, letâs bust the myth that editorial-style web design is impractical on small screens.
My brief
Patty Meltt is an up-and-coming country music sensation, and she needed a website to launch her new album and tour. She wanted it to be distinctive-looking and memorable, so she called Stuff & Nonsense. Pattyâs not real, but the challenges of designing and developing sites like hers are.
The problem with endless columns
On mobile, people can lose their sense of context and canât easily tell where a section begins or ends. Good small-screen design can help orient them using a variety of techniques.
When screen space is tight, most designers collapse their layouts into a single long column. Thatâs fine for readability, but it can negatively impact the user experience when hierarchy disappears; rhythm becomes monotonous, and content scrolls endlessly until it blurs. Then, nothing stands out, and pages turn from being designed experiences into content feeds.
Like a magazine, layout delivers visual cues in a desktop environment, letting people know where they are and suggesting where to go next. This rhythm and structure can be as much a part of visual storytelling as colour and typography.
But those cues frequently disappear on small screens. Since we canât rely on complex columns, how can we design visual cues that help readers feel oriented within the content flow and stay engaged? One answer is to stop thinking in terms of one long column of content altogether. Instead, treat each section as a distinct composition, a designed moment that guides readers through the story.
Designing moments instead of columns
Even within a narrow column, you can add variety and reduce monotony by thinking of content as a series of meaningfully designed moments, each with distinctive behaviours and styles. We might use alternative compositions and sizes, arrange elements using different patterns, or use horizontal and vertical scrolling to create experiences and tell stories, even when space is limited. And fortunately, we have the tools we need to do that at our disposal:
@mediaand@container queries- CSS Grid and Flexbox
- Scroll Snap
- Orientation media features
- Logical properties
These moments might move horizontally, breaking the monotony of vertical scrolling, giving a section its own rhythm, and keeping related content together.
Make use of horizontal scrolling
My desktop design for Pattyâs discography includes her album covers arranged in a modular grid. Layouts like these are easy to achieve using my modular grid generator.
But that arrangement isnât necessarily going to work for small screens, where a practical solution is to transform the modular grid into a horizontal scrolling element. Scrolling horizontally is a familiar behaviour and a way to give grouped content its own stage, the way a magazine spread might.
I started by defining the modular gridâs parent â in this case, the imaginatively named modular-wrap â as a container:
.modular-wrap {
container-type: inline-size;
width: 100%;
}
Then, I added grid styles to create the modular layout:
.modular {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
overflow-x: visible;
width: 100%;
}
It would be tempting to collapse those grid modules on small screens into a single column, but that would simply stack one album on top of another.
Collapsing grid modules on small screens into a single column
So instead, I used a container query to arrange the album covers horizontally and enable someone to scroll across them:
@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;
}
}
Album covers are arranged horizontally rather than vertically. See this example in my lab.
Now, Pattyâs album covers are arranged horizontally rather than vertically, which forms a cohesive component while preventing people from losing their place within the overall flow of content.
Push elements off-canvas
Last time, I explained how to use shape-outside and create the illusion of text flowing around both sides of an image. Youâll often see this effect in magazines, but hardly ever online.
The illusion of text flowing around both sides of an image
Desktop displays have plenty of space available, but what about smaller ones? Well, I could remove shape-outside altogether, but if I did, Iâd also lose much of this designâs personality and its effect on visual storytelling. Instead, I can retain shape-outside and place it inside a horizontally scrolling component where some of its content is off-canvas and outside the viewport.
My content is split between two divisions: the first with half the image floating right, and the second with the other half floating left. The two images join to create the illusion of a single image at the centre of the design:
<div class="content">
<div>
<img src="img-left.webp" alt="">
<p><!-- ... --></p>
</div>
<div>
<img src="img-right.webp" alt="">
<p><!-- ... --></p>
</div>
</div>
I knew this implementation would require a container query because I needed a parent element whose width determines when the layout should switch from static to scrolling. So, I added a section outside that content so that I could reference its width for determining when its contents should change:
<section>
<div class="content">
<!-- ... -->
</div>
</section>
section {
container-type: inline-size;
overflow-x: auto;
position: relative;
width: 100%;
}
My technique involves spreading content across two equal-width divisions, and these grid column properties will apply to every screen size:
.content {
display: grid;
gap: 0;
grid-template-columns: 1fr 1fr;
width: 100%;
}
Then, when the sectionâs width is below 48rem, I altered the width of my two columns:
@container (max-width: 48rem) {
.content {
grid-template-columns: 85vw 85vw;
}
}
Setting the width of each column to 85% â a little under viewport width â makes some of the right-hand columnâs content visible, which hints that thereâs more to see and encourages someone to scroll across to look at it.
Some of the right-hand columnâs content is visible. See this example in my lab.
The same principle works at a larger scale, too. Instead of making small adjustments, we can turn an entire section into a miniature magazine spread that scrolls like a story in print.
Build scrollable mini-spreads
When designing for a responsive environment, thereâs no reason to lose the expressiveness of a magazine-inspired layout. Instead of flattening everything into one long column, sections can behave like self-contained mini magazine spreads.
Sections can behave like self-contained mini magazine spreads.
My final shape-outside example flowed text between two photomontages. Parts of those images escaped their containers, creating depth and a layout with a distinctly editorial feel. My content contained the two images and several paragraphs:
<div class="content">
<img src="left.webp" alt="">
<img src="right.webp" alt="">
<p><!-- ... --></p>
<p><!-- ... --></p>
<p><!-- ... --></p>
</div>
Two images float either left or right, each with shape-outside applied so text flows between them:
.content img:nth-of-type(1) {
float: left;
width: 45%;
shape-outside: url("left.webp");
}
.spread-wrap .content img:nth-of-type(2) {
float: right;
width: 35%;
shape-outside: url("right.webp");
}
That behaves beautifully at large screen sizes, but on smaller ones it feels cramped. To preserve the designâs essence, I used a container query to transform its layout into something different altogether.
First, I needed another parent element whose width would determine when the layout should change. So, I added a section outside so that I could reference its width and gave it a little padding and a border to help differentiate it from nearby content:
<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%;
}
When the sectionâs width is below 48rem, I introduced a horizontal Flexbox layout:
@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;
}
}
And because this layout depends on a container query, I used container query units (cqi) for the width of my flexible columns:
.content > * {
flex: 0 0 85cqi;
min-width: 85cqi;
scroll-snap-align: start;
}
On small screens, the layout flows from image to paragraphs to image. See this example in my lab.
Now, on small screens, the layout flows from image to paragraphs to image, with each element snapping into place as someone swipes sideways. This approach rearranges elements and, in doing so, slows someoneâs reading speed by making each swipe an intentional action.
To prevent my images from distorting when flexed, I applied auto-height combined with object-fit:
.content img {
display: block;
flex-shrink: 0;
float: none;
height: auto;
max-width: 100%;
object-fit: contain;
}
Before calling on the Flexbox order property to place the second image at the end of my small screen sequence:
.content img:nth-of-type(2) {
order: 100;
}
Mini-spreads like this add movement and rhythm, but orientation offers another way to shift perspective without scrolling. A simple rotation can become a cue for an entirely new composition.
Make orientation-responsive layouts
When someone rotates their phone, that shift in orientation can become a cue for a new layout. Instead of stretching a single-column design wider, we can recompose it entirely, making a landscape orientation feel like a fresh new spread.
Turning a phone sideways is an opportunity to recompose a layout.
Turning a phone sideways is an opportunity to recompose a layout, not just reflow it. When Pattyâs fans rotate their phones to landscape, I donât want the same stacked layout to simply stretch wider. Instead, I want to use that additional width to provide a different experience. This could be as easy as adding extra columns to a composition in a media query thatâs applied when the deviceâs orientation is detected in landscape:
@media (orientation: landscape) {
.content {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
For the long-form content on Patty Melttâs biography page, text flows around a polygon clip-path placed over a large faux background image. This image is inline, floated, and has its width set to 100%:
<div class="content">
<img src="patty.webp" alt="">
<!-- ... -->
</div>
.content > img {
float: left;
width: 100%;
max-width: 100%;
}
Then, I added shape-outside using the polygon coordinates and added a shape-margin:
.content > img {
shape-outside: polygon(...);
shape-margin: 1.5rem;
}
I only want the text to flow around the polygon and for the image to appear in the background when a device is held in landscape, so I wrapped that rule in a query which detects the screen orientation:
@media (orientation: landscape) {
.content > img {
float: left;
width: 100%;
max-width: 100%;
shape-outside: polygon(...);
shape-margin: 1.5rem;
}
}
See this example in my lab.
Those properties wonât apply when the viewport is in portrait mode.
Design stories that adapt, not layouts that collapse
Small screens donât make design more difficult; they make it more deliberate, requiring designers to consider how to preserve a designâs personality when space is limited.
Phillip was right to ask how editorial-style design can work in a responsive environment. It does, but not by shrinking a print layout. It works when we think differently about how content flexes, shifts, and scrolls, and when a design responds not just to a device, but to how someone holds it.
The goal isnât to mimic miniature magazines on mobile, but to capture their energy, rhythm, and sense of discovery that print does so well. Design is storytelling, and just because thereâs less space to tell one, it shouldnât mean it should make any less impact.