Designing Websites for iPhone X
webkit.org
webkit.org
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.
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.
* 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)
Which means they are in fact NOT using W3C blessed standards.
body { background-color: black; }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.
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
I doubt you could predict what Steve would do when he was alive.
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
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.
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?
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.
Stay meritocratic, Silicon Valley. Every post is evaluated for its worth, not its sender.
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.
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?
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.
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 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.
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.
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.
Besides the size, the only difference are the camers between the Plus and non-Plus models.
(And just to be complete, battery life is different too.)
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.
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.
You can read all about it at https://github.com/w3c/csswg-drafts/issues/1693#issuecomment...
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.
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 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.
PS: Does it also extend the "background-image" property?
html {
background-color: black;
}I agree, I would've liked to see a letterboxed solution, similar to what they do for fullscreen video.
> 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.
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.
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
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.
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.
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.
"I think I’ve fixed the notch issue in landscape #iphoneX"
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 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 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.
I frankly thought it was going to be a bit more of a mess than this so I'm pleasantly surprised.
No Apple, we won't change all our websites for your new gimmick.
That's fine by me.
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.
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 ;-)
No thanks.
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.
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.
min() and max()
I have no idea whether or not there's a WG resolution because the WG is terrible at tracking resolutions.
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...)
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.
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.
https://drafts.csswg.org/css-values/#calc-notation https://github.com/w3c/csswg-drafts/issues/1693#issuecomment...
Thanks Apple for yet another item we have to deal with because your "special". /s