Designing Websites for iPhone X
71–80 of 135 posts
Re: Designing Websites for iPhone X
#72Earlier 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…
Re: Designing Websites for iPhone X
#73Earlier 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.
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
#74Re: Designing Websites for iPhone X
#75Out 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…
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
#76Earlier 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…
You can read all about it at https://github.com/w3c/csswg-drafts/issues/1693#issuecomment...
Re: Designing Websites for iPhone X
#77Out 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.
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
#78Out 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…
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
#79Earlier 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…
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
#80Earlier 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…