Was bedeutet eigentlich ein faltbares Netz?

Nach jahrelangem Reden, Experimentieren und stagnierenden Smartphone-Verkäufen kommen endlich faltbare Geräte auf den Markt. Samsung, Huawei und Motorola haben alle Handys mit faltbaren Bildschirmen herausgebracht, und hinter den Kulissen basteln Unternehmen wie Apple nicht weit dahinter. Das „faltbare Netz“ kommt.

Seine Geräte nehmen verschiedene Formen an, von Laptops über Telefone bis hin zu neumodischen Dual-Screen-Hybriden. Es gibt keine allgemeine Definition für diese neue Klasse von Gizmos, aber die meisten passen in eine von zwei Kategorien. „Foldables“ sind Geräte, bei denen sich der Bildschirm buchstäblich zusammenfaltet, während bei „Dual-Screens“ die Bildschirme getrennt sind, aber als eins verwendet werden können. Wenn es um Webdesign geht, werden die beiden Typen wahrscheinlich nach ähnlichen Regeln spielen. Sollte die Technologie in großem Stil durchstarten, könnte das Webdesign auf die größte Erschütterung seit weit über einem Jahrzehnt blicken.

Das klingt alles sehr spannend, aber was bedeutet das eigentlich? Das „faltbare Web“ wird neue Herausforderungen, neue Möglichkeiten und aller Wahrscheinlichkeit nach auch eine neue Syntax mit sich bringen. Das Web könnte seine größte Erschütterung seit dem Smartphone erleben. Sowohl Benutzer als auch Programmierer haben sich ziemlich an das Spielfeld gewöhnt: Desktop und Mobilgerät mit einer Prise Tablets. Nicht mehr. Wenn Sie dachten, Sie kennen Responsive Design, bevor Sie noch nichts gesehen haben.

Weiterführende Lektüre

• „Die Zukunft ist faltbar: Entwicklung des App-Ökosystems des Galaxy Fold“, Samsung Newsroom
• „Faltbare Telefone sind da. Wollen wir sie wirklich?“, Brian X. Chen, The New York Times
  

Neue Webstandards, neue Erfahrungen und neue Probleme

Die flexible Bildschirmtechnologie wird seit den 1970er Jahren erforscht, aber erst seit der Jahrtausendwende ernsthaft entwickelt. Erst in den letzten Jahren sind Verbrauchergeräte in allen Formen und Größen auf den Markt gekommen.

Einige, wie das Galaxy Z Flip, ahmen ein Flip-Phone der alten Schule nach. Andere, wie das Huawei Mate X, haben den/die Bildschirm(e) um die Außenseite des Telefons gewickelt. Viele weitere sind wie elektronische Bücher aufgebaut, wobei zwei Innendisplays zu einem werden, wenn das Gerät vollständig geöffnet ist. Oft befindet sich außen ein separater, kleinerer Bildschirm, damit Benutzer ihn nicht aufklappen müssen, wenn sie ihn verwenden.

Die Hardware-Schluckaufe sind gut dokumentiert und werden durchgearbeitet. Faltbare Geräte kommen. Das ist nicht der Fokus. Hier liegt der Fokus darauf, wie sich die Technologie auf Webentwickler, UX-Designer und alle anderen auswirken wird, deren Aufgabe es ist, qualitativ hochwertige Surferlebnisse zu bieten.

Updates für CSS und JavaScript

Neue Hardware bedeutet aktualisierte Software. Microsoft hat besonders auf die Einführung faltbarer Technologien reagiert, teilweise weil das Unternehmen an seinen eigenen faltbaren Geräten arbeitet. Drei Microsoft-Entwickler – Bogdan Brinza, Daniel Libby und Zouhir Chahoud – haben eine Erklärung veröffentlicht, in der sie eine neue JavaScript-API und eine CSS-Medienabfrage vorschlagen. Chahoud erweiterte dies mit einem GitHub-Post am 3. Februar.

Sie heben potenzielle Probleme mit faltbaren Geräten hervor, darunter:

