
Designing Websites for iPhone X - stablemap
https://webkit.org/blog/7929/designing-websites-for-iphone-x/
======
YooLi
_Out of the box, Safari displays your existing websites beautifully on the
edge-to-edge display of the new iPhone X. Content is automatically inset
within the display’s safe area so it is not obscured by the rounded corners,
or the device’s sensor housing._

Default behavior is for you to do nothing to your code and Safari on the X
will automatically pad around the inset and rounded corners. This is just if
you _want_ to take advantage of the whole screen.

~~~
amelius
But in any case you can do that by making your website a little smaller on
iphonex screens.

That's not the problem! That's one line of CSS.

The problem is that now we are expected to design for this non-rectangular
screen, taking "advantage" of the little gaps at the sides, and perhaps fill
them with little buttons in creative ways.

So that's the real problem.

This will cost us (developers) extra time.

Instead, I think Apple would have done a better job if they filled those
corners with system icons.

~~~
alwillis
_This will cost us (developers) extra time._

I just added 'viewport-fit=cover' to my project and boy am I tired! ;-)

In the words of Aaron Rogers: relax.

The CSS frameworks (Foundation, Bootstrap, etc.) will have this baked in the
next time they're updated.

Compared to the drama we as web developers have dealt with in the past, this
is pretty minor. Apple gives you the CSS you need:

    
    
      @supports(padding: max(0px)) {
         .post {
            padding-left: max(12px, constant(safe-area-inset-left));
            padding-right: max(12px, constant(safe-area-inset-right));
         }
      }
    

And if you have a recent Mac, you can test it in Xcode 9's iPhone X simulator.

We as developers have plenty of time: the iPhone X can't be preordered until
October 27; the first customers won't have them until November 3rd at the
earliest: [https://www.apple.com/shop/buy-
iphone/iphone-x](https://www.apple.com/shop/buy-iphone/iphone-x)

I think we're going to be okay.

~~~
amelius
Just wait until everybody else starts filling those gaps with cute little
icons. Your boss will come in one morning, ordering you to move the buttons
from the main page to the corners, but of course _only_ for the iphonex. And
before you know it, you'll be spending a day on boring CSS work, and several
days in the future on maintenance and compatibility problems. You're not a
technologist anymore; you've become a slave of fashion trends.

~~~
rhencke
Thinking up disastrous conclusions to a cosmetic, optional, opt-in style
feature affecting a very low percentage of your audience is a bit dramatic,
no?

~~~
amelius
It seems like a quite realistic scenario to me.

------
athenot
> Respecting the Safe Areas

> _The next step towards making our page usable again after adopting viewport-
> fit=cover is to selectively apply padding to elements that contain important
> content, in order to ensure that they are not obscured by the shape of the
> screen._

This is taking me back to the era of TV on CRT screens. Since there was always
a bit of overscan, it was never a guarantee that the content at the very edge
would actually end up visible to the end users, so the industry adopted a
"safe area" 80-90% in each dimension (5-10% margin on each edge). Camera
operators would avoid framing content such that important items are in that
zone, and title generators would account for that margin to avoid having part
of a text/subtitle cut off.

We've come full circle.

~~~
cs2818
Definitely so. Even though it's rarely an issue today, I cannot escape
thinking of title-safe and action-safe [0] while editing.

[0]
[https://en.wikipedia.org/wiki/Safe_area_(television)](https://en.wikipedia.org/wiki/Safe_area_\(television\))

------
dylan-m
I was ready to be annoyed by this, and it is a ridiculous design, but the
article is a pretty good discussion of CSS's round display extensions. Those
have been sort of sitting around gathering dust as far as I can tell, but the
idea seems pretty cool and potentially useful. I like that they're proposing a
safe area constant, which makes a lot of sense. This is a really great way to
see it all actually working and figure out what still needs to happen.

With that said, they lose the plot a bit when the iPhone X's safe area adds
unnecessary padding outside of the notch, and then double down on that mistake
when they talk about their brand new `min()` and `max()` functions. When you
start combining math functions in CSS, you need to back up and ask what you
did wrong, because you definitely did something wrong.

What you _should_ do is add some padding for the safe area, which might be 0,
and then add some more padding (of your choosing) beyond that. Same way any
other screen works. But it's Apple, so it will probably end with everyone
forced to make the same stupid mistake and then we'll need a new standard to
get rid of it all.

Anyway, grumbles aside, I think Apple deserves kudos here for pushing forward
some existing standards in a mostly constructive way.

~~~
alwillis
_With that said, they lose the plot a bit when the iPhone X 's safe area adds
unnecessary padding outside of the notch, and then double down on that mistake
when they talk about their brand new `min()` and `max()` functions._

These functions aren’t Apple’s and they're not new.

There was a proposal a year ago to add them back to CSS, which means they were
existed in some W3C or WHATWG specification proposal before that:
[https://github.com/w3c/csswg-drafts/issues/544](https://github.com/w3c/csswg-
drafts/issues/544)

The link in the article will take you to the current specification:
[https://drafts.csswg.org/css-values/#calc-
notation](https://drafts.csswg.org/css-values/#calc-notation)

~~~
om2
min() and max() are actually super useful beyond handling the iPhone X safe
areas, here's a Tweet with some examples of other ways to use it:
[https://twitter.com/iamvdo/status/910074435159420928](https://twitter.com/iamvdo/status/910074435159420928)

In brief, it lets you replace the "CSS locks" pattern which is a super awkward
way to apply clamping to a flexible size. min()/max() makes it much easier.

------
hamax
I'll just leave this here:

"I think I’ve fixed the notch issue in landscape #iphoneX"

[https://twitter.com/vojtastavik/status/907911237983449088](https://twitter.com/vojtastavik/status/907911237983449088)

~~~
ihuman
And if you rotate it 180 degrees, you get this:
[https://twitter.com/ZevEisenberg/status/908148886363103232](https://twitter.com/ZevEisenberg/status/908148886363103232)

~~~
whipoodle
Ha, good god. What a disaster this thing is.

~~~
ihuman
Its a joke; the scroll bar doesn't really do that

~~~
whipoodle
Yes, I'm aware. These people are telling jokes about it for a reason.

The reason for this particular joke is that the notch occludes the scroll
indicator in that orientation, which should just be unacceptable. And yet,
here we are, telling each other what a joke is.

------
bla2
What a mess. My condolences to the Apple engineers who had to implement this.
The notch is probably something that marketing thinks is really important for
branding reasons, but I'd guess most engineers dislike it. Yet some of them
had to add all this complexity to their codebase.

~~~
aeriklawson
I think Apple (and especially Ive) would definitely prefer if the phone was
notchless and 100% display.

The issue is where you put the various sensors on the front - even with just a
camera you’re still going to have a notch (see the Essential phone) until we
can use these sensors behind an OLED screen.

Phone manufacturers are going to be shooting for the bezelless design for the
foreseeable future so this issue isn’t something that’s going to be isolated
to Apple alone.

The alternative is an asymmetrical bezel, which is “less sexy and cool” than
the (mostly) edgeless design. Defaulting to this avoids the problem, but
you’re no longer hip.

This is another weird case of being in a transitionary period (wireless
headphones is another) of functional design. Until the kinks are worked out,
we’re just gonna have to deal with the weirdness because it’s not going away.

------
fournm
This is horrifying. We shouldn't be encouraging device makers to create random
bits of new css syntax to cover their weird viewports.

~~~
alwillis
[https://news.ycombinator.com/item?id=15314778](https://news.ycombinator.com/item?id=15314778)

------
amimetic
"Out of the box, Safari displays your existing websites beautifully on the
edge-to-edge display of the new iPhone X." ... scroll down to _their_ first
screen shot and it becomes clear this is just not true!

------
bbrunner
The default behavior is less than great, but it's serviceable at the very
least. It would be nice if they tried to be a little smarter and took the
background-color of any full-width elements and stretched that out into the
insets.

I frankly thought it was going to be a bit more of a mess than this so I'm
pleasantly surprised.

------
disease
Is every single part of the iPhone X screen sensitive to touch? Because I
already have enough problems handling my Samsung phone without accidentally
'clicking' on things because of the small bezels. I wonder if there is an
option to ignore input when touching the very edges of the screen.

~~~
luigi23
I hope that palm rejection will be as good as in new Macbook Pro 15 inch with
giant trackpad.

------
Ajedi32
Might also be worth mentioning the [CSS Round Display Level 1 spec][1].
Unusually-shaped displays aren't a problem unique to the iPhone X.

[1]: [https://www.w3.org/TR/css-round-display-1/](https://www.w3.org/TR/css-
round-display-1/)

------
jacquesm
There is absolutely no way I will change one bit on my website to accommodate
some new device. Devices should be built with standards in mind.

~~~
alwillis
They are using standards:
[https://news.ycombinator.com/item?id=15315357](https://news.ycombinator.com/item?id=15315357)

------
pier25
I like that the Webkit team decided to use standard features to solve this,
but OTOH having to add custom safe areas for a single device goes against any
common sense.

No Apple, we won't change all our websites for your new gimmick.

~~~
Gaelan
You don’t need to. They seem to have a sensible default.

~~~
CodeWriter23
If by “sensible” you mean take a device with a larger screen and reduce it to
have the same usable screen real estate as the “lesser” 8 Plus, with bonus
Screen Goiters on each side, then I would have to agree with you.

------
charlesism
In the 1990s, we just needed to design for three browsers. I guess we actually
had it pretty good.

------
IanDrake
The default is your website gets padded so the unique design "features" don't
interfere with your current design.

That's fine by me.

------
nnd
This is mindboggling to me why Apple designers thought it would be a good idea
to have that black inset in the new iPhone, any ideas what's the reason behind
that product decision?

~~~
tqkxzugoaupvwqr
My guess: Since the bezel is thin on three sides, they didn’t want to give the
phone a big forehead by planting a comparatively big black bar at the top.

I think their solution is bad. The inset makes the front of the phone look
busy/unclean/techie. It’s lacking elegance. They should have reduced the left
and right bezel to nearly zero and added a small bezel at the bottom that
matches the one at the top to create symmetry. Basically, just shrunken iPhone
7 bezels on all sides and a rectangular screen.

Edit: If rumors were true and they wanted to put Touch ID below the screen,
their goal might have been a phone with the same bezel thickness on all sides.
But Touch ID below the screen didn’t work and they had to add sensors to
compensate – compromising by creating an inset.

~~~
robocat
> [they should have] added a small bezel at the bottom that matches the one at
> the top to create symmetry

This is a terrible idea - you can’t quickly tell which way the phone goes up.
Have you used a Moto G2?

you should also try to be less arrogant when talking about the work of others
;-)

------
jws
It would be nice to also expose these CSS features for people with extra
rugged cases. Frequently they can't touch the edges of the screen or even
necessarily see it all.

~~~
mi100hael
> Let's create new CSS features for people who intentionally cover parts of
> their screen

No thanks.

------
bowmessage
How does this work on the essential phone, with a similar inset on the front?

------
barumrho
Keep in mind that this is mostly a problem in landscape mode and roughly 90%
of usage is in portrait mode.

~~~
yeezul
AKA "You're holding it wrong"

~~~
randyrand
Finally someone that understands! A phone should work in any orientation. I
primarily use my phone with the display facing the ground, and its ridiculous
that you can't see the display!

------
vladdanilov
This is just a poorly designed device front face, and the article attempts to
hide some of the issues:

1\. The scroll bar is disappearing under the notch when it's on the other
side.

2\. The chosen example has a solid color background while websites often have
complex edge-to-edge ones which look even worse with the insets.

3\. The home indicator and the round corners now permanently block some
content at the bottom and edges in any orientation.

4\. Objects in the vicinity of the prominent round corners will often look
inharmonious, poorly clipped, etc.

------
jotjotzzz
What a travesty this has become. If Steve was alive, he would say, “Your work
is #$*&%T!”

------
pietroalbini
So, the standard for constant() will have a different name/syntax but they put
it without any prefix? Why?

~~~
alwillis
_The current consensus among browser implementors is that, on the whole,
prefixed properties have hurt more than they’ve helped. So, WebKit’s new
policy is to implement experimental features unprefixed, behind a runtime
flag._ : [https://webkit.org/blog/6131/updating-our-prefixing-
policy/](https://webkit.org/blog/6131/updating-our-prefixing-policy/)

As the article states, prefixes have created a set of problems, which is why
Apple, Google, Mozilla and Microsoft stopped using them for new features.

~~~
pietroalbini
But the things they added aren't behind a runtime flag, but enabled by default
_and_ without any prefix, yet not standardized.

~~~
alwillis
Because these specs are in progress at the W3C, so they don't need to be
prefixed or hidden in some way:
[https://news.ycombinator.com/item?id=15314812](https://news.ycombinator.com/item?id=15314812)

    
    
      min() and max()
    

Haven't been enabled in iOS 11 yet, as the article states.

------
iainmerrick
After wondering for a second how people were testing this stuff, I realized I
could just fire up the Simulator from the new version of Xcode that just
updated itself.

Pretty cool that it's so easy to try out! And especially that you don't have
to blow $1000 on a real device if you don't want to.

(Sucks if you're not using OS X, of course...)

------
ceejayoz
Someone needs to make a JS lib that adds a black notch to the other side of
one's website.

------
euyyn
What's the slim vertical bar by the left side of the phone (if held in
portrait mode)?

~~~
geoffpado
That's the home indicator. It's always on the bottom of the screen (so, in
portrait, it would not be on the left). It's used to show users where to swipe
up in order to close the current app.

------
__warlord__
All in the name of selfies. Seriously, you can have a touch ID on the side, a
speaker with beam? technology and no notch, but that would not have appealed
the selfie generation.

------
codetoliveby
Reminds a whole lot about remembering to use prefixes in CSS when building
browser compatible sites. I use a tool to automate this nowadays but this is
just flat out silly.

------
traviswingo
Yeah, I’m not going out of my way anytime soon to design for the X.

------
thebiglebrewski
Hahaha lmao. I can't believe this is a real thing, that we have to design for
one specific device now. Really?

~~~
mrks_
No, the article even says:

Out of the box, Safari displays your existing websites beautifully on the
edge-to-edge display of the new iPhone X. Content is automatically inset
within the display’s safe area so it is not obscured by the rounded corners,
or the device’s sensor housing.

~~~
hungerstrike
That is what they said, but look at the screenshot of the unmodified website.
It looks terrible. They should have filled it with black.

~~~
tqkxzugoaupvwqr
Filling it with black would be the most sensible solution. Especially since
it’s an OLED display. Their current solution is to fuck with the original
website design. Maybe the website devs wanted their horizontal bars to stretch
from edge to edge and not be padded by whitespace? Quite brazen of Apple to
interfere this prominently with other people’s work.

------
modzu
just no.

~~~
Roritharr
I have to agree. This is not bringing anyone but apple further.

~~~
phinnaeus
The best part is how all of these features are Safari/iOS 11 only -- except
for the ones that aren't even part of that, and are experimental.

~~~
alwillis
Other than the meta tag, the others are W3C specifications:

[https://drafts.csswg.org/css-values/#calc-
notation](https://drafts.csswg.org/css-values/#calc-notation)
[https://github.com/w3c/csswg-
drafts/issues/1693#issuecomment...](https://github.com/w3c/csswg-
drafts/issues/1693#issuecomment-330909067)

------
hugozap
Optimizing the Web for the rich minority.

~~~
shinratdr
The rich minority are also the people who pay money for stuff, which is
typically the goal of most websites.

------
linkmotif
Oh man this is uncool! Yet another thing to worry about!

