# Split Screen

> The viewport divided into two equal halves — one side typically visual, one textual — each telling its own part of the story.

- Category: Layout-driven
- Era: 2010s–present
- Origin: Print editorial design; dual-narrative film techniques adapted to the web
- Lesson: https://design.dawit.dev/styles/split-screen
- Try it: https://design.dawit.dev/styles/split-screen?style=split-screen

## Where it came from

Split-screen has roots in both film (parallel narratives) and editorial print spreads, and became common on the web once full-bleed images were trivial in CSS. They work especially well for A/B choices, login/signup panels, comparison pages, and hero sections with a strong visual on one side and copy on the other. The responsive challenge: at mobile widths, both panels must stack legibly, and neither should feel like the afterthought.

## How to spot it

- Viewport split at or near 50/50 with a hard or soft dividing edge
- One side image or colour-heavy, one side text-heavy — visual tension across the line
- Either both panels scroll together or one is fixed while the other scrolls
- Divider line may be a colour change, a gap, or an overlapping element

## Strengths

- Creates immediate visual contrast and a strong first impression
- Good for binary choices, before/after comparisons, or login/signup
- Memorable and structured — users remember it

## Weaknesses

- Challenging to make both halves equally interesting at mobile widths
- Feels forced if content does not naturally split into two equal parts
- Navigation and header integration require care — where does the header live?

## In the wild

- Dual login / create-account panels
- Agency portfolio hero sections
- A/B comparison product pages

## Use it when

Login/signup, comparison, or binary-choice interfaces where two distinct options need equal visual weight from the first pixel.

## Related styles
[Full Bleed](https://design.dawit.dev/styles/full-bleed.md), [Editorial](https://design.dawit.dev/styles/editorial.md), [Swiss / International](https://design.dawit.dev/styles/swiss.md)