Live data from Hacker News

Designing Websites for iPhone X

webkit.org

71–80 of 135 posts

Re: Designing Websites for iPhone X

#72
post #56

Earlier quoted context omitted.

OK, I'll say it: this would not have happened under Steve.

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…

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.

Re: Designing Websites for iPhone X

#73
post #72

Earlier quoted context omitted.

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…

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.

Re: Designing Websites for iPhone X

#75
post #47
post #8

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_ t…

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 thi…

This will cost us (developers) extra time.

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

In the words of Aaron Rogers: relax.

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

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

  @supports(padding: max(0px)) {
     .post {
        padding-left: max(12px, constant(safe-area-inset-left));
        padding-right: max(12px, constant(safe-area-inset-right));
     }
  }
And if you have a recent Mac, you can test it in Xcode 9's iPhone X simulator.

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

I think we're going to be okay.

Re: Designing Websites for iPhone X

#76
post #47

Earlier quoted context omitted.

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 thi…

This will cost us (developers) extra time. I just added 'viewport-fit=cover' to my project and boy am I tired! ;-) In the words of Aaron Rogers: relax. The CSS frameworks (Foundation, Bootstrap, etc.) will have this baked in the next time they're updated. Compared to the drama we as web developers have dealt with in the past, this is pretty minor. Apple gives you the CSS you need: @supports(padding: max(0px)) { .post…

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...

Re: Designing Websites for iPhone X

#77
post #56
post #8

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_ t…

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.

Re: Designing Websites for iPhone X

#78
post #47
post #8

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_ t…

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 thi…

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.

Re: Designing Websites for iPhone X

#79
post #56

Earlier quoted context omitted.

OK, I'll say it: this would not have happened under Steve.

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…

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.

Re: Designing Websites for iPhone X

#80
post #47

Earlier quoted context omitted.

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 thi…

This will cost us (developers) extra time. I just added 'viewport-fit=cover' to my project and boy am I tired! ;-) In the words of Aaron Rogers: relax. The CSS frameworks (Foundation, Bootstrap, etc.) will have this baked in the next time they're updated. Compared to the drama we as web developers have dealt with in the past, this is pretty minor. Apple gives you the CSS you need: @supports(padding: max(0px)) { .post…

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.
Post reply on HN