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

41–50 of 135 posts

Re: Designing Websites for iPhone X

#41

Post by bhauer »

mrks_ wrote: post #25
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…

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.

Re: Designing Websites for iPhone X

#42

Post by mi100hael »

jws wrote: post #28

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.

> Let's create new CSS features for people who intentionally cover parts of their screen

No thanks.

Re: Designing Websites for iPhone X

#43

Post by alwillis »

dylan-m wrote: post #19

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

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

Re: Designing Websites for iPhone X

#44

Post by [deleted] »

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…

[deleted]

Re: Designing Websites for iPhone X

#45

Post by alwillis »

phinnaeus wrote: post #16
Roritharr wrote: post #5

Earlier quoted context omitted.

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

Re: Designing Websites for iPhone X

#46

Post by ynniv »

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…

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

Re: Designing Websites for iPhone X

#47

Post by amelius »

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 think Apple would have done a better job if they filled those corners with system icons.

Re: Designing Websites for iPhone X

#48

Post by amelius »

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…

Yes, black with system icons would have been better.

PS: Does it also extend the "background-image" property?

Re: Designing Websites for iPhone X

#49

Post by alejandromaka »

bla2 wrote: post #40

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.

imagine the disappointment when hearing that you have to write this article

Re: Designing Websites for iPhone X

#50

Post by whipoodle »

ihuman wrote: post #18
hamax wrote: post #7

I'll just leave this here: "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.
Post reply on HN