Webentwicklung fĂŒr das iPhone X

Webentwicklung fĂŒr das iPhone X

Am 12. September hat Apple im Rahmen einer heiß erwarteten Keynote die alljĂ€hrliche Aktualisierung seiner iPhone-Produktpalette vorgestellt. Neben der zu erwartenden und konsequenten Weiterentwicklung in Form des iPhone 8 und 8 Plus hat Apple mit dem iPhone X zudem ein neuartiges GerĂ€t angekĂŒndigt, das sich neben der verbauten High-End-Technologie und einem leicht verĂ€nderten Formfaktor vor allem durch sein neues All-Screen Design von den bisherigen iPhones unterscheidet.

Als Entwickler von mobilen Lösungen beschĂ€ftigen wir uns bei PPW bereits frĂŒhzeitig mit neuen Anforderungen, wie sie sich jetzt etwa durch das iPhone X ergeben. Zum einen, um unsere Kunden ideal beraten und sie rechtzeitig auf notwendige Anpassungen aufmerksam machen zu können. Zum anderen, weil wir selbst auch begeisterte Endnutzer sind. In der einen, wie der anderen Funktion haben mir die Kollegen ein paar Fragen zum iPhone X gestellt, die ich passend zum heutigen Vorverkaufstart beantworten möchte.

Zur Keynote vom iPhone X: Welche Neuerungen ĂŒberzeugen dich am meisten?

Die GerĂŒchtekĂŒche war sich schon vor der Keynote, die erstmals im frisch eingeweihten Steve Jobs Theatre auf dem neuen FirmengelĂ€nde “Apple Park” stattfand, einig, was Tim Cook & Co. vorstellen werden. So wurde bereits im Vorfeld erwartet, dass es neben dem kontinuierlich verbesserten “Standard”-iPhone in diesem Jahr auch eine Pro-Variante geben wird, deren neues OLED-Display die (fast) komplette Vorderseite des iPhones ausfĂŒllen wird und voraussichtlich mit Gesichtserkennungssensoren (Face ID) anstelle des Fingerabdrucksensors (Touch ID) daherkommen wird. Von daher erfĂŒllte die Keynote genau die Erwartungen.

So interessant Face ID auch klingt, ist die neue DisplaygrĂ¶ĂŸe die spannendste Neuerung fĂŒr mich. Als Frontend’ler interessiere ich mich sehr dafĂŒr, wie der neu hinzugewonnene Platz genutzt und sich die ungewöhnliche Displayform auf Apps und Webseiten auswirken wird. DarĂŒber hinaus ist natĂŒrlich auch die abermals verbesserte Kamera (12 Megapixel Dual‑Kamera) ĂŒberaus interessant.

Mobile Websites und iOS-Apps mit dem iPhone X: Was mĂŒssen wir als Digitalagentur beachten?

Mit den neuen, abgerundeten “Ecken” am oberen und unteren Rand des iPhone X, sowie der Einkerbung an der Oberseite, dem so genannten “Sensor Housing” oder “Notch”, in dem sich die Face ID-Sensoren und die Frontkamera befinden, ergeben sich neue Anforderungen an mobile Webseiten und iOS-Apps.

Sind Webseiten und Apps nicht optimiert, wird als Fallback mehr oder weniger ansehnliches “Letterboxing” gewĂ€hlt, das sich wie folgt Ă€ußert:

  • Webseiten zeigen im PortrĂ€tmodus oben und unten bzw. im Landschaftsmodus links und rechts weiße oder farbige FlĂ€chen an, anstatt den Bereich aktiv im Design aufzugreifen.
  • Apps zeigen außerhalb des bisher definierten Rechtecks schwarze oder weiße FlĂ€chen an, so dass direkt sichtbar wird, dass die Apps nicht fĂŒr das iPhone X optimiert sind.

Es bietet sich also an, die neuen FlÀchen und den ausgesparten Bereich des Sensor Housing aktiv zu antizipieren, um eine möglichst gelungene User Experience herzustellen.

ErklÀrung zum iPhone X anhand der RSAG-App

Screenshot der RSAG-App, die wir gerade fĂŒr das iPhone X optimiert haben.

 

Webentwicklung fĂŒr das iPhone X: Was sagt Apples Entwicklerportal zu den Richtlinien?

