Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Designing Websites for iPhone X

webkit.org

Post reply on HN
Print view View original

101–110 of 135 posts

Re: Designing Websites for iPhone X

#101

Post by alwillis »

amrrs wrote: post #77
pbreit wrote: post #56

Earlier quoted context omitted.

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…

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

Re: Designing Websites for iPhone X

#102

Post by johansch »

johansch wrote: post #73
mikeash wrote: post #72

Earlier quoted context omitted.

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

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

Re: Designing Websites for iPhone X

#103

Post by tqkxzugoaupvwqr »

nnd wrote: post #67

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.

Re: Designing Websites for iPhone X

#104

Post by Gaelan »

pier25 wrote: post #58

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.

You don’t need to. They seem to have a sensible default.

Re: Designing Websites for iPhone X

#105

Post by alwillis »

amelius wrote: post #47
YooLi wrote: 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…

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.

Re: Designing Websites for iPhone X

#106

Post by amelius »

rhencke wrote: post #89
amelius wrote: post #80

Earlier quoted context omitted.

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…

Thinking up disastrous conclusions to a cosmetic, optional, opt-in style feature affecting a very low percentage of your audience is a bit dramatic, no?

It seems like a quite realistic scenario to me.

Re: Designing Websites for iPhone X

#107

Post by tqkxzugoaupvwqr »

hungerstrike wrote: post #69
mrks_ wrote: post #14

Earlier quoted context omitted.

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.

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.

Re: Designing Websites for iPhone X

#108

Post by MiddleEndian »

athenot wrote: post #34

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

Even now, years later, people who use televisions as monitors suffer if they don't know how to disable overscan on said screen.

Re: Designing Websites for iPhone X

#109

Post by alwillis »

arrty88 wrote: post #99
alwillis wrote: post #75

Earlier quoted context omitted.

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…

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.

Re: Designing Websites for iPhone X

#110

Post by robocat »

bhauer wrote: post #41
mrks_ wrote: post #25

Earlier quoted context omitted.

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

I believe the same colour is used to fill the blank area due to scroll bounce.
Post reply on HN