Eine solide Grundlage
Eine solide Grundlage ist die Grundvoraussetzung für die Erstellung guter PWAs. Um diese Grundlage zu implementieren, müssen Sie anhand einiger Prinzipien Design und Code für die Einschränkungen des Internets entwerfen und programmieren:
- Nutzen Sie Mobilgeräte als Einschränkung. Stellen Sie sicher, dass sich jede Designansicht nur auf die wesentlichen Inhalte und Interaktionen konzentriert.
- Inhalte und Kernfunktionen im Designprozess hervorheben.
- Bei Bedarf schrittweise verbessern Erstellen Sie zunächst den Hauptinhalt und die Hauptfunktion einer Komponente mit den unkompliziertesten, am weitesten verbreiteten Tools. Machen Sie sie barrierefrei. Testen Sie dann die erweiterten Funktionen, die Sie verwenden möchten, und optimieren Sie Ihre Komponente damit.
- Bieten Sie eine schnelle und positive Nutzererfahrung, bei der der Schwerpunkt auf nutzerorientierten Leistungsmesswerten im Web liegt. Sie erhalten echte Nutzermesswerte und steigern die Leistung für alle Nutzer unabhängig von ihrer Netzwerkverbindung, ihrem Eingabetyp, ihrer CPU- oder GPU-Leistung.
Wenn Sie diese Prinzipien befolgen und Ihre Produkte mit modernen Mustern und Webfunktionen verbessern, können Sie großartige und schnelle Erfahrungen mit wirklich unverwechselbaren Designs schaffen. Designs, die auf Einschränkungen statt auf Pixeln basieren und jedem Nutzer den Zugriff auf Ihre Inhalte und Hauptfunktionen in einer Weise ermöglichen, die am besten für seinen speziellen Browser-Kontext geeignet ist.
Responsives Webdesign
Seit Ethan Marcottes Artikel Responsives Webdesign (2010) in „A List Apart“ verfasst wurde, werden Designer und Entwickler dazu ermutigt, flexible Nutzungsoberflächen zu schaffen, die für unterschiedliche Bildschirmgrößen und Geräte geeignet sind.
Irgendwann wurde sie jedoch auf Mobilgeräte, Tablets und Computer verkürzt, wobei die Breiten stark von den iOS-Bildschirmgrößen beeinflusst wurden. Mit modernem CSS und einem neuen Fokus auf die ursprüngliche Absicht von responsivem Design können wir die Squish-Methode auf squishy Websites zurückversetzen.
Responsives Webdesign umfasst drei technische Bestandteile:
- Fließende Raster
- Flexible Medien
- Medienabfragen
Ethan kommt zu dem Schluss, dass diese technischen Anforderungen nicht ausreichen. In Zukunft erfordert es auch eine andere Denkweise.
Der Mythos mobiler Nutzer
In den Anfängen des responsiven Webdesigns wurden Annahmen getroffen, um das Design von Websites zu vereinfachen. So wurden beispielsweise kleine Elemente auf Smartphones mit 320 Pixel breit, mittel für Tablets und 1.024 Pixel breit. Für Computer war alles größer. Kleine Bildschirme boten Touchfunktionen, große Bildschirme nicht. Die Nutzenden waren in Eile und wurden abgelenkt und brauchten daher eine „leichte“ Erfahrung.
Nichts davon trifft zu. Es handelt sich um Mythen rund um das Thema Mobilgeräte, mit der Annahme, dass sich die Anforderungen von Nutzern grundlegend unterscheiden, allein aufgrund der Bildschirmgröße oder des Gerätetyps. Dieser Punkt lässt sich einer Prüfung nicht standhalten.
Nehmen wir z. B. eine PWA für ein soziales Netzwerk, die Sie sofort auf Mobilgeräten und Computern installieren können. Auf dem Computer können viele Nutzer während der Arbeit ein schmales Fenster mit dem Feed auf einer Seite des Bildschirms halten. Aufgrund der verfügbaren Breite wäre die Annahme eines Mobilgeräts falsch.
Die PWA, die nicht mehr auf dem Browsertab zu finden ist, stellt responsives Webdesign vor neue Herausforderungen, zum Beispiel den Minimodus und die Arbeit mit faltbaren Geräten.
Minimodus
Wenn eine PWA auf einem Desktop-Gerät installiert ist, kann ein Fenster sehr klein werden: kleiner als ein Browserfenster, kleiner als ein mobiler Darstellungsbereich. Das ist etwas Neues im Web: Wir können einen Minimodus unterstützen, ein Fenster, das nur 200 x 100 CSS-Pixel groß sein kann.
Wenn man eine PWA entwirft, ist es heutzutage eine gute Idee, sich Gedanken darüber zu machen, was Sie im Minimodus anbieten möchten, etwa dank des responsiven Webdesigns, wie z. B. der Steuerungsschaltflächen in einem Musikplayer, Dashboard-Informationen oder Schnellaktionen.
Auf einem Computer kann eine PWA in einem kleineren Fenster gerendert werden als das kleinste Fenster, das Sie jemals für den Browser entworfen haben. Er fügt Ihrem responsiven Webdesign einen neuen Haltepunkt hinzu: den Minimodus.
Faltbare und hybride Modelle
Faltbare und Hybrid-Geräte sind auch heute noch weit verbreitet:
- Kleine Clamshell-Smartphones.
- Faltbare Geräte, die als Smartphones oder Tablets verwendet werden können
- Laptops, die in Tablets umgewandelt werden können
- Tablets, die als Laptops mit Tastatur und Touchpad genutzt werden können
- Smartphones können mit einem Hub in einen Desktop-Computer umgewandelt werden.
Jede Website hat diese Herausforderung, aber mit einer progressiven Web-App haben Sie die Kontrolle und sind für das Zeitfenster verantwortlich, in dem die App installiert wird. Daher sollte Ihr Design reagieren und in jedem Kontext die beste User Experience bieten.
Alles an erster Stelle
Aber wo fangen Sie am besten an? Erst mobil, dann offline? Welche der folgenden Optionen sind das, wenn Sie ein Design für die Flexibilität des Webs entwerfen? Die Antwort lautet: Ja, alles zuerst. Der Begriff Mobile First wird seit der Prägung von Luke Wroblewski 2009 in vielerlei Hinsicht interpretiert: von der Emulation plattformspezifischer Benutzeroberflächen- und UX-Muster im Web über die Entwicklung mobiler Apps vor der Entwicklung von Webanwendungen bis hin zu Medienabfragen mit minimaler Breite. Der ursprüngliche Zweck von Android ist jedoch: Mobilgeräte zwingen Sie, sich zu konzentrieren. Wie Lukas schon sagte:
Bei Mobilgeräten müssen sich Softwareentwicklungsteams nur auf die wichtigsten Daten und Aktionen in einer Anwendung konzentrieren. In einem 320 x 480 Pixel großen Bildschirm ist einfach kein Platz für überflüssige, unnötige Elemente. Sie müssen Prioritäten setzen. Bei der Entwicklung der Mobile-First-Infrastruktur konzentriert sich ein Team auf die wichtigsten Aufgaben, die die Nutzer erledigen möchten – ohne Umwege und Verunreinigungen der Benutzeroberfläche, die die Desktop-Websites von heute verschmutzen würden. Das ist eine gute User Experience und gut fürs Geschäft.
Luke Wroblewski
Konzentrieren Sie jede Ansicht Ihrer Website auf die wesentlichen Aufgaben, die Nutzende dort erledigen möchten, und fügen Sie der Idee nicht mehr hinzu, nur weil sie mehr Platz auf dem Bildschirm haben.
Das zweite Prinzip wird beim responsiven Webdesign angedeutet: der „Farbverlauf der verschiedenen Erlebnisse“. Ein einheitliches, identisches und pixelgenaues Erlebnis für jeden einzelnen Nutzer sollte nicht das Ziel Ihrer Arbeit sein – es ist nahezu unmöglich.
Betrachten Sie die Nutzererfahrung im Web nicht mehr als feste Aspekte, sondern als eine Reihe von Empfehlungen, mit denen das Gerät des Nutzers die beste Erfahrung für seinen aktuellen Kontext erstellen kann. Dazu muss Progressive Enhancement akzeptiert werden.
Progressive Enhancement
Bei der progressiven Verbesserung können wir Code schreiben, der überall ausgeführt wird – von Standard-HTML-, CSS- und JavaScript-Code bis hin zu weiteren Funktionen mit geeigneten Fallbacks, wenn keine API verfügbar ist.
Wie können Sie Verbesserungen erzielen? Die Funktionserkennung ist ein Muster, bei dem Sie einen Test für den Support durchführen und basierend auf diesen Testergebnissen reagieren. Dafür gibt es mehrere integrierte Tools und Vorgehensweisen auf Webplattformen.
Prüfen Sie mit @supports, ob eine CSS-Funktion vom Browser unterstützt wird, und wenden Sie auf Grundlage des Ergebnisses Regeln an.
Das gilt sowohl für CSS-Eigenschaften als auch für Werte. Wenn eine Eigenschaft unterstützt wird, ein Wert nicht, schlägt sowohl die Eigenschaft als auch eine nicht unterstützte Eigenschaft fehl. Der JavaScript-Code kann über die CSSSupportsRule darauf zugreifen.
Die meisten neuen Webplattformfunktionen sind an vorhandene Objekte angehängt, sodass 'feature' in der Objektstilerkennung gut in JavaScript funktioniert, ebenso wie andere ähnliche Suchen wie die Überprüfung von Eigenschaften oder Methoden für Elemente.
Wenn du modernes JavaScript senden möchtest, kannst du das Muster „module/nomodule“ verwenden, um robustere Funktionen mit einer kleineren Nutzlast für modernere Browser und eine Fallback-Funktion für ältere Browser bereitzustellen. Damit wird eine neue Baseline von JavaScript-Funktionen garantiert, wie Promise, Klassen, Pfeilfunktionen sowie const und let für Browser, die ES-Module unterstützen.
Du kannst sogar mehrere Formen der Funktionserkennung kombinieren, um deine Baseline zu verbessern. Der vom BBC News-Team geprägte Titel heißt „Cutting the Mustard“. Damit kannst du jedem Nutzer ein zentrales Erlebnis bieten und das Erlebnis erst dann verbessern, wenn ein bestimmter Balken für eine bestimmte Funktion erreicht wurde.
Geräteerkennung vermeiden
Sie sollten die Funktionsunterstützung direkt testen, anstatt Annahmen zum Support basierend auf dem User-Agent-String zu treffen.
User-Agent-Strings waren noch nie wirklich zuverlässig. Sie müssen sich mit jeder Kombination aus Browser, Betriebssystem und Gerät genau auskennen, um die richtige Entscheidung zu treffen. Selbst dann sind sie anfällig für Nutzer-Spoofing. Zum Beispiel sind Weiterleitungen auf Desktop-Websites in mobilen Browsern oft so einfach wie das Spoofing eines User-Agent-Strings für Desktop-Computer.
Darüber hinaus arbeiten Browser daran, ihre User-Agent-Strings einzufrieren, wobei User-Agent-Strings zur Funktionserkennung ausdrücklich als Grund für die Einstellung genannt werden. Dadurch werden sie noch unzuverlässiger als bisher bei der Identifizierung von Nutzern und Geräten.
Inhalte zuerst
Ein weiteres Prinzip der Designentwicklung für das Web lautet: Beginnen Sie mit Ihren Inhalten. Zum Beispiel ist ein Echtzeit-Börsenticker mit einem Diagramm der Aktienkurse im Kern eine Tabelle mit Aktien über einen bestimmten Zeitraum, vielleicht mit einem Link zum Aktualisieren der Website.
Diese können dann mit JavaScript und Abrufanfragen verbessert werden, um die Werte der Tabelle in einem Timer zu aktualisieren, oder mit Sockets erweitert, um Push-basierte Aktualisierungen in Echtzeit bereitzustellen. Sie kann wieder optimiert werden, um die Ergebnisse grafisch darzustellen, vielleicht mit CSS, vielleicht mit SVG und vielleicht mit Canvas. Aber der Kern beginnt mit den Inhalten.
Intrinsisches Design
- Mobilgeräte als fokussiertes Hindernis für die User Experience.
- Inhalte und Hauptfunktionen im Designprozess hervorheben.
- Sie wird schrittweise mit erweiterten Funktionen verbessert, sofern verfügbar.
Zusammen ergeben diese Prinzipien etwas Neues: intrinsisches Design. In ihrem Vortrag Intrinsische Layouts entwerfen spricht Jen Simmons über die Verwendung moderner CSS-Tools wie Raster, Flexbox, Flusslayout und Schreibmodi, um Benutzeroberflächen zu entwerfen und zu erstellen. Mit diesen Tools sagt sie:
Sie können das Layout so gestalten, dass es zu unserem Content und unserem Design passt.
Jen Simmons
Mit diesem neuen CSS erhalten Designfachkräfte etwas Kontrolle über das Layout, wobei dies im Einklang mit den neuesten Webdesignprinzipien geschieht. Anstatt feste Formulare basierend auf festen Bildschirmgrößen zu erstellen, definieren Sie inhaltsbasierte Regeln, nach denen das Layout erfolgt. Dazu nutzen Sie intrinsische Eigenschaften dieses Inhalts, z. B. wie klein oder groß er sein kann, die Größe des Textes und der verfügbare Platz – alles auf einmal. Sie ermöglichen es Ihnen, Ihr Design so zu gestalten, dass es mit Ihren Inhalten interagiert, ohne die Platzierung jedes Pixels steuern zu müssen.
Intrinsische Layouts bringen das Gespräch über Kontrolle im Web zu einem vollen Kreis und geben ihm eine Definition. Die Kontrolle im Web bezieht sich nicht darauf, jedem Besucher Ihrer Website Geräte, Bildschirmgrößen, Farben, Schriftarten oder Layouts oder Funktionen vorzuschreiben. Bei der Steuerung im Web werden Regeln geschrieben, anhand derer ein Browser deine Nutzererfahrung zusammenstellen und für jeden Nutzer in deiner progressiven Web-App individuell erstellen kann.
Leistung im Web
Die letzte, aber nicht unwichtigste Grundlage für unsere PWA ist die Webleistung. Eine positive Nutzererfahrung ist unerlässlich, um mehr Conversions zu erzielen.
Die Leistung im Web umfasst mehrere Schritte:
- Machen Sie sich mit den verfügbaren nutzerorientierten Messwerten vertraut.
- Legen Sie Ziele für jeden Messwert fest.
- Analysieren Sie unsere PWA.
- Verbessern Sie unsere Messwerte, indem Sie Techniken und Best Practices statisch in unserem Code oder Server anwenden.
- Messen Sie noch einmal.
- Verbessern Sie die Erfahrung für alle Nutzer live, basierend auf dem Kontext des Nutzers.
Mit Messwerten zur Webleistung wird heute gemessen, wie schnell Ihre Inhalte auf dem Bildschirm angezeigt werden, aber auch, wie interaktiv Ihre Website ist und wie Nutzer die Website wahrnehmen.
Web Vitals
In den letzten zehn Jahren haben wir uns mit verschiedenen Kennzahlen beschäftigt, um den Erfolg im Web zu messen. Derzeit sind einige empfohlene Messwerte unter dem Projekt Web Vitals zusammengefasst. Bei Web Vitals liegt der Schwerpunkt auf drei wichtigen Bereichen, die sich auf die Leistung und Wahrnehmung von Websites auswirken:
- Wird geladen
- Interaktiv
- Visuelle Stabilität
Mit Core Web Vitals sehen Sie auf einen Blick, wie gut oder schlecht Ihre PWA in Bezug auf Webleistung und Nutzerfreundlichkeit ist.
PWA-Grundlagen
Wichtig ist, dass Ihre PWA ein solides Fundament im responsiven Design, mobiles Design und alles muss, was an erster Stelle steht, integriertes Design und Webleistung, da diese die Grundlage für eine positive Nutzererfahrung für alle Ihre Nutzer sind.