• Vielzahl von Hardware auf dem faltbaren Markt.
  Einige Geräte sind nahtlos, andere nicht, und ihre Formen variieren stark. Das Windows Surface Duo und das Galaxy Fold sind beide wie Bücher geformt – eines mit Naht und eines ohne. Das nahtlose Motorola Razr erinnert an die alten Flip-Phones, wobei die beiden „Hälften“ des Bildschirms eher Quadraten als Rechtecken ähneln. Bedenke auch, dass es sicher nur eine Frage der Zeit ist, bis ein dreiteiliges Foldable auf der Bildfläche erscheint. Bei so viel Vielfalt in Form und Größe von faltbaren Geräten ist es wichtig, eher auf eine _Klasse _von Geräten als auf bestimmte Hardware abzuzielen.
• Funktion „Bereich falten“.
  Das Wunder der faltbaren Bildschirme hat einige Opfer gefordert. Eine wichtige ist die potenzielle Unbeholfenheit des Bildschirms (der Bildschirme) in der Nähe der Falte. Inhalte, die auf oder über der Naht eines teilweise gefalteten Bildschirms positioniert sind, sind möglicherweise schwer zu sehen oder mit ihnen zu interagieren. Bücher und Zeitschriften neigen dazu, das Drucken von Inhalten über ihre Falze zu vermeiden; Das Gleiche gilt wahrscheinlich für faltbare Bildschirme. Darüber hinaus haben einige Usability-Tests ergeben, dass die Reaktionsfähigkeit des Touchscreens bei faltbaren Geräten nicht so zuverlässig ist.

In einem Versuch, diese und andere Probleme anzugehen, haben Brinza, Libby und Chahoud eine übergreifende CSS-Medienfunktion vorgeschlagen, die testen kann, ob das Browserfenster über zwei Bildschirme oder über eine Falte hinweg angezeigt wird. Wenn dies der Fall ist, kann der Inhalt dann relativ zur Falte oder Naht positioniert werden. Dies spielt in die fortlaufende Entwicklung des Responsive Designs hinein, das zunehmend mehr als nur die Bildschirmgröße berücksichtigen muss.

Dementsprechend wurden auch Umgebungsvariablen vorgeschlagen, die eine Möglichkeit bieten, Segmentgröße und -orientierungen zu erkennen. Solche Ergänzungen würden es Websites effektiv ermöglichen, sich über drei Dimensionen hinweg zu formen. Dieselbe Seite kann sich in einer flachen Form anders verhalten als in einer L-Form.

Die CSS-Vorschläge werden von einer neuen Aufzählung von Fenstersegmenten für die JavaScript-API begleitet, die es Websites ermöglichen würde, sich dynamischer zu verhalten. Was angezeigt wird, könnte sich beispielsweise ändern, je nachdem, ob der Bildschirm gebogen ist oder nicht, oder sich anders verhalten, je nachdem, ob Benutzer die eine Hälfte des Displays oder die andere berühren. Die neue JavaScript-API verbessert auch die Funktionalität auf Nicht-Document Object Model-Zielen, auf denen CSS nicht verfügbar ist, wie z. B. Canvas2d oder WebGL.

Diese Vorschläge berücksichtigen nicht mehr als zwei Bildschirme oder Segmente, aber im Moment scheint die Technologie in diese Richtung zu gehen. Sollten diese Vorschläge umgesetzt werden, würden sie dem responsiven Webdesign eine neue Ebene hinzufügen. Es könnte bald die Zeit kommen, in der wir nicht mehr davon ausgehen können, dass Standorte nur in einzelnen rechteckigen Räumen funktionieren müssen. Neue CSS- und JavaScript-Spezifikationen, wie sie von Brinza, Libby und Chahoud vorgeschlagen wurden, würden Entwicklern eine Möglichkeit geben, etwas dagegen zu tun.

Chahoud rechnet nicht mit vielen Kinderkrankheiten:

„Wir betrachten Geräte mit zwei Bildschirmen und faltbare Geräte als ein weiteres Ziel für responsives Webdesign, etwas, das Webentwickler seit Jahren mit CSS speziell für Telefone, Desktops, Tablets und so weiter tun.“

Wenn neue Web-Primitive der Technologie voraus bleiben, können sich Entwickler auf die Verbesserung der Funktionalität ihrer Websites konzentrieren.

Ein neues Falt- und Dual-Screen-Erlebnis

Was beinhaltet diese verbesserte Funktionalität? Eine der wichtigsten Erkenntnisse ist, dass es eine neue Falte in der Stadt gibt. Während es „above the fold“ schon so lange gibt, wie es Scrollen gibt (ein Rückgriff auf das Zeitungsdesign), müssen sich Entwickler bald mit Falten in der Mitte der Seite auseinandersetzen.

