Creative Small-Screen Design Techniques Using CSS

Creative Small-Screen Design Techniques Using CSS

This article addresses the challenge of maintaining engaging, magazine-style layouts on mobile devices by leveraging modern CSS techniques. It challenges the assumption that editorial-style designs are impractical on small screens and provides actionable solutions using tools like container queries, horizontal scrolling, and orientation responsiveness.

Key Themes and Techniques

The Problem with Endless Columns

• Issue: Mobile users lose context in single-column layouts, leading to monotonous scrolling and a lack of visual hierarchy.
• Impact: Content becomes a “feed” rather than a curated experience, reducing engagement and discoverability.
• Solution: Replace uniform columns with “designed moments” that vary in composition, size, and interaction.

Designing Moments Instead of Columns

• Approach: Treat each section as a distinct composition with unique behaviors and styles.
• Tools Used:
  • @media and @container queries for responsive adjustments.
  • CSS Grid and Flexbox for layout flexibility.
  • Scroll Snap for controlled navigation.
  • Logical properties for adaptive spacing.
• Purpose: Maintain rhythm and visual storytelling while adapting to limited screen space.

Horizontal Scrolling for Grouped Content

• Example: Transform a modular grid of album covers into a horizontally scrollable component.
• Code Implementation:

  .modular-wrap {
    container-type: inline-size;
    width: 100%;
  }
  
  .modular {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3, 1fr);
    overflow-x: visible;
    width: 100%;
  }
  
  @container (max-width: 30rem) {
    .modular {
      grid-auto-columns: minmax(70%, 1fr);
      grid-auto-flow: column;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
  }

• Impact: Keeps related content grouped, preventing vertical monotony and improving discoverability.

Pushing Elements Off-Canvas

• Technique: Use shape-outside to create text flow around images, mimicking magazine layouts.
• Implementation:

  <div class="content">
    <div><img src="img-left.webp" alt=""><p>...</p></div>
    <div><img src="img-right.webp" alt=""><p>...</p></div>
  </div>

  section {
    container-type: inline-size;
    overflow-x: auto;
    width: 100%;
  }
  
  @container (max-width: 48rem) {
    .content {
      grid-template-columns: 85vw 85vw;
    }
  }

• Purpose: Maintains visual storytelling by revealing content partially off-screen, encouraging horizontal scrolling.

Scrollable Mini-Spreads

• Goal: Replicate magazine spreads on mobile using horizontal Flexbox and scroll snap.
• Code Example:

  section {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  
  .content > * {
    flex: 0 0 85cqi;
    scroll-snap-align: start;
  }
  
  .content img:nth-of-type(2) {
    order: 100;
  }

• Impact: Creates intentional, deliberate navigation, slowing reading speed and enhancing engagement.

Orientation-Responsive Layouts

• Technique: Detect device orientation changes to reconfigure layouts.
• Example:

  @media (orientation: landscape) {
    .content {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
  }

• Use Case: Replaces stacked content with multi-column layouts on landscape mode, offering a fresh experience.

Working Example: Horizontal Scroll for Album Covers

<div class="modular-wrap">
  <div class="modular">
    <div class="album"><img src="album1.jpg" alt="Album 1"></div>
    <div class="album"><img src="album2.jpg" alt="Album 2"></div>
    <div class="album"><img src="album3.jpg" alt="Album 3"></div>
  </div>
</div>

.modular-wrap {
  container-type: inline-size;
  width: 100%;
}

.modular {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, 1fr);
  overflow-x: visible;
  width: 100%;
}

@container (max-width: 30rem) {
  .modular {
    grid-auto-columns: minmax(70%, 1fr);
    grid-auto-flow: column;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

Recommendations

• Use Container Queries: For precise control over layout changes based on parent element size.
• Leverage Scroll Snap: Enhance user intent by making each scroll action deliberate.
• Test Orientation Changes: Ensure layouts adapt gracefully to both portrait and landscape modes.
• Avoid Over-Complication: Balance creativity with usability; avoid layouts that frustrate users.
• Prioritize Accessibility: Ensure horizontal scrolling and off-canvas elements are navigable via touch and keyboard.

Reference: Getting Creative With Small Screens | CSS-Tricks