11 ms·
Designing Websites for iPhone X
- thebiglebrewski 9y agoHahaha lmao. I can't believe this is a real thing, that we have to design for one specific device now. Really?
- amelius 9y agoApple advertised about making a screen that spans the whole device, and now they are pushing the burden to the developer. :(
- ohkaiby 9y agoIt's less infuriating if you read it in Jony Ive's voice.
- noir_lord 9y agoSadly that is more infuriating. Luxurious, hand crafted, precision infuriating, we went all over the world and collected only the best infuriating and merged it seamlessly into your rage. Few people irritate me (that I haven't met) more than that guy does. It's irrational but there it is.
- mrks_ 9y agoNo, 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 9y agoThat is what they said, but look at the screenshot of the unmodified website. It looks terrible. They should have filled it with black.
- tqkxzugoaupvwqr 9y agoFilling 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.
- alwillis 9y agoNope; just a few lines of CSS and you're good: https://news.ycombinator.com/item?id=15315357 https://news.ycombinator.com/item?id=15315357
- modzu 9y agojust no.
- Roritharr 9y agoI have to agree. This is not bringing anyone but apple further.
- phinnaeus 9y agoThe 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 9y agoOther 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-330909067 https://github.com/w3c/csswg-drafts/issues/1693#issuecomment...
- alwillis 9y agoTurns out `viewport-fit` is also in the specs: https://www.w3.org/TR/css-round-display-1/#viewport-fit-descriptor https://www.w3.org/TR/css-round-display-1/#viewport-fit-desc...
- sschueller 9y agoSad thing is I won't the the option to say no because some customer is going to complain that that his site doesn't work on his iPhone X and that some other websites work fine. Thanks Apple for yet another item we have to deal with because your "special". /s
- ovao 9y agoThe defaults ensure that websites that do absolutely nothing to specifically accommodate the iPhone X work just as they did before.
- charlesism 9y agoIn the 1990s, we just needed to design for three browsers. I guess we actually had it pretty good.
- deleted 9y ago[deleted]
- hamax 9y agoI'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 9y agoAnd if you rotate it 180 degrees, you get this: https://twitter.com/ZevEisenberg/status/908148886363103232 https://twitter.com/ZevEisenberg/status/908148886363103232
- whipoodle 9y agoHa, good god. What a disaster this thing is.
- ihuman 9y agoIts a joke; the scroll bar doesn't really do that
- whipoodle 9y agoYes, 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.
- developer2 9y agoI hope that guy is showing that off as satire to show just how ridiculous the iPhone X's design really is, rather than providing a real-world solution. The concept of a truly full-screen device is what everyone is waiting for. That's the future. Until the engineering manages to reach that point, Apple should have restrained themselves from releasing this kind of unpolished product. Sometimes, when you can only get to 80% of what you're aiming for, it's better to put the project on the back burner until you can reach the 100%. The iPhone X looks like an unfinished prototype, not the result of professionals who understand that sometimes you need to take a step back.
- YooLi 9y agoOut 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.
- mrks_ 9y agoToo bad more people aren't reading this before whingeing in the comments.
- bhauer 9y agoWell, except that the default behavior pulls the background color into the irregular areas, which will probably yield some unexpected and less than desired results for sites that don't expect the background color to fill space to the left and right of the content. I think a more sensible default would have been to fill the irregular space with black to create a letterboxed appearance. Basically reduce the irregular space to inactive unless specifically requested by the site's designer.
- deleted 9y ago[deleted]
- amelius 9y agoYes, black with system icons would have been better. PS: Does it also extend the "background-image" property?
- mrks_ 9y agoThere are a fair amount of reasonable concerns and suggestions in this thread (at least, now there are). I agree, I would've liked to see a letterboxed solution, similar to what they do for fullscreen video.
- jclardy 9y ago
- deleted 9y ago[deleted]
- bowmessage 9y agoHow does this work on the essential phone, with a similar inset on the front?
- IanDrake 9y agoThe default is your website gets padded so the unique design "features" don't interfere with your current design. That's fine by me.
- euyyn 9y agoWhat's the slim vertical bar by the left side of the phone (if held in portrait mode)?
- geoffpado 9y agoThat'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.
- pietroalbini 9y agoSo, the standard for constant() will have a different name/syntax but they put it without any prefix? Why?
- alwillis 9y agoThe 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 9y agoBut the things they added aren't behind a runtime flag, but enabled by default and without any prefix, yet not standardized.
- alwillis 9y agoBecause 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.
- gsnedders 9y agohttps://www.w3.org/TR/css-2017/#future-proofing https://www.w3.org/TR/css-2017/#future-proofing is the current WG policy. I have no idea whether or not there's a WG resolution because the WG is terrible at tracking resolutions.
- barumrho 9y agoKeep in mind that this is mostly a problem in landscape mode and roughly 90% of usage is in portrait mode.
- dylan-m 9y agoI 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.
- LoSboccacc 9y agoyeah so nice! we couldn't use the top area, then the bottom area, and now not even the sides.
- alwillis 9y agoWith 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 9y agomin() 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.
- fournm 9y agoThis is horrifying. We shouldn't be encouraging device makers to create random bits of new css syntax to cover their weird viewports.
- alwillis 9y agohttps://news.ycombinator.com/item?id=15314778 https://news.ycombinator.com/item?id=15314778
- disease 9y agoIs 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 9y agoI hope that palm rejection will be as good as in new Macbook Pro 15 inch with giant trackpad.
- ceejayoz 9y agoSomeone needs to make a JS lib that adds a black notch to the other side of one's website.
- hugozap 9y agoOptimizing the Web for the rich minority.
- shinratdr 9y agoThe rich minority are also the people who pay money for stuff, which is typically the goal of most websites.
- jws 9y agoIt 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.
- bbrunner 9y agoThe 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.
- LoSboccacc 9y ago"dear developers, fuck you. again." - Apple
- athenot 9y ago> 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.
- MiddleEndian 9y agoEven now, years later, people who use televisions as monitors suffer if they don't know how to disable overscan on said screen.
- cs2818 9y agoDefinitely 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)
- vladdanilov 9y agoThis 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.
- bla2 9y agoWhat 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.
- alejandromaka 9y agoimagine the disappointment when hearing that you have to write this article
- mcast 9y agoApple's industrial design team has always had more influence and sway over the final product than their OS/developer teams.
- aeriklawson 9y agoI 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.
- Ajedi32 9y agoMight 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/
- pier25 9y agoI 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 9y agoYou don’t need to. They seem to have a sensible default.
- CodeWriter23 9y agoIf 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.
- zwily 9y agoApple isn’t asking you to do anything. They’re just describing how to customize the behavior if you want to.
- pier25 9y agoMy point is that the simple fact Apple is even thinking about the possibility is wrong.
- amimetic 9y ago"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!
- jotjotzzz 9y agoWhat a travesty this has become. If Steve was alive, he would say, “Your work is #$*&%T!”
- jacquesm 9y agoThere 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 9y agoThey are using standards: https://news.ycombinator.com/item?id=15315357 https://news.ycombinator.com/item?id=15315357
- nnd 9y agoThis 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?
- sandov 9y agoCourage.
- tqkxzugoaupvwqr 9y agoMy 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 9y ago> [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 ;-)
- linkmotif 9y agoOh man this is uncool! Yet another thing to worry about!
- kareldonk 9y agoThis is one of the stupidest things apple has done.
- iainmerrick 9y agoAfter 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...)
- codetoliveby 9y agoReminds 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.
- __warlord__ 9y agoAll 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.
- traviswingo 9y agoYeah, I’m not going out of my way anytime soon to design for the X.