Mit dem iPhone X hat sich Apple für ein ungewöhnliches Design entschieden: Ein schwarzer Balken unterbricht das Display. Das stellt auch Web-Entwickler vor eine Herausforderung. Apple erklärt, wie sie mit dem „Notch“ umgehen sollen.

iPhone X: „Notch“ sorgt für Kontroverse

Apple stand beim Design des iPhone X vor einer Herausforderung: Ein „randloses“ Display sollte es sein, gleichzeitig müssen sich auf der Vorderseite aber auch Hörerlautsprecher, Kamera und Sensoren befinden. Apple entschied sich dafür, das Display um diese Elemente herumzuführen, sodass am oberen Ende ein schwarzer Balken bleibt – der „Notch“. Wie der aussieht, seht ihr im Video:

iPhone X im Hands-On
193.941 Aufrufe

Der Notch stößt allerdings nicht bei allen potenziellen Kunden auf Gegenliebe. Wir sprachen schon am Tag nach der Präsentation von „Notchgate“, bei Twitter wird unter diesem Hashtag weiterhin diskutiert. Designer fragen sich wiederum, warum Apple nicht einfach – wie Samsung mit dem Galaxy S8 – oben und unten einen kleinen Rand gelassen hat.

Nun ist der Notch aber da, und iOS-Entwickler müssen sich überlegen, wie sie beim Design ihrer Benutzeroberfläche damit umgehen sollen. Hierfür gab es von Apple schon eine klare Ansage: Entwickler sollen den Notch nicht durch schwarze Flächen „verstecken“, sondern ihre Benutzeroberflächen um ihn herum gestalten.

Bilderstrecke starten
11 Bilder
Top 10: Die aktuellen Smartphone-Bestseller in Deutschland

Apple erklärt: So können Web-Designer mit dem Notch umgehen

Nun stehen aber auch Webdesigner vor einer ähnlichen Herausforderung – vor allem dann, wenn der iPhone-X-Benutzer eine Website in der Horizontalansicht aufruft. Wer seine Website in diesem Fall nicht anpasst, muss damit leben, dass Safari einfach links und rechts einen Bereich frei lässt. Das sieht allerdings nicht sonderlich hübsch aus:

webkit-iphone-x-1

Im WebKit-Blog verrät Apple, mit welchen Codes Entwickler ihre Website so anpassen können, dass das Einblenden dieser Freiflächen entfällt. Das hat dann zunächst allerdings zur Folge, dass der Notch im Weg ist und Inhalte der Website verdeckt:

webkit-iphone-x-2

Mit CSS-Funktionen lässt sich wiederum definieren, welche Inhalte die komplette Breite des iPhone-X-Display einnehmen sollen und welche nicht. So ist es möglich, festzulegen, dass für Menüelemente über- und unterhalb des Notch kein Bereich freibleiben muss. Auch der Home-Balken an der Unterseite, der die Funktion des weggefallenen Homebutton übernimmt, lässt sich so berücksichtigen:

webkit-iphone-x-3

Letztendlich lässt sich so relativ leicht eine Website erstellen, die mit dem Notch so umgeht, wie Apple sich das vorstellt:

webkit-iphone-x-4

Nun stellt sich die Frage, wie viele Web-Designer sich die Mühe machen werden, ihre Seiten in den nächsten Wochen anzupassen. Mit Blick auf Apples Marktmacht im Bereich der Smartphones stehen die Chancen aber sicherlich ganz gut, dass viele Webseiten die neue Herausforderung annehmen werden.

Quelle: Apple via 9to5Mac

* gesponsorter Link