Creative Approaches to Small Screens

Over recent months, I’ve delved into creative uses of well-supported CSS properties to push web design towards more distinctive and memorable creations. A comment from Phillip Bagleg highlighted an important point:

“Andy’s guides are interesting, but often impractical in real life. There’s little guidance on how magazine-style design works in a responsive setting.”

Phillip makes a valid point. Let’s address the misconception that editorial-style web design is impractical on small screens.

Patty Meltt, a rising country music star, needed a website to launch her new album and tour. She wanted it to be unique and memorable, so she turned to Stuff & Nonsense. Although Patty isn’t real, the challenges of designing such sites are.

On mobile, users can lose context and struggle to identify where sections begin or end. Effective small-screen design can orient them through various techniques.

When space is limited, designers often collapse layouts into a single column. While this aids readability, it can harm the user experience by eliminating hierarchy, creating monotony, and turning pages into endless content feeds.

Desktop layouts provide visual cues, guiding users through rhythm and structure, which are integral to visual storytelling. However, these cues often vanish on small screens. Without complex columns, how can we design cues that help readers feel oriented and engaged? One solution is to stop viewing content as a single column and instead treat each section as a distinct composition, guiding readers through the story.

Even in narrow columns, you can add variety by designing content as a series of distinct moments, each with unique behaviors and styles. Use alternative compositions, sizes, patterns, and scrolling to create experiences and tell stories, even with limited space.

Horizontal scrolling can break vertical monotony, giving sections their own rhythm and keeping related content together.

For Patty’s discography, I used a modular grid for her album covers, easily achieved with my modular grid generator. But on small screens, a horizontal scrolling element is more practical, giving grouped content its own stage like a magazine spread.

I defined the modular grid’s parent as a container and added grid styles for the layout. Instead of collapsing grid modules into a single column on small screens, I used a container query to arrange the album covers horizontally, allowing users to scroll across them.

Last time, I explained using shape-outside to create the illusion of text flowing around both sides of an image, a common magazine effect rarely seen online. Desktop displays have space, but smaller ones pose a challenge. Instead of removing shape-outside, I placed it in a horizontally scrolling component, with some content off-canvas.

My content is split between two divisions, each with half the image floating, creating the illusion of a central image. I used a container query to determine when the layout should switch from static to scrolling.

Spreading content across two equal-width divisions, I used grid column properties for all screen sizes. When below 48rem, I altered column widths, making some of the right-hand column’s content visible, hinting at more to see and encouraging scrolling.

At a larger scale, entire sections can become scrollable mini magazine spreads. Instead of flattening everything into one column, sections can behave like self-contained mini spreads.

My final shape-outside example flowed text between photomontages, with parts of images escaping containers, creating depth and an editorial feel. On smaller screens, I used a container query to transform the layout.

I added a section as a parent to reference its width for layout changes, introducing a horizontal Flexbox layout below 48rem. I used container query units for flexible column widths, with each element snapping into place as someone swipes sideways. This rearranges elements, slowing reading speed by making each swipe intentional.

To prevent image distortion, I applied auto-height with object-fit. I used the Flexbox order property to place the second image at the end of the sequence.

Mini-spreads add movement and rhythm, but orientation offers another way to shift perspective. A simple rotation can cue a new composition.

When a phone rotates, it can cue a new layout. Instead of stretching a single-column design, recompose it entirely, making landscape orientation feel fresh.

Turning a phone sideways is an opportunity to recompose a layout. When Patty’s fans rotate their phones, I want to use the extra width for a different experience, adding columns in a media query for landscape orientation.

On Patty Meltt’s biography page, text flows around a polygon clip-path over a faux background image. This image is inline, floated, and width set to 100%. I added shape-outside with polygon coordinates and a shape-margin, wrapped in a query detecting landscape orientation.

These properties don’t apply in portrait mode.

Small screens require deliberate design, preserving personality when space is limited. Editorial-style design works in a responsive environment by thinking differently about content flexing, shifting, and scrolling, responding not just to devices, but to how they’re held.

The goal isn’t to mimic miniature magazines on mobile