App-EntwicklungiPhone Xresponsive Webdesign

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.

Kommentieren

Dein Kommentar