Zumindest bedeutet dies wahrscheinlich, dass Inhalte angepasst werden müssen, damit Benutzer nicht mit irgendetwas auf der Falte interagieren müssen. Wenn die Touch-Steuerung beim Zusammenklappen eingeschränkt ist oder das Gerät teilweise zusammengeklappt ist, ist es sinnvoll, bestimmte Elemente so umzupositionieren, dass sie auf der einen oder anderen Hälfte des Bildschirms sitzen.

„Ich denke, es gibt viele Gelegenheiten, nicht nur im erweiterten Immobilienbereich, sondern auch im „definierten“ Immobilienbereich“, sagt Chahoud. „Die Faltung (ob das Gerät nahtlos ist oder eine Naht hat) teilt den Bildschirm in zwei gut definierte Anzeigebereiche und Entwickler können bestimmte Inhalte pro Region organisieren.“

Das ist wirklich praktisch.
Schalten Sie es in den Selfie-Modus, klappen Sie es halb zusammen und es steht (offensichtlich) aufrecht für Ihren Anruf. pic.twitter.com/5reTQlpkXp

– Adrian Weckler (@adrianweckler) 19. Februar 2020

Am ehrgeizigeren Ende des Spektrums bedeuten faltbare Geräte effektiv ein Mini-Dual-Screen-Setup, bei dem die beiden Hälften des Displays für verschiedene Dinge verwendet werden können. Wenn Sie das faltbare Web zusammenfassen, hat es tatsächlich eine unheimliche Ähnlichkeit mit Geräten wie dem Nintendo DS – einem einzelnen Gerät mit zwei Bildschirmen, die zusammenarbeiten. Die Technologie hat sich seitdem massiv weiterentwickelt, bis zu dem Punkt, an dem die beiden Displays nahtlos verbunden werden können, aber das Kernerlebnis ist sehr ähnlich.

In Bezug auf das Webdesign ermöglicht dies eine App-ähnlichere Darstellung von Inhalten. Chahoud sagt: „Ich glaube, dass Designs, die auf Dual-Screen- oder faltbare Geräte abzielen, ein zweispaltiges Raster an der Basis sein werden, das die verfügbaren logischen oder physischen Anzeigebereiche darstellt.“ Die Samsung-Entwicklerdokumentation geht sogar noch weiter und schlägt vor, dass das sekundäre Display selbst in zwei Teile geteilt werden kann, wodurch insgesamt drei separate „Bildschirme“ bereitgestellt werden.

Auf einer Koch-Website könnte dies bedeuten, dass das Rezept auf einem Bildschirm und die Zutaten auf dem anderen angezeigt werden. Auf einer Nachrichten-Website könnte dies bedeuten, dass Sie auf einem Bildschirm Artikel kopieren und auf dem anderen die zugehörige Lektüre lesen. Es kommt wie immer auf den Inhalt an. In seiner ehrgeizigsten Form könnte das faltbare Web wie zwei mobile Bildschirme funktionieren.

Aufräumen

Für viele wird der Aufstieg faltbarer Geräte weniger eine Wende als vielmehr eine bescheidene Verbesserung der Benutzererfahrung bedeuten. Steve Krug, Autor von Don't Make Me Think! A Common Sense Approach to Web Usability , sieht das faltbare Web eher als Evolution denn als Revolution. „Aufklappbare Telefone erschienen mir immer als der nächste vernünftige Schritt“, sagt er. Nicht wegen der Dual-Screen-Fähigkeit, sondern weil sie Tablet-Erlebnisse tragbarer machen und den Wunsch nach „einem Tablet, das ich in meiner Tasche tragen kann“ erfüllen.

Phablet ist nicht nur ein Top-Anwärter auf das schlechteste Portmanteau aller Zeiten (bei den Weltmeisterschaften 2019 verlor es nur knapp gegen „Guesstimate“), sondern könnte auch ein neues Zuhause finden. Anstatt ein Telefon zu meinen, das so groß ist, dass es im Grunde ein Tablet ist, ist ein Phablet das eine oder andere, je nachdem, ob das Gerät offen, geschlossen oder irgendwo dazwischen ist.

