The notch, Face ID, and the end of the home button.

The iPhone X reveal happened on Tuesday. Three things stood out to us: the screen has a notch, Touch ID is gone, and the gesture grammar of every iOS app is about to change. None of those are small. Each one has direct consequences for the work we ship — and the consequences compound.

We don't have a device yet; nobody does. But what Apple showed in the keynote, plus what's already in the iOS 11 SDK, is enough to start planning. Here's our list.

The notch

Every responsive grid we have is going to need a 'safe area' concept. The status bar isn't a clean rectangle anymore — it has a hole in it. Mobile Safari is exposing CSS environment variables (env(safe-area-inset-top) and friends) for the precise insets, and the viewport meta needs a new attribute (viewport-fit=cover) to enable them. Sites that hard-code where the top of the screen is will look broken on the X.

The notch isn't just a top-bar problem. In landscape, the notch eats into the left edge. Full-bleed hero images need to extend behind it (visually) while content respects the inset. The footer needs to clear the gesture bar at the bottom. This is two or three days of work across a typical Nuxt project — and it's work nobody scoped for in any project signed off before this week.

What we'll do for client sites:

• 01Audit every project for hard-coded top spacing and replace with env() values + fallback.
• 02Test full-bleed hero sections in landscape, both orientations, with content extending behind the notch but text remaining within the safe area.
• 03Check every fixed header — they need to grow taller on iPhone X to span the status bar height correctly.
• 04Look at any modal or overlay that pins to the screen edges. Same problem in miniature.

Face ID, and the death of the password prompt

Biometrics-on-the-camera-side changes the touch model. Touch ID encouraged thumb-down-then-up; Face ID encourages glance-and-go. Every flow that assumed a brief Touch ID pause needs revisiting. Worth thinking about wherever you ask for re-authentication mid-session.

The product implication is bigger than the technical one. Face ID is the first biometric that's invisible to the user — they look at the device, the device unlocks, they continue. There's no 'now I'm authenticated' moment. For apps and web flows that assume an explicit auth step, this either flows nicely (the user proceeds without thinking) or breaks confusingly (the user expects a confirmation and doesn't get one).

Practical changes worth planning for now:

• 01Any payment flow that paused for Touch ID should now flow seamlessly with Face ID; test for any UI that depended on that pause for orientation.
• 02Sites using WebAuthn for biometric login (early days, but coming) should test on Face ID hardware as soon as one's available.
• 03Authentication that requires deliberate user attention should have an explicit confirmation — Face ID is too easy to trigger accidentally for high-value actions.

The home button is gone, and the OS picked the gestures

Bottom-edge gestures replace the home button: swipe up to go home, swipe up and hold to enter the app switcher, swipe down from the top-right corner for Control Center. The 'back' affordance shifts. There's a real chance the next year of iOS apps gets more uniform — when the OS picks the gesture grammar, app makers stop arguing about it.

For web work, the bottom edge of the screen is now reserved for OS gestures. Sticky bottom-bars (a popular pattern in 2017) need a 34-pixel safe area at the bottom so they don't sit inside the gesture zone. Anything that the user might accidentally trigger when reaching for the home indicator is going to feel broken.

Resolution and aspect ratio

• 01iPhone X is 1125×2436, a 19.5:9 aspect ratio — taller than every previous iPhone.
• 02Designs centred on a 16:9 mental model need to be retested in this taller container.
• 03Image hero sections often look cropped at the new ratio. The 'safe area for important imagery' is now narrower than designers have been assuming.
• 04Anything that calculates 'above the fold' from the 2017 iPhone 7 dimensions is going to land in the wrong place on an iPhone X.

"

The iPhone X is the first iPhone in years that asks designers to re-think rather than re-skin. The 6, the 7, the 8 — each was a refinement of the same product. The X is a re-foundation.

What clients are about to ask

• 01'Will our site work on the new iPhone?' — Mostly yes, but only mostly. The notch is a guaranteed cosmetic issue.
• 02'Do we need to redesign for it?' — Not redesign, but audit. Plan a half-day per project, more for complex layouts.
• 03'Can we use Face ID on our website?' — Not directly. WebAuthn will eventually let you, but not in 2017.
• 04'When can we test on a real device?' — November 3rd, when the X ships. Mid-November for serious testing.

The bigger pattern

The iPhone X is the first iPhone in years that asks designers to re-think rather than re-skin. We expect the next three years of Android phones to copy the notch, the gesture grammar, the bezel-less display target — and within those three years, designing for 'a smartphone' will mean designing for what the iPhone X just defined.

Worth a re-test of every iOS-facing client site once we can get our hands on a real device. Worth budgeting the half-day per project, every project. Worth taking the notch seriously even if (especially if) you hate it.