16 ms·
Handling Notch on iPhone X, XS, XR, XS Max
- hmmok 8y agoFuck all this, this isn’t progress this is stupid. I won’t be buying or accommodating this stupid design lol
- flipgimble 8y agoTantrum-Driven Development, also know as spitting in the wind.
- thomasfedb 8y agoObviously your users will appreciate your position.
- philipov 8y agoI thought this was going to be about the creator of Minecraft. It would have made for a more interesting article, too.
- thomasfedb 8y agoAdd 'are rectangular' to the list falsehoods programmers believe about screens.
- cpburns2009 8y agoOr, don't design around gimmicks and fads. The "falseholds programmers belive" are overblown, usually non-issues, and frankly probably aren't worth the development time to support.
- martin-adams 8y agoIt'll be interesting to see if Apple ever make a circular Apple Watch. I can see a scenario where the strap even incorporates some flexible screen which would be utilised for additional status and content.
- batteryhorse 8y agoInstead of cartesian coordinates, you could just program it using polar coordinates. And ring buffers.
- thomasfedb 8y agoThere are already plenty of circular Android Wear, so it's far from impossible.
- osrec 8y agoAre you suggesting that non-standard shaping of screens is a good thing or a bad thing? I personally think it's a bad thing, unless you have a specific use case in mind. For 99.99% of use cases, rectangular screens are a pretty good choice.
- cprecioso 8y agoI don't think GP is suggesting either, rather that non-rectangular screens are _a thing that happens_ and many are not prepared to deal with it because they didn't think of it. In the same vein of the "Falsehood programmers believe about x" articles.
- throwawaymath 8y agoBut at the same time, just about every software engineering decision has a long tail of oddball edge cases. You could use any of these to justify a new "Falsehoods Programmers Believe About X" principle, but for many of them it's (in my opinion) vacuous to bother because it's either unnecessary to deal with it or it's legitimately strange and exceptionally suboptimal for the client to be designed that way. For example, I don't really have a problem with the way Youtube presents itself on the iPhone X screen in landscape mode. It's not perfect, but nothing is actually breaking. There is some unused screen real estate. There isn't so much a falsehood here as an aversion to a more sophisticated screen filling methodology. If someone were to view YouTube in a screen shaped like a circle, the YouTube developers would have a strong argument that's not a fact of life but an oddball thing to do, and consequently not support it. Conversely there are legitimate consequences if you make false assumptions about e.g. foreign language encodings, email validation, characters present in human names, etc. These are domains with edge cases that have a huge number of unknown unknowns due to very culturally significant and non-dismissable reasons. You also can't really skimp out on designing for them because doing so could completely break functionality or introduce security vulnerabilities.
- ConfusedDog 8y agoIt only bothers me in the aspect ratio that takes the full screen, which is rare. Otherwise, I think iPhone X design looks better than iPhone 8. Some websites do need this fix.
- marvindanig 8y ago> iPhone X design looks better than iPhone 8… Absolutely, it's a stunningly beautiful phone! I sense that the newly announced iPhones have a smaller notch compared to the iPhone X. If that is true then we can assume that Apple is working on reducing the notch height to a point where it goes seamless with the frame and then we'll have the entire glass surface to play on.
- phinnaeus 8y agoIt's exactly the same.
- sschueller 8y agoDon't waste your time. The notch will be gone at some point and Apple will be claming to be the first to do so.
- zuttton 8y agoThis is true. Really thinking Apple did it just to see who would copy them and to say they were first. Notch is a super poor design choice UI wise.
- newscracker 8y agoApple wasn't the first to create the notch. It was Sharp, followed by Essential, followed by Apple. [1] [1]: https://www.phonearena.com/news/First-notch-phone-Sharp-not-Essential_id105608 https://www.phonearena.com/news/First-notch-phone-Sharp-not-...
- jmisavage 8y agoTrue at some point that will happen, but not in the foreseeable future. Web developers also need to take in account that there are large rounded corners cut out on the screen which will most likely remain even when the notch finally goes away. The WebKit folks had a great blog post on how to do all of this and use the new env variable in CSS. It was proprietary back then, but I believe it's on the standards track now Android is copying the notch. https://webkit.org/blog/7929/designing-websites-for-iphone-x/ https://webkit.org/blog/7929/designing-websites-for-iphone-x...
- bdcravens 8y agoWhat features has Apple removed shortly after introducing them? Historically Apple has stuck with its changes, even when they are accompanied by negative feedback.
- Jaruzel 8y ago3D touch has gone. It's not on some of the newer models. Didn't last very long at all.
- osrec 8y agoWhile the phone may look beautiful to a lot of people, that notch is horrible to design a UI around. Even the screenshots in the article look terrible after the suggested adjustments. I really hope the notch eventually goes away.
- justwalt 8y agoWhen Apple finally revealed the first image of the new iPhone during their event, the background on the phones didn’t reveal the notch at all, so I thought they’d done away with it. I wonder if it was on purpose.
- johnhenry 8y agohttps://gizmodo.com/apple-magically-makes-the-notch-disappear-1829056511 https://gizmodo.com/apple-magically-makes-the-notch-disappea... It's super long-winded (like many things from gawker) but essentially, the photos are black around the notch specifically to hide it.
- bhauer 8y agoIt will inevitably disappear in time. Once we have the necessary technology to have these sensors work reliably below the display layer, that will be done. I am more concerned about the non-functional but (to me, at least) similarly bothersome design quirk of these iPhones and some other modern phones: rounded corners that mask the display edges. I worry rounded corners may not disappear any time soon because there's little technical reason for them to exist; the rounded corners are aesthetic. For me, I prefer the appearance of phones with shorter corner radii—sharper lines—such as the Razer. But the popular preference for large-radii corners is undeniable (e.g., Twitter's conversion from square to circular avatars). I just want a plain rectangular display, thank you.
- apple4ever 8y agoAbsolutely agreed. The notch is just terrible. I'd much rather there just be a little bit bigger bezel up at the top. I think it will go away eventually, but then I said that about the camera bump too (another terrible design choice).
- nzjrs 8y agoThe total development effort apple has caused to be wasted on this monstrosity is nothing but depressing.
- ovao 8y agoFive lines of CSS isn’t an extraordinary amount of development effort.
- keraf 8y agoNot all websites are built the same, some might require more than just five lines of CSS. Add to that QA to make sure it works. And purchasing the device(s) to test that it really looks fine (plus setting up remote debugging if it needs adjustments) or writing something to replicate the notch behavior. It's one more thing to support in already many things we have to think about when doing web development (different browsers, OS, screen sizes, orientation, available features, ... and now the notch). Apple could have used the space around the notch for some browser UI for example and spared us the extra effort to make our websites look good (or even be functional) with that notch. At the end of the day, it's their customers that are benefiting from a good/better browsing experience.
- bdcravens 8y agoNot to mention the development time they forced Google to waste when they implemented the feature on the new Pixel. (Plus LG, Essential, OnePlus, ....)
- cprecioso 8y agoAre you saying Apple is responsible for the time that takes to copy their design? That is certainly an interesting take. Also maybe there's an argument to be made about this being time invested in a feature (notch support that the OEMs were already implementing) rather than wasted.
- bdcravens 8y ago
- Someone1234 8y agoIt is an odd design choice on Apple's behalf to make the sides of the notch usable/drawable. With an OLED screen you can easily black them in such a way so they "disappear" in horizontal. Keep them for OS status in vertical orientation.
- marvindanig 8y agoMatching rgba() to the hardware around it is a very interesting take! Isn't the notch in landscape mode similar to how we used to have these feedback buttons on the left or right of the screen with absolute positioning? Uservoice and GetSatisfaction come to mind.
- shawnz 8y ago> Matching rgba() to the hardware around it is a very interesting take! I dont think they are saying that, just that the infinite contrast ratio of OLED allows you to hide the black pixels very well.
- kalleboo 8y agoThis is great info, I had no idea this was possible. Is this also supported on all these new Android phones with notches?
- dep_b 8y agoThe notch is pretty awful when watching full-screen content in landscape orientation indeed. And no way to get around it in most software. Less annoying but still a distortion are the rounded corners. There should be an option while watching media to simply fill the screen without clipping. Does Samsung have similar ways to help you prevent displaying content on the distorted sides of an Edge screen?
- sorahn 8y agoThe phone does this by default. You have to double tap the video to zoom in to get the notch/corners to cut some of your video.
- dep_b 8y agoFunny, I only ever see demos of movies and games on the iPhone X with all of the cutouts.
- simongr3dal 8y agoThe iPhone XS has a screen aspect ratio of 19.5:9 so most 16:9 content should be easily viewable with pillar boxing (black bars on the sides) and make the notch "disappear". I'm fairly sure that this is the default and only if you double tap on the video to zoom in would it then fill the screen and make the notch noticeable.
- holowire 8y ago> Here’s a simple fix to use all the extra space. To tell the browser to expand into the display cutout (notched) area, set the viewport-fit property to cover like so... This honestly looks worse than having white margins in my opinion. While the white margins aren't ideal, they are still a better visual solution than fully extending the page to the left and right. Content should be given enough space as to not visually interact with the rounded corners, otherwise it reflects poorly on the site designer, as if they didn't account for it. So, forcing the page within the confines of the non-rounded area is a better global solution that offers better visual consistency. That said, I think either a blacking out the margin would be more visually appealing and not draw as much attention to the actual notch area, but forcing margins by default is the right call.
- remote_phone 8y agoI’ve had iPhone X since day one, and an iPhone user since version 3. I can honestly tell you that the notch doesn’t bother me. I don’t even notice it at all, even on landscape mode. Maybe to designers the idea of it is ugly, but in practice I’ve never once in a year thought “that notch is a bad idea and it made my experience worse”. I just forget about it. And for the record I’m not a fanboy. I use Windows at home and boot camp my work laptop to windows as well because I hate MacOS. The iPhone is the only apple product I’ve owned and am open to switching to android if they ever gave me a compelling reason to switch, which they haven’t yet.
- batteryhorse 8y agoI also bought the iPhone X on day one, but I had to get rid of it, I really hated the notch. Also didn't like the aspect ratio of the display, it's getting way too vertical. For me, it's like living in a room where one of the walls has a weird inset, which makes it more difficult to arrange the furniture. Or like having a picture frame on the wall that is slightly crooked no matter how many times you try to fix it. Or maybe it's like having a mole or birthmark, and calling it a beauty mark. Sure you can live with it and just ignore it, but that wouldn't be my first choice. However if you are willing to boot camp into Windows, you are probably less likely to care about a notch.
- Krasnol 8y agoCould you elaborate on why you don't see compelling reasons to switch to Android? Seen from the other side and having to use an IPhone for work, I don't see compelling reasons to spend so much money for an Iphone. Especially considering that not even the basic features like collecting mails from an exchange server doesn't work properly...
- aaaaaaaaaab 8y agoPeople complaining about the notch or the rounded corners behave as if overscan wasn’t a thing for decades on TV sets...
- tomcooks 8y agoI don't have to handle "the notch", that thing (and the toxic company behind it) has to handle the web or gtfo.