„Es gibt Klassen von Apps, die von einem geteilten Bildschirm oder unterschiedlichen Seitenverhältnissen profitieren würden, aber zum größten Teil bringen Ihnen diese Geräte nichts Neues, wenn Sie nur einen größeren Bildschirm zum Ansehen von Videos wünschen.“

—Steve Krug

In vielen Fällen bedeutet das „faltbare Web“ einfach eine bessere Optimierung von Websites für Displays in Tablet-Größe. Derzeit haben Tablets weltweit nur einen Marktanteil von etwa 3 % (im Vergleich zu 52 % für Mobilgeräte und 45 % für Desktops). Wenn faltbare Geräte eine Delle machen, werden sie viel schwerer zu ignorieren sein.

Wenn Leute wie Apple ein faltbares Gerät herausbringen, kann man mit Sicherheit sagen, dass es sich wie warme Semmeln verkaufen wird. Da immer mehr faltbare Technologien auf den Markt kommen, muss das Webdesign seine Reaktionsfähigkeit verbessern, nur um die vorhandene Funktionalität aufrechtzuerhalten. Zumindest muss etwas aufgeräumt werden.

Weiterführende Lektüre

• „Galaxy Fold-Dokumentation“, Samsung Developers, Samsung
• „Das Potenzial faltbarer Telefone, UX in eine Katastrophe zu verwandeln“, Moses Kim, Medium
• „Die Evolution des responsiven Designs“, Rachel Andrew, Notist (Vortragsfolien)
• „Microsoft Developer Day: Building Dual-Screen Experiences“, Microsoft (Video)

Sei flexibel

Was bedeutet also das faltbare Netz? Kurz gesagt, es liegt an Ihnen. Der Trend markiert wahrscheinlich den nächsten Schritt im Responsive Design. Mit Hilfe neuer CSS- und JavaScript-Funktionen können Entwickler Multi-Screen-Erlebnisse erstellen, wo zuvor einzelne, ununterbrochene Rechtecke von Desktop, Handy und Tablet vorhanden waren.

Wie weit diese Erfahrungen gehen können, bleibt abzuwarten. Es ist davon auszugehen, dass das „faltbare Netz“ nicht fertig geliefert wird. Es gibt keine Garantie dafür, dass Geräte wie Smartphones durchstarten werden, zumal die meisten von ihnen immer noch über 2.000 Dollar kosten. Auf der Hardwareseite wird es Kinderkrankheiten geben, eine Zeit der Turbulenzen, nach der sich die Technologie wahrscheinlich in zuverlässige Stile einarbeiten wird.

Es ist die Aufgabe von Entwicklern und Designern, diese Plattformen so weit wie möglich voranzutreiben. Das faltbare Web ist eine Gelegenheit, Websites Fluidität und Funktionalität zu verleihen, die vorher nicht möglich waren. Es bedeutet, Websites reaktionsschneller als je zuvor zu machen.

Es stellt auch eine einzigartige Gelegenheit dar, Neuland zu erkunden. Obwohl es sich nicht um eine seismische Veränderung handelt, ist das faltbare Web wahrscheinlich die größte Veränderung des Status quo seit dem iPhone. Was das für die Syntax bedeutet, ist sehr offen. Webstandards werden nicht in verrauchten Hinterzimmern ausgeheckt. Jetzt ist es an der Zeit, sich einzubringen, Feedback zu geben, Vorschläge zu machen und zu experimentieren.

Hier sind einige Ressourcen, um sich zu engagieren.

• „Vorschlag neuer CSS-Primitive, um großartige Weberlebnisse auf faltbaren und Dual-Screen-Geräten zu ermöglichen“, Zouhir Chahoud, GitHub
• „ css-media-queries Foldables Support and Enablement“, Adam Argyle, GitHub
• Windows 10X-Entwicklungstools (Download)
• Microsoft Edge-Insider-Kanäle (Download)
• Kommentiere unten!

Mobile-First-Design wird komplizierter, aber auch spannender. Das faltbare Web könnte das erste Mal sein, dass sich Handheld-Geräte expansiv und nicht restriktiv anfühlen. Für einige Websites bedeutet dies Optimierungen, während für andere umfassende Neugestaltungen erforderlich sind. Der Umfang des Möglichen hängt von der Innovationskraft der Entwickler ab.

Was halten Sie also für möglich?