If you like your notch, you can keep your notch: Apple's web design tips for the iPhone X

If you like your notch, you can keep your notch - that's in a nutshell the WebKit development advice that Apple is giving in the new guidelines for browsing on the "all-screen" iPhone X. That the cutout area where Apple houses the Face ID camera kit will be a challenge for developers is a foregone conclusion, and developers have already come up with flexible solutions to incorporate it in their apps and websites.

Nothing beats the official guidelines, though, and just one look at Apple's examples above can tell you where this thing is heading. Apple's WebKit team will include new code and development techniques tailored specifically for the iPhone X. Not everything is in the current version of its software tools for iOS 11, but a future update, likely around the iPhone X launch, will bring those up to speed. 

For instance, there are new min and max commands which specify the navigation bars and to expand to the edges when the phone is held in portrait mode, but automatically prop larger inset margins in landscape for content, so that the notch on the side, the rounded corners, and the virtual nav bar at the bottom won't obscure the view. A picture is worth many words, so check out Apple's examples of dos and don'ts above.

source: Apple

Related phones

iPhone X
  • Display 5.8" 1125 x 2436 pixels
  • Camera 12 MP / 7 MP front
  • Processor Apple A11 Bionic, Hexa-core, 2390 MHz
  • Storage 256 GB
  • Battery 2716 mAh(21h 3G talk time)

FEATURED VIDEO

25 Comments

1. iushnt

Posts: 3105; Member since: Feb 06, 2013

The notch makes the phone look so awkward

5. trojan_horse

Posts: 5868; Member since: May 06, 2016

New stuff always look awkward at first glance, but later because somewhat mainstream in the long run. Remember when the curved edges by Samsung was considered awkward and gimmick? Now it's become the norm, everywhere. Just saying...

6. Settings

Posts: 2943; Member since: Jul 02, 2014

Waste of space imo. They could have just put cursor buttons when in landscape or some V20-ish shortcuts.

20. bambamboogy02

Posts: 838; Member since: Jun 23, 2012

Bezel-less my butt, they just stuffed every component in one spot, the HUGE RECTANGLE taking up screen space.. This is the 2nd most idiotic design ever, A Glass back is the first.

16. TMHKR

Posts: 202; Member since: Dec 08, 2012

And they are still a gimmick. Screen should be perfectly rectangular, period.

17. cmdacos

Posts: 4201; Member since: Nov 01, 2016

My edges dont cover part of the content I'm viewing blocking my view.

19. medtxa

Posts: 1655; Member since: Jun 02, 2014

The complaints with curve is usually distorted view or glare at screen but the curve make for good design and ergonomic. Iphone X notch is neither beautiful or useful, its just horrible hardware compromise.

14. tangbunna

Posts: 480; Member since: Sep 29, 2016

i want to refund the notch. how much i can get ?

22. bobby84

Posts: 595; Member since: May 13, 2016

I'm not an Apple fan, I think they brainwash people. With that out the way the notch based on the images and how it works I think would really bother me. But Apple, great at marketing want consumers to embrace the notch, they don't want the notch to be a distraction like Samsung fps location. They are trying to make people that believe something that should be undesirable like the notch to embrace to fool people into thinking its great. Same thing Apple always do, brainwash people into settling. Until they have it. -Who wants a stylus, ("you pick them up, put them down, lose them, yuck")then comes Apple pencil! -Who want a big phone(Ex note 1), then come the iPhone plus selling millions. -Who wants oled they have their disadvantages, now everyone wants the iPhone 10 -Who wants wireless charging, now wireless charging it now such a benefit -Who need higher res screen, then comes the iPhone 10 everyone holding out for -Who wants small bezels then comes the iPhone 10 everyone wants -Who wants super fast phones then the 6s wins speed test that's all Apple users care about all of a sudden. -Who need water resistances I don't get my phone wet? Now apple users aren't complaining. -s8 fps location was one of the only complaints iSheep could make, now the X doesn't have one and now the fps location hating in forums have stopped, lol.

24. PhoneCritic

Posts: 1354; Member since: Oct 05, 2011

The hypocrisy is the thing I don't like otherwise whatever people choose is their right but to be so flagrantly hypocritical is what I don't understand. To say things are gimmicks or useless until my brand has them is just so contradictory.

2. thetruthhasbeenspoken

Posts: 83; Member since: May 02, 2017

Ugly design. Apple died with steve jobs

3. Jimrod

Posts: 1605; Member since: Sep 22, 2014

I imagined they'd do it like this, permanent info bars either side of notch, always black background - then a similar black "dock" at the bottom of the phone for symmetry. Still get the screen area used and available but less weird looking. But then I guess this is why I don't work for Apple's "genius" design team... :D https://s26.postimg.org/5g40yro9l/i_Phone_X.jpg

12. TerryD

Posts: 546; Member since: May 09, 2017

Yeah, thats what I expected too. Hide it with a black background.

4. Dingy_cellar_dweller

Posts: 339; Member since: Mar 16, 2013

Welcome to the new world of Fragmentation

7. scarface21173

Posts: 689; Member since: Aug 17, 2014

It just doesn't look right, they should of just continued the notch across the whole of the phone. Then it would of jst been a black bar across the top.

8. Plasticsh1t

Posts: 3106; Member since: Sep 01, 2014

What a f**king eyesore. Couldn't they come up with a better design?

9. Jimrod

Posts: 1605; Member since: Sep 22, 2014

Probably not, as much as Steve Jobs was the boss and Jony Ive the "designer" I get the impression that Jobs had a far larger influence and Ive is little more than a glorified CAD operator if recent year's products are anything to go by.

10. Plasticsh1t

Posts: 3106; Member since: Sep 01, 2014

11. Jimrod

Posts: 1605; Member since: Sep 22, 2014

:D Yup. While most think Apple users are mindless sheep (some are, as are fanboys for any brand), most of us are bored with the same old stuff and lack of effort... Hence fairly mediocre sales of 8 (and I expect lower than anticipated sales of the X).

25. PhoneCritic

Posts: 1354; Member since: Oct 05, 2011

I would agree with your assessment on the iPhone 8 duo but I believe the X will break sales numbers simply because it is something new (design wise) in terms of Apple. The fan base wants something new that does not resemble the last tree alliteration and are holding out for it. I think it is a good design but falls short of the beauty of the Samsung "S" series( and Note 8) and LG v30 Again that just my opinion too.

13. TerryD

Posts: 546; Member since: May 09, 2017

I think Jony has been on holiday for the last 4 years

23. PhoneInQuestion

Posts: 496; Member since: Aug 20, 2017

Jony Ive has been working for Apple for far too long, I remember looking at IKEA trash cans all wrong, that's supposed to be a professional Macintosh computer. Guy is a pretentious Twat.

15. japkoslav

Posts: 1507; Member since: Feb 19, 2017

Please can i get my notch on iPhone 8 Plus? I don't wana be left out of not seeing informations on screen. Hopefully a case can fix that.

18. cmdacos

Posts: 4201; Member since: Nov 01, 2016

That continues to look absolutely ridiculous. One of the most moronic decisions up there with Moto's flat tire. They are on equal playing fields.

21. kryme

Posts: 469; Member since: Oct 24, 2013

So where is the location symbol, Bluetooth symbol, don’t not disturb symbol , alarm symbols and the back button to whatever app I was using gonna go?????? I use to glance at my phone to check if I set an alarm or if my Bluetooth headphones are connected... I’m really waiting to see what they do to solve this....

Latest Stories

This copy is for your personal, non-commercial use only. You can order presentation-ready copies for distribution to your colleagues, clients or customers at https://www.parsintl.com/phonearena or use the Reprints & Permissions tool that appears at the bottom of each web page. Visit https://www.parsintl.com/ for samples and additional information.