Designing Websites for iPhone X(webkit.org)
webkit.org
Designing Websites for iPhone X
https://webkit.org/blog/7929/designing-websites-for-iphone-x/
134 comments
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.
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.
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.
imagine the disappointment when hearing that you have to write this article
Apple's industrial design team has always had more influence and sway over the final product than their OS/developer teams.
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.
Yeah, I’m not going out of my way anytime soon to design for the X.
Hahaha lmao. I can't believe this is a real thing, that we have to design for one specific device now. Really?
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.
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.
That is what they said, but look at the screenshot of the unmodified website. It looks terrible. They should have filled it with black.
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.
It's less infuriating if you read it in Jony Ive's voice.
Sadly 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.
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.
Nope; just a few lines of CSS and you're good: https://news.ycombinator.com/item?id=15315357
Apple advertised about making a screen that spans the whole device, and now they are pushing the burden to the developer. :(
just no.
I have to agree. This is not bringing anyone but apple further.
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.
Other than the meta tag, the others are W3C specifications:
https://drafts.csswg.org/css-values/#calc-notation https://github.com/w3c/csswg-drafts/issues/1693#issuecomment...
https://drafts.csswg.org/css-values/#calc-notation https://github.com/w3c/csswg-drafts/issues/1693#issuecomment...
Turns out `viewport-fit` is also in the specs: https://www.w3.org/TR/css-round-display-1/#viewport-fit-desc...
Sad 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
Thanks Apple for yet another item we have to deal with because your "special". /s
The defaults ensure that websites that do absolutely nothing to specifically accommodate the iPhone X work just as they did before.
In the 1990s, we just needed to design for three browsers. I guess we actually had it pretty good.
[deleted]
I'll just leave this here:
"I think I’ve fixed the notch issue in landscape #iphoneX"
https://twitter.com/vojtastavik/status/907911237983449088
"I think I’ve fixed the notch issue in landscape #iphoneX"
https://twitter.com/vojtastavik/status/907911237983449088
And if you rotate it 180 degrees, you get this: https://twitter.com/ZevEisenberg/status/908148886363103232
Ha, good god. What a disaster this thing is.
Its a joke; the scroll bar doesn't really do that
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.
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.
Saw a cool implementation of this design on codepen today:
https://codepen.io/davvidbaker/pen/KXgPyG
https://codepen.io/davvidbaker/pen/KXgPyG
I 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.
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.
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.
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.
Device specific extra pixels were a bad idea. Further modifying web design standards to account for them is making the problem ten times as bad. Where's the CSS declaration that tells Safari to make those pixels black so no one has to care about this? Unplanned sections of background color around your header bar is not "displaying existing websites beautifully".
Whether or not Apple does this, others will. The web platform needs a well-considered generic approach to non-rectangular displays to support a widening array of devices: watches, medical devices, decorative displays, industrial controls, e-paper-type displays wrapped around a pipe, etc. They could have multiple panels of different sizes, have holes in the middle (not just the edge), be extremely curved, or whatever.
I'm fine with learning new, standard techniques for dealing with a broadening range of opportunities, but it's annoying to have to learn and incorporate Apple-only technologies in my web apps. But if the standard platform doesn't have a solution, Apple will solve it themselves.
I'm fine with learning new, standard techniques for dealing with a broadening range of opportunities, but it's annoying to have to learn and incorporate Apple-only technologies in my web apps. But if the standard platform doesn't have a solution, Apple will solve it themselves.
Apple is using W3C blessed standards:
* https://github.com/w3c/csswg-drafts/issues/1693#issuecomment...
* https://drafts.csswg.org/css-values/#calc-notation
* https://www.w3.org/TR/css-round-display-1/#viewport-fit-desc... (Apple is doing the meta tag version of the @viewport descriptor)
* https://github.com/w3c/csswg-drafts/issues/1693#issuecomment...
* https://drafts.csswg.org/css-values/#calc-notation
* https://www.w3.org/TR/css-round-display-1/#viewport-fit-desc... (Apple is doing the meta tag version of the @viewport descriptor)
> Apple is doing the meta tag version of the @viewport descriptor
Which means they are in fact NOT using W3C blessed standards.
Which means they are in fact NOT using W3C blessed standards.
OK, I'll say it: this would not have happened under Steve.
Yes, Because Steve Jobs is akin to Jeff Bezos, can run a company focusing on consumer needs rather than lust for wall street. While Tim Cook's job is running the company from Front while also giving hope the shareholders much of what Ballmer Schmidt did.
Maybe this is high time for us to get over this thought, Oh Steve wouldn't have done that. In fact, Steve launched the iPod with a scrolling ball.
Steve launched an iPhone with antennagate.
Steve launched Newton.
Steve, with all due respect, had made his share of mistakes too. He's with no doubt a good product visionary, but Tim Cook's objective isn't to be Steve but to be Apple CEO.
Maybe this is high time for us to get over this thought, Oh Steve wouldn't have done that. In fact, Steve launched the iPod with a scrolling ball.
Steve launched an iPhone with antennagate.
Steve launched Newton.
Steve, with all due respect, had made his share of mistakes too. He's with no doubt a good product visionary, but Tim Cook's objective isn't to be Steve but to be Apple CEO.
In fact, Steve launched the iPod with a scrolling ball.
It was a click wheel, not a scrolling ball. Even now, the click-wheel would be a good UX: https://en.wikipedia.org/wiki/IPod_click_wheel
Steve launched Newton.
Come on now--Steve was at NeXT when the Newton was released. John Sculley launched the Newton.
Steve launched an iPhone with antennagate.
As Apple and Steve demonstrated, most smartphones at that time did the same thing as the iPhone 4; the only difference was it was Apple and not Nokia or Blackberry. And also because Steve was pretty blunt about his feelings and didn't do the corporate CEO thing any other Fortune 500 CEO would have done--https://www.youtube.com/watch?v=IorfYuF4gMM
It was a click wheel, not a scrolling ball. Even now, the click-wheel would be a good UX: https://en.wikipedia.org/wiki/IPod_click_wheel
Steve launched Newton.
Come on now--Steve was at NeXT when the Newton was released. John Sculley launched the Newton.
Steve launched an iPhone with antennagate.
As Apple and Steve demonstrated, most smartphones at that time did the same thing as the iPhone 4; the only difference was it was Apple and not Nokia or Blackberry. And also because Steve was pretty blunt about his feelings and didn't do the corporate CEO thing any other Fortune 500 CEO would have done--https://www.youtube.com/watch?v=IorfYuF4gMM
The click wheel came at v2 or v3. The original had a scroll wheel which actually spun, with buttons around the perimeter.
The click-wheel was great. I miss having such a simple, haptic interface.
Steve didn't launch Newton, it came out in '93. He did kill it though.
Steve said not to think "what would Steve do".
I doubt you could predict what Steve would do when he was alive.
I doubt you could predict what Steve would do when he was alive.
A lot of things wouldn't have. Top of my list:
a) keeping the macbook air non-retina (for like five years after PC laptops were retina, even after the incremental cost for the feature was very, very close to zero due to industry-wide cost reductions in display/chipset tech)
b) shipping the new macbook pro with the touch bar
c) shipping the new macbook pro with that keyboard that just breaks down when used outside of a cleanroom
d) the whole luxuary/jewelry transition of the company
a) keeping the macbook air non-retina (for like five years after PC laptops were retina, even after the incremental cost for the feature was very, very close to zero due to industry-wide cost reductions in display/chipset tech)
b) shipping the new macbook pro with the touch bar
c) shipping the new macbook pro with that keyboard that just breaks down when used outside of a cleanroom
d) the whole luxuary/jewelry transition of the company
d) the whole luxury/jewelry transition of the company
This Steve Jobs? https://www.cultofmac.com/270831/steve-jobs-luxury-yacht-spo...
I don't know where people get the idea that Jobs was always right. He was a master of changing his entire opinion on a dime (usually for good reasons, to be fair) but still acting as if he'd been right the whole time.
This Steve Jobs? https://www.cultofmac.com/270831/steve-jobs-luxury-yacht-spo...
I don't know where people get the idea that Jobs was always right. He was a master of changing his entire opinion on a dime (usually for good reasons, to be fair) but still acting as if he'd been right the whole time.
I really don't see the correlation between his product design/marketing/pricing choices and him owning a yacht? Are you saying I thought he was a closet socialist/communist? (No, I did not. (hah))
The whole thing is that being a jewelry company is intensely boring and mentally uninspiring. Not pushing things forward in any way or manner. Just making them more luxorious in order to increase the margin of the existing market.
How many iterations before we see diamond-encrusted iPhones?
The whole thing is that being a jewelry company is intensely boring and mentally uninspiring. Not pushing things forward in any way or manner. Just making them more luxorious in order to increase the margin of the existing market.
How many iterations before we see diamond-encrusted iPhones?
e) Making product lineups huge and confusing. Once the X becomes available, they'll have eight different models of iPhone you can buy, and that's not even counting different colors or storage options.
Yeah, this choice has been bothering me insanely the last year. I am still on a 5s simply because I can't choose the right model/time. ;(
Still, in my mind, the largest betrayal of Steve's legacy is the way the affordable and awesome Macbook Air design was left to rot. It was such a liberating and democratic thing that the best laptop money could buy cost less than a thousand USD.
The low price also afforded you to not treat them as super expensive objects (which was also liberating) - I actually managed to physically kill two or three of them over the years, until I moved to a 13" MBP this spring. Which I now have to protect like a jewel, which I hate doing. I want my work station to be a tank, not a fashion piece.
All because Apple without Steve couldn't/wouldn't take risks and be innovative (in pricing) in order to expand in the laptop market. Safer for the margins to avoid expanding the user base and instead just milk the already converted suckers.
Still, in my mind, the largest betrayal of Steve's legacy is the way the affordable and awesome Macbook Air design was left to rot. It was such a liberating and democratic thing that the best laptop money could buy cost less than a thousand USD.
The low price also afforded you to not treat them as super expensive objects (which was also liberating) - I actually managed to physically kill two or three of them over the years, until I moved to a 13" MBP this spring. Which I now have to protect like a jewel, which I hate doing. I want my work station to be a tank, not a fashion piece.
All because Apple without Steve couldn't/wouldn't take risks and be innovative (in pricing) in order to expand in the laptop market. Safer for the margins to avoid expanding the user base and instead just milk the already converted suckers.
(Interesting, after meeting the wave of slower readers, all of my comments in this thread were massively downvoted except this one, I guess since I was initially agreeing with someone on HN who is "famous".)
Stay meritocratic, Silicon Valley. Every post is evaluated for its worth, not its sender.
Stay meritocratic, Silicon Valley. Every post is evaluated for its worth, not its sender.
Making product lineups huge and confusing. Once the X becomes available, they'll have eight different models of iPhone you can buy, and that's not even counting different colors or storage options.
What iPhone you get is driven by the economics of what you can afford and your personal taste. It's not that complicated.
There are 5 models:
- iPhone SE - iPhone 6s/6s+ - iPhone 7/7+ - iPhone 8/8+ - iPhone X
It seems that Apple can't win even when they do what most people have wanted for a while: more options at more price points.
If you want to be confused, try to pick among Samsung's phones, some of which are only available on certain carriers or in certain countries and running different versions of the Android operating system.
From the SE to the iPhone X, they all run iOS 11.
What iPhone you get is driven by the economics of what you can afford and your personal taste. It's not that complicated.
There are 5 models:
- iPhone SE - iPhone 6s/6s+ - iPhone 7/7+ - iPhone 8/8+ - iPhone X
It seems that Apple can't win even when they do what most people have wanted for a while: more options at more price points.
If you want to be confused, try to pick among Samsung's phones, some of which are only available on certain carriers or in certain countries and running different versions of the Android operating system.
From the SE to the iPhone X, they all run iOS 11.
The + and non-+ versions are effectively different models, thus eight.
And it seems pretty complicated to me. I imagine a non-technical friend or relative asking me what they should get. In the past, the answer was pretty simple: decide whether you wanted big or small, and get the latest available in that size. Before the 6, I didn't even need that first step. Apple has kept the previous year's model around at a lower price for a long time, but with limited storage options it was obviously positioned as being only for people who couldn't afford to pay any more.
This year I can't even decide for myself whether to get a X, an 8, or just stick with my 6+. If someone asks me whether the X is worth the price premium over the 8, or the 8 over the 7, I won't know what to say.
"It seems that Apple can't win even when they do what most people have wanted for a while: more options at more price points."
I don't understand this statement. Are you surprised that different people have different opinions?
And it seems pretty complicated to me. I imagine a non-technical friend or relative asking me what they should get. In the past, the answer was pretty simple: decide whether you wanted big or small, and get the latest available in that size. Before the 6, I didn't even need that first step. Apple has kept the previous year's model around at a lower price for a long time, but with limited storage options it was obviously positioned as being only for people who couldn't afford to pay any more.
This year I can't even decide for myself whether to get a X, an 8, or just stick with my 6+. If someone asks me whether the X is worth the price premium over the 8, or the 8 over the 7, I won't know what to say.
"It seems that Apple can't win even when they do what most people have wanted for a while: more options at more price points."
I don't understand this statement. Are you surprised that different people have different opinions?
Apple has kept the previous year's model around at a lower price for a long time, but with limited storage options it was obviously positioned as being only for people who couldn't afford to pay any more.
Or who didn't need or want anything more. Most of my older relatives would be with a 16 or 32GB iPhone SE for example.
This year I can't even decide for myself whether to get a X, an 8, or just stick with my 6+. If someone asks me whether the X is worth the price premium over the 8, or the 8 over the 7, I won't know what to say.
Yeah, I get the price/performance thing, but at the end of the day, it comes down to do you want the latest and greatest? Is that something you're willing to pay for?
When Apple Pay shipped, I knew I wanted an iPhone that could do that, so I got a 6s, even though I could have gotten a lower-end model. I knew I didn't want something as big as the 6s Plus, so I didn't get that, even with its dual camera setup, because the photos I can take on the 6s are good enough for me.
It's not a matter of is the price premium of the X worth it vs. the 8 in some objective way; is it worth it to you is all that really matters.
If you can't figure out what to buy, that says to me you haven't gotten clear about what you need vs. what you want and what you're willing to pay for those needs and wants.
Touch-ID works great for me, so I don't need Face-ID. However, I'd love to have an OLED screen iPhone but I'm not willing to pay $999 for it at this time.
Timing is a factor too. If you need a new iPhone right now, that means waiting until December or longer to get an iPhone X isn't really an option, especially if there's a hard deadline. Apple won't achieve supply/demand balance until Q1 or Q2 of 2018.
In some cases, these decisions make themselves.
Or who didn't need or want anything more. Most of my older relatives would be with a 16 or 32GB iPhone SE for example.
This year I can't even decide for myself whether to get a X, an 8, or just stick with my 6+. If someone asks me whether the X is worth the price premium over the 8, or the 8 over the 7, I won't know what to say.
Yeah, I get the price/performance thing, but at the end of the day, it comes down to do you want the latest and greatest? Is that something you're willing to pay for?
When Apple Pay shipped, I knew I wanted an iPhone that could do that, so I got a 6s, even though I could have gotten a lower-end model. I knew I didn't want something as big as the 6s Plus, so I didn't get that, even with its dual camera setup, because the photos I can take on the 6s are good enough for me.
It's not a matter of is the price premium of the X worth it vs. the 8 in some objective way; is it worth it to you is all that really matters.
If you can't figure out what to buy, that says to me you haven't gotten clear about what you need vs. what you want and what you're willing to pay for those needs and wants.
Touch-ID works great for me, so I don't need Face-ID. However, I'd love to have an OLED screen iPhone but I'm not willing to pay $999 for it at this time.
Timing is a factor too. If you need a new iPhone right now, that means waiting until December or longer to get an iPhone X isn't really an option, especially if there's a hard deadline. Apple won't achieve supply/demand balance until Q1 or Q2 of 2018.
In some cases, these decisions make themselves.
And in some cases, the bewildering array of options makes the decision difficult.
I don't even know if the X is actually better than the 8 for me, let alone whether it's worth the price premium. Things have really gone sideways with the X, because there's no longer an obvious best. The X is worse than the 8 in important ways, like no Touch ID and no home button. It's better in other ways. Which one wins? I don't know.
Back to the topic of things that wouldn't have happened under Steve, pre-Steve Apple had a vast and baffling Mac lineup. Steve eventually simplified it down to four basic offerings, one for each combination of (cheap, pro) and (desktop, portable). iPhones were even simpler. You lose out on choice, but you win on simplicity. Steve much preferred the simplicity of fewer choices. I don't mind having choices now, but it may very well end up costing Apple a sale this time: the more I waffle between the 8 and the X, the more likely I'll just decide to keep my 6+ for another year.
I don't even know if the X is actually better than the 8 for me, let alone whether it's worth the price premium. Things have really gone sideways with the X, because there's no longer an obvious best. The X is worse than the 8 in important ways, like no Touch ID and no home button. It's better in other ways. Which one wins? I don't know.
Back to the topic of things that wouldn't have happened under Steve, pre-Steve Apple had a vast and baffling Mac lineup. Steve eventually simplified it down to four basic offerings, one for each combination of (cheap, pro) and (desktop, portable). iPhones were even simpler. You lose out on choice, but you win on simplicity. Steve much preferred the simplicity of fewer choices. I don't mind having choices now, but it may very well end up costing Apple a sale this time: the more I waffle between the 8 and the X, the more likely I'll just decide to keep my 6+ for another year.
Things have really gone sideways with the X, because there's no longer an obvious best. The X is worse than the 8 in important ways, like no Touch ID and no home button. It's better in other ways. Which one wins? I don't know.
I think you're over thinking this—the iPhone X is by far the best phone anyone has ever made. Think of it as the deluxe iPhone 8.
You're assuming Face-ID is a detriment; however, Apple wouldn't have shipped it unless it was as at least as good as Touch-ID. Perhaps you should read something from someone who's used one: https://daringfireball.net/2017/09/iphone_x_event_thoughts_a....
Being a long time Apple observer, both professionally and personally, I call bullshit on this "Steve wouldn't have done this or that" crap.
Things change; Steve was known to change his mind when that was the right thing to do. What Steve did back in 1997 with the 4-product matrix is what Apple needed then, a company that had lost its way. Apple's total revenue then was a little over $7 billion; now $50 billion quarters are routine.
Apple has sold over 1 billion iPhones since 2007; it generates around 66% of its revenue. It clearly makes sense to have different models available for different consumers, not just in the US but globally, where more than half of its revenue comes from.
It wouldn't be possible to keep up this momentum if they only sold the newest and most expensive phones without being accessible to those who who need a device 1/3 or 1/2 of the price of an iPhone X.
I think you're over thinking this—the iPhone X is by far the best phone anyone has ever made. Think of it as the deluxe iPhone 8.
You're assuming Face-ID is a detriment; however, Apple wouldn't have shipped it unless it was as at least as good as Touch-ID. Perhaps you should read something from someone who's used one: https://daringfireball.net/2017/09/iphone_x_event_thoughts_a....
Being a long time Apple observer, both professionally and personally, I call bullshit on this "Steve wouldn't have done this or that" crap.
Things change; Steve was known to change his mind when that was the right thing to do. What Steve did back in 1997 with the 4-product matrix is what Apple needed then, a company that had lost its way. Apple's total revenue then was a little over $7 billion; now $50 billion quarters are routine.
Apple has sold over 1 billion iPhones since 2007; it generates around 66% of its revenue. It clearly makes sense to have different models available for different consumers, not just in the US but globally, where more than half of its revenue comes from.
It wouldn't be possible to keep up this momentum if they only sold the newest and most expensive phones without being accessible to those who who need a device 1/3 or 1/2 of the price of an iPhone X.
The argument that Apple wouldn’t ship it if it wasn’t great is crap. Is Apple incapable of mistakes?
Perhaps you should trust my evaluation of these models, when it comes to my own purchasing decisions?
Will Face ID work well? I bet it will. Will it work better for me than Touch ID? I have no idea. And Gruber’s brief experience with it tells me nothing. His tastes and mine do not align much.
Perhaps you should trust my evaluation of these models, when it comes to my own purchasing decisions?
Will Face ID work well? I bet it will. Will it work better for me than Touch ID? I have no idea. And Gruber’s brief experience with it tells me nothing. His tastes and mine do not align much.
>You're assuming Face-ID is a detriment; however, Apple wouldn't have shipped it unless it was as at least as good as Touch-ID.
What an odd argument. Couldn't you have used the same argument for removing the headphone jack? And yet, the iPhone 7's lack of one was a detriment to me.
What an odd argument. Couldn't you have used the same argument for removing the headphone jack? And yet, the iPhone 7's lack of one was a detriment to me.
The + and non-+ versions are effectively different models, thus eight.
Besides the size, the only difference are the camers between the Plus and non-Plus models.
Besides the size, the only difference are the camers between the Plus and non-Plus models.
In other words, besides the massive obvious difference between the two models, they also have another difference?
(And just to be complete, battery life is different too.)
(And just to be complete, battery life is different too.)
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.
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.
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:
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
I think we're going to be okay.
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));
}
}
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
I think we're going to be okay.
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.
The only other change is the W3C decided to rename "constant" to "env", since these are essentially environment variables for browsers.
You can read all about it at https://github.com/w3c/csswg-drafts/issues/1693#issuecomment...
You can read all about it at https://github.com/w3c/csswg-drafts/issues/1693#issuecomment...
How many websites do you manage? How many wordpress installs and custom themes have to be updated?
None; it letterboxes the website by default: https://webkit.org/blog/7929/designing-websites-for-iphone-x...
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.
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.
Does Apple want people to design custom websites for iPhone X, or is it more likely Apple want's people to make iOS apps instead of websites when that level of tailoring matters?
I still use the web on an iPhone 5S. Even with cropping bars at the top and bottom of a website, the iPhone X view will be improved over the 5S view and it'll look exactly like a website looks on my 5S today - rectangular website framed by a black bezel with rounded corners.
I still use the web on an iPhone 5S. Even with cropping bars at the top and bottom of a website, the iPhone X view will be improved over the 5S view and it'll look exactly like a website looks on my 5S today - rectangular website framed by a black bezel with rounded corners.
Safari automatically insets your webpage, so you don't have to do anything if you don't want to unless you want to use the full area.
Too bad more people aren't reading this before whingeing in the comments.
Well, 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.
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.
Yes, black with system icons would have been better.
PS: Does it also extend the "background-image" property?
PS: Does it also extend the "background-image" property?
After a bit of experimentation, this seems to work to create a letterbox (really pillarbox) effect, as long as you don't add their new viewport-fit property.
html {
background-color: black;
}There 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.
I agree, I would've liked to see a letterboxed solution, similar to what they do for fullscreen video.
[deleted]
I believe the same colour is used to fill the blank area due to scroll bounce.
Appreciate the quick summary. Was thinking I was going to have start editing a bunch of media queries.
I think it would be much better if it was black on the edge like a letter boxed video.
[deleted]
How does this work on the essential phone, with a similar inset on the front?
The default is your website gets padded so the unique design "features" don't interfere with your current design.
That's fine by me.
That's fine by me.
So, 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.
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.
But the things they added aren't behind a runtime flag, but enabled by default and without any prefix, yet not standardized.
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.
I have no idea whether or not there's a WG resolution because the WG is terrible at tracking resolutions.
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
min() and max()
Keep in mind that this is mostly a problem in landscape mode and roughly 90% of usage is in portrait mode.
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.
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.
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
The link in the article will take you to the current specification: https://drafts.csswg.org/css-values/#calc-notation
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
The link in the article will take you to the current specification: https://drafts.csswg.org/css-values/#calc-notation
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
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.
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.
Yeah it is surprising to see such a hacky design when they literally only had one use case.
I also don’t understand why all browsers are adding css properties just to support the new iPhone, but maybe I don’t understand how this committee works.
I also don’t understand why all browsers are adding css properties just to support the new iPhone, but maybe I don’t understand how this committee works.
It's not just for the iPhone X.
There are browsers in refrigerators, e-readers, game consoles, smart TVs, kiosks and who knows what else. There will be lots of devices that can take advantage of these new properties, not just the iPhone X.
There are browsers in refrigerators, e-readers, game consoles, smart TVs, kiosks and who knows what else. There will be lots of devices that can take advantage of these new properties, not just the iPhone X.
yeah so nice! we couldn't use the top area, then the bottom area, and now not even the sides.
This is horrifying. We shouldn't be encouraging device makers to create random bits of new css syntax to cover their weird viewports.
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.
I hope that palm rejection will be as good as in new Macbook Pro 15 inch with giant trackpad.
Someone needs to make a JS lib that adds a black notch to the other side of one's website.
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.
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.
I frankly thought it was going to be a bit more of a mess than this so I'm pleasantly surprised.
> 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.
> 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.
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)
[0] https://en.wikipedia.org/wiki/Safe_area_(television)
Even now, years later, people who use televisions as monitors suffer if they don't know how to disable overscan on said screen.
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.
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.
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/
[1]: https://www.w3.org/TR/css-round-display-1/
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.
No Apple, we won't change all our websites for your new gimmick.
You don’t need to. They seem to have a sensible default.
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.
"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!
What a travesty this has become. If Steve was alive, he would say, “Your work is #$*&%T!”
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.
They are using standards: https://news.ycombinator.com/item?id=15315357
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?
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.
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.
> [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 ;-)
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 ;-)
Courage.
Oh man this is uncool! Yet another thing to worry about!
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...)
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...)
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.