Ali Saleh / Design studies An ongoing explorationRead the study
RESPONSIVE DESIGN / EXPERIMENT 01

Designing for iPhone Duo.

BY ALI SALEH
SEPTEMBER 2026
01

Illustrative CSS sizes. Not verified Duo Safari viewports; hardware pixels do not determine browser CSS dimensions.

One page. Three sizes.

EXPERIMENT A / SPAN
CLOSED / STACK
400 CSS px
Fieldnotes / A responsive story
01 / ONE CONTINUOUS STORYHero
Visual field One composition across the canvas
A FIELD GUIDE TO CHANGE
Room to
unfold.

One story. A different relationship between its parts.

Read findings
02 / FOUR IDEAS, SAME ORDERContent
01

Keep the hierarchy.

The main story stays first.

02

Carry the context.

Same content, same state.

03

Give actions a home.

Keep controls near their task.

04

Let content reflow.

Use width to change relationships.

FIELDNOTES / 01Try saving, then unfold.
Closed400 × 720 CSS px100% preview scale
01 HYPOTHESIS

More room. Same story.

Expand the container. Let navigation, hero and cards adapt while content and saved state stay in place.

02 GRID LOGIC
Proposed CSS layout framework
LayoutCSS widthColumns
Compact< 640 px4
Expanded640–1099 px8
Wide≥ 1100 px12

24 px margins · 16 px gutters · 4 px spacing steps.

03 EXPERIMENTS

A / Span the hero

One editorial field across the fold.

B / Protect the action

Keep controls together, with 48 px of center clearance.

04 FINDINGS

Spanning favors a continuous story. Splitting gives actions their own space. Card order and saved state remain consistent.

Prototype observations, pending real-device and usability testing.

05 RECOMMENDATIONS

Reflow at useful widths. Keep related controls together. Preserve state, respect reduced motion, and validate Safari’s actual viewport.

Apple hardware reference