DZone
Mobile Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Mobile Zone > iPhone X Notch-alance

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.

Alex Curylo user avatar by
Alex Curylo
·
Oct. 05, 17 · Mobile Zone · Opinion
Like (2)
Save
Tweet
3.43K Views

Join the DZone community and get the full member experience.

Join For Free

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:

  • Building Apps for iPhone X

  • Designing for iPhone X

  • Updating Your App for iOS 11

  • Human Interface Guidelines - iPhone X

  • Positioning Content Relative to the Safe Area

  • The great PaintCode people have updated their  invaluableThe Ultimate Guide To iPhone Resolutions and also have specs for all the Notch attributes at iPhone X Screen Demystified.

More good reads on upgrading UI for the X at:

  • Design for iPhone X

  • Supporting iPhone X

  • iPhone X: Designing for the Notch

  • iPhone X: Dealing with Home Indicator

  • UI Design for iPhone X: Bottom Elements

  • How iOS Apps Adapt to the iPhone X Screen Size - and the Adaptivity app showcased here looks like a good purchase! "Adaptivity is an app for developers and designers to visualize how iOS's Size Classes and margins for layout and readable content look on real devices and how they change with respect to orientation, iPad Slide Over/Split View and Dynamic Type size changes..."

Templates to help you out:

  • Apply Pixel's iPhone X and iOS 11 UI Kit

  • iOS Design Kit's Free iOS 11 GUI for Sketch

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

  • Designing Websites for iPhone X

  • Understanding the WebView Viewport in iOS 11

  • And let's finish off with the niftiest idea we've seen for adapting in a non-approved way with the Notch:

  • ScrollSnake: "What if scroll bars on the iPhone X worked like the game "Snake"?"

IOS 11 app

Published at DZone with permission of Alex Curylo, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • An Overview of 3 Java Embedded Databases
  • 6 Things Startups Can Do to Avoid Tech Debt
  • Password Authentication. How to Correctly Do It.
  • DZone's Article Submission Guidelines

Comments

Mobile Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo