I'll just leave this here: "I think I’ve fixed the notch issue in landscape #iphoneX" https://twitter.com/vojtastavik/status/907911237983449088
Saw a cool implementation of this design on codepen today:
Designing Websites for iPhone X
31–40 of 135 posts
Re: Designing Websites for iPhone X
#32The 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.
Re: Designing Websites for iPhone X
#33"dear developers, fuck you. again."
- Apple
Re: Designing Websites for iPhone X
#34> 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.
Re: Designing Websites for iPhone X
#35I 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 fi…
yeah so nice! we couldn't use the top area, then the bottom area, and now not even the sides.
Re: Designing Websites for iPhone X
#36So, the standard for constant() will have a different name/syntax but they put it without any prefix? Why?
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/
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.
Re: Designing Websites for iPhone X
#37In the 1990s, we just needed to design for three browsers. I guess we actually had it pretty good.
[deleted]
Re: Designing Websites for iPhone X
#38Keep in mind that this is mostly a problem in landscape mode and roughly 90% of usage is in portrait mode.
AKA "You're holding it wrong"
Re: Designing Websites for iPhone X
#39This 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.
Re: Designing Websites for iPhone X
#40What 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.