iPhone X Notch-alance

<div ng-class="{'content-full': (width

iPhone X Notch-alance

DZone’s Guide to

iPhone X Notch-alance

Learn about designing your mobile app (or adjusting your existing app) for the iPhone X and its new, distinct screen shape.

by ·

·

Free Resource

Join the DZone community and get the full member experience.

Join For Free

Download this comprehensive Mobile Testing Reference Guide to help prioritize which mobile devices and OSs to test against, brought to you in partnership with Sauce Labs.

Remember those innocent days a few short months ago when we all spotted the new safeAreaLayoutGuide and thought: “Our constraints are now with the top and bottom anchors of the safe area layout guide. This is not a big change…”

Oh, sweet naiveté. Did anybody actually call out in advance that subtle little change was foreshadowing THE NOTCHALYPSE? Yes, yes, every time something changes it brings out the fear and loathing no matter what it is, but the level of OMG NEVER BUY APPLE AGAIN … we saw this time, that was unprecedented. Personally, we think a phone with a bat-eared screen is kinda neat, but we’re weird.There’s a certain level of enthusiasm out there for clipping and masking and otherwise working around the new roundedness and notchedness … but we think Marco has it right here:

This is the new shape of the iPhone. As long as the notch is clearly present and of approximately these proportions, it’s unique, simple, and recognizable.

It’s probably not going to significantly change for a long time, and Apple needs to make sure that the entire world recognizes it as well as we could recognize previous iPhones.

That’s why Apple has made no effort to hide the notch in software, and why app developers are being told to embrace it in our designs…

So, we’ve got some rewriting to do in the next few weeks to have our apps fit nicely into The Brave New Notched World, and you probably do too we imagine; let’s see what resources are out there!

First off, go over the relevant stuff over at the mothership:

More good reads on upgrading UI for the X at:

Templates to help you out:

If you’re concerned with how your websites will deal with the Notch, check out

Analysts agree that a mix of emulators/simulators and real devices are necessary to optimize your mobile app testing – learn more in this white paper, brought to you in partnership with Sauce Labs.

mobile ,iphone x ,apple ,mobile app development ,mobile ui ,ios ,ios 11