Apple hat in seinem Entwicklerportal direkt nach der Keynote neue Richtlininen veröffentlicht. In den neuen Human Interface Guidelines fĂŒr das iPhone X steht explizit, dass

  • das Sensor Housing nicht versteckt werden darf, indem der obere Bereich abgedunkelt wird,
  • und man die so genannte “Safe Area” beachten soll, indem man keine interaktiven Elemente unter die nativen Bedienelemente des iPhone X legt.

FĂŒr nicht optimierte Apps besteht zudem das Risiko, das eingereichte Updates abgewiesen werden, weil die App nicht mehr den aktuellen Richtlinien entspricht. Das ist bei der Neu- oder Weiterentwicklungen von Apps unbedingt zu beachten.

FĂŒr die Anpassung von Websites greift Apple auf verschiedene neue Standards und eigene AnsĂ€tze zurĂŒck. So lĂ€sst sich ĂŒber die Viewport-Eigenschaft viewport-fit: cover steuern, dass eine Webseite den kompletten Bildschirm des X nutzen soll. Diese neue Eigenschaft ist Teil der eigentlich noch in Entwickung befindlichen CSS Round Display-Spezifikation des W3C, die bestimmt wie wir in Zukunft mit runden Displays in Smartwatches und Ă€hnlichem umgehen. Über eigene, von Apple definierte Konstanten wie env(safe-area-inset-top), lĂ€sst sich anschießend festlegen, dass Inhalte in nur der Safe Area positioniert werden. Das genaue Vorgehen hat Apple im offiziellen WebKit-Blog dokumentiert.

Deine eigene EinschÀtzung zum iPhone X?

Nach der AnkĂŒndigung war der Aufschrei wegen des hohen Preises sehr groß. In Deutschland ist das iPhone X so erst ab 1.149 Euro zu haben; auch der Erwerb ĂŒber einen Mobilfunkvertrag ist vergleichsweise teuer. Von daher wird es sich beim iPhone X keineswegs um ein MassenphĂ€nomen handeln, wie es bei den gĂŒnstigeren iPhones oder etwa den Android-GerĂ€ten von Samsung der Fall ist. Dennoch, und darauf deuten aktuell alle Anzeichen hin, wird sich das iPhone X mehr als gut verkaufen und mit Sicherheit der MarktfĂŒhrer unter den hochpreisigeren Smartphones werden.

Mit anderen Worten: Wer die komplette Bandbreite an Nutzern erreichern will, also auch oder insbesondere professionelle Anwender, die bereit sind, diesen Preis zu bezahlen, der kommt an notwendigen Anpassungen in seinen Apps und Webauftritten nicht vorbei. Was sich aber auch jenseits vom iPhone X lohnen wird. Schließlich ist abzusehen, dass die Tage des rechteckigen iPhone-Displays angezĂ€hlt sind und der Look des X eher frĂŒher als spĂ€ter der aller iPhones werden wird.

iPhone X Pressebild

Mal abgesehen vom Preis – wĂŒrdest du selbst ein iPhone X haben wollen?

Ja – und heute morgen ging auch pĂŒnktlich zum Vorverkaufsstart die Bestellung raus. Hoffen wir, dass Apple dem zu erwartenden Ansturm schnellstmöglich gerecht werden kann und uns alle zeitnah beliefert.

Welche iPhone-Modelle waren bereits in deinem Besitz und welches hat dich seinerzeit am meisten „geflasht“?

Auch wenn es aus Anwendersicht eher mĂ€ĂŸig war (kein 3G, kein App Store, schlechte Kamera), war das allererste iPhone von 2007 eindeutig das spannendste GerĂ€t. Hat Apple es damit doch ĂŒber Nacht geschafft, den ganzen Smartphone-Markt zu revolutionieren, so dass heute fast jeder einen dieser kleinen „Hosentaschencomputer“ sein Eigen nennt.

Ich selbst bin seit der ersten iOS-Generation dabei. Mein erstes iOS-Device war damals allerdings noch ein mobilfunkfreier iPod Touch, bevor es dann mit der zweiten Verion, dem „iPhone 3G“ zum echten iPhone ging (damals hieß iOS ĂŒbrigens noch iPhone OS – auch auf dem iPod Touch). Danach wechselte ich spĂ€testens alle zwei Jahre auf das neueste iPhone, manchmal auch auf die technisch deutlich attraktiveren S-Versionen.

Das iPhone X ist seit heute vorbestellbar und erscheint am Freitag, den 3. November. Bei PPW haben wir heute ein Update fĂŒr die oben zu sehende, von uns betreute RSAG-App eingereicht, um direkt zum Start auch den Early Adaptors eine bestmögliche App-Erfahrung bieten zu können.