Designing the iPhone Duo playground

• I built it as the test bench for my fit-iphone-duo skill. Online previewers divide the screen by three, but Safari keeps a column for its controls, so a page gets 382px, not 466.
• So your site loads in a frame at exactly the size Safari gives it, inside an iPhone Duo drawn from Apple’s millimetres. Media queries fire at the real width.

• v1 was a dashboard. A form on the left, a facts table on the right, and the phone squeezed in between. Correct, and hard to look at.
• So the device took the page: one header line, one caption line, one floating toolbar. The facts moved behind ⋯, and the bezel and corners came from Apple’s millimetres, so it feels like holding the phone.

Me, on v1“The actual preview is the main attraction, so it has to take the most space and attention.”

← v1 Now →

‹ ›

← v1 Now →

‹ ›

• In v1, Split View showed the site twice, side by side. A shortcut, and not what the device does.
• Now your site sits beside a plain “Another app”, each with its controls on its outer edge. Every pose gets Safari’s real bars, and the address field is how you load a site.

Me, on v1“Why is it showing the view 2 times in Split View? Is it how it would show on a real device?”

← v1 Now →

‹ ›

← v1 Now →

‹ ›

• A probe box and red chips like “size read once” sat on the screen. Useful, but on top of the page you came to see.
• So the explanation moved outside: a small Fold marker at the crease that opens on hover, focus or tap. The fake sample became Fold Notes, a real page that follows its own advice, down to a notice that actually dismisses.

Me, on the probe“Looks ugly here. Make it like an info pointer and reveal it on interaction.”

← Round 02 Now →

‹ ›

← Round 02 Now →

‹ ›

• Only the cover half swings on the hinge, as frosted glass in CSS 3D, borrowing from a Three.js reference without the dependency. Underneath, your page resizes without a reload, through the in-between size Safari reports mid-fold.
• Then, round by round: slower, softer at both ends, clear glass so your page shows through, and a close that settles onto the closed phone instead of cutting to it.

Me, round 08“It should be slow, as someone would close or open a real device, not damaging the screen.”

• A book fold turns a tall closed phone into a wide open one, and a wide one into a tall one. Forcing a fold between the other pairs looked wrong.
• So each pair gets its own move: fold, turn, morph or swap. And the new page only fades in once it has settled at its size, so it never arrives on a blank white screen.

Me, round 09“It’s weird, as both are different orientations. Ideally we should fade smoothly.”

• Then an audit with Emil Kowalski’s design-engineering and animation skills. My one rule: anything there to match Apple’s guidelines stays.
• Nothing applied blindly. Each idea was measured or tried first, then kept only if it added something without changing the feel.

• The toolbar makes room

  Fold appears only where there’s a crease. The groups now slide over for it, instead of jumping 66px and moving Open out from under the pointer.

• One thumb that slides

  The selected segment is a clipped copy of the row, so the thumb, colour and bold label move as one, and no text shifts.

• Feedback on press

  Buttons press to 0.97 and segments dim the moment they’re touched. The choice still commits on release.

• Safari’s progress line

  A thin blue line runs along the address field while your site loads, as in Safari.

• Reverse from anywhere

  Pick the pose you came from mid-move, and the turn, morph or fold runs back from where it is. No waiting for it to finish.

• Your settings, honoured

  Reduce Motion keeps the fades and drops the swing. Reduce Transparency and Increase Contrast work too.

• Motion is easy to misjudge at full speed. So every change was checked in exact frames, on a paused clock. Twice, a frame that looked finished was the capture clock running on, not the animation.
• Measure, then fix. On the GPU the fold, turn and morph hold 60 fps, so a jank seen in software rendering wasn’t real, and will-change tried as a fix made closing worse. One bug was real: Chromium drew a notice as a blank card after folding to Split View. Giving the page its own layer fixed it.

• MissShowed my site twice in Split View, as a shortcut.

  LessonDraw what the device does, even the dull app next door. A previewer only earns trust by being true.

• MissPut the explanation on the screen, over the page.

  LessonExplain on demand. The page is what people came to see.

• MissFaded the whole screen between poses. Black glass flashed through.

  LessonFade the contents, never the screen. The screen holds the page’s colour.

• MissTrusted frames that looked finished. It was the capture clock running on.

  LessonFreeze the clock before you judge motion, and measure before you fix it.