Stiftungen

Eine solide Grundlage

Eine solide Grundlage ist die Grundvoraussetzung für die Entwicklung hervorragender PWAs. Um diese Grundlage zu implementieren, müssen Sie mithilfe einiger Prinzipien für die Einschränkungen des Webs entwerfen und programmieren:

  • Verwenden Sie Mobilgeräte als Fokusbeschränkung. Achten Sie darauf, dass sich jede Ansicht Ihres Designs nur auf die wichtigsten Inhalte und Interaktionen konzentriert.
  • Betonen Sie im Designprozess die Inhalte und die Hauptfunktionen.
  • Erhöhen Sie bei Bedarf die Anzahl der Prototypen. Erstellen Sie zuerst die Hauptinhalte und Funktionen einer Komponente mit den einfachsten und am weitesten verbreiteten Tools. Sorgen Sie für Barrierefreiheit. Testen Sie dann erweiterte Funktionen, die Sie verwenden möchten, und verbessern Sie Ihre Komponente damit.
  • Bieten Sie eine schnelle und gute Nutzererfahrung mit einem Fokus auf nutzerzentrierte Web-Leistungsmesswerte, erhalten Sie Messwerte zu echten Nutzern und steigern Sie die Leistung für alle Nutzer, unabhängig von ihrer Netzwerkverbindung, ihrem Eingabetyp, ihrer CPU oder ihrer GPU.

Wenn Sie diese Prinzipien befolgen und mit modernen Mustern und Webfunktionen ergänzen, können Sie mit wirklich inhärenten Designs eine hervorragende und schnelle Nutzererfahrung schaffen. Designs, die auf Einschränkungen statt auf Pixeln basieren, sodass jeder Nutzer auf Ihre Inhalte und Hauptfunktionen auf eine Weise zugreifen kann, die für seinen jeweiligen Browserkontext am besten geeignet ist.

Responsives Webdesign

Seit dem Artikel Responsives Webdesign von Ethan Marcotte in A List Apart im Jahr 2010 werden Designer und Entwickler dazu ermutigt, flexible Designs zu entwickeln, die auf einer Vielzahl von Bildschirmgrößen und Geräten funktionieren.

Irgendwann wurde dies jedoch auf Smartphones, Tablets und Computer abgekürzt, wobei die Breite stark von den iOS-Bildschirmgrößen beeinflusst wurde. Mit modernem CSS und einem neuen Fokus auf das ursprüngliche Prinzip des responsiven Designs können wir die blitzschnellen Websites wieder aufpeppen.

Responsives Webdesign umfasst drei technische Elemente:

  • Fließende Raster
  • Flexible Medien
  • Medienabfragen

Ethan kommt zu dem Schluss, dass diese technischen Anforderungen nicht ausreichen. Der Weg in die Zukunft erfordert auch eine andere Denkweise.

Der Mythos von mobilen Nutzern

In den frühen Tagen des responsiven Designs wurden Annahmen getroffen, um das Entwerfen von Websites zu vereinfachen. Kleinere Anzeigenvarianten waren beispielsweise für Smartphones mit einer Breite von 320 Pixeln, mittelgroße für Tablets mit einer Breite von 1.024 Pixeln und alle größeren Inhalte für Computer geeignet. Kleine Bildschirme hatten Touchbedienung, große nicht. Smartphone-Nutzer waren in Eile und abgelenkt und benötigten daher eine „leichte“ Lösung.

Das ist nicht wahr. Es sind Mythen, die durch die Annahme aufrechterhalten werden, dass sich die Anforderungen der Nutzer allein aufgrund der Bildschirmgröße oder des Gerätetyps grundlegend unterscheiden. Das reicht einer Überprüfung nicht aus.

Nehmen wir beispielsweise eine PWA für ein soziales Netzwerk, die Sie heute 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 an einer Seite des Bildschirms geöffnet lassen. Es wäre also falsch, anzunehmen, dass sie auf einem Mobilgerät sind, weil die verfügbare Breite gering ist.

Die PWA-Welt, die nicht auf dem Browsertab angezeigt wird, stellt das responsive Design vor neue Herausforderungen, z. B. den Minimodus und die Arbeit mit faltbaren Geräten.

Mini-Modus

Wenn eine PWA auf einem Desktop-Gerät installiert ist, kann ein Fenster sehr klein werden: kleiner als ein Browserfenster, kleiner als der mobile Darstellungsbereich. Das ist etwas Neues im Web: Wir können einen Minimodus unterstützen, ein Fenster, das so klein wie 200 × 100 CSS-Pixel sein kann.

Wenn Sie heutzutage eine PWA erstellen, sollten Sie sich überlegen, was Sie im Minimodus anbieten möchten, dank responsivem Webdesign, z. B. nur Steuerschaltflächen für einen Musikplayer, Dashboard-Informationen oder Schnellaktionen.

Auf dem Computer kann eine PWA in einem kleineren Fenster gerendert werden als das kleinste Fenster, das Sie je für den Browser entworfen haben. Es wird ein neuer Grenzwert für Ihr responsives Webdesign hinzugefügt: der Minimodus.

Faltbare Smartphones und Hybridgeräte

Auch faltbare und hybride Geräte sind heutzutage weit verbreitet:

  • Kleine Klapphandys.
  • Faltbare Geräte, die als Smartphones oder Tablets verwendet werden können.
  • Laptops, die sich in Tablets verwandeln lassen.
  • Tablets, die als Laptops mit Tastatur und Touchpad genutzt werden können
  • Smartphones können dann mit einem Hub in einen Desktop-Computer umgewandelt werden.

Diese Herausforderung besteht zwar für jede Website, aber bei einer progressiven Webanwendung haben Sie die Kontrolle und sind für den Zeitraum verantwortlich, in dem die App installiert wird. Daher sollte Ihr Design in jedem Kontext reagieren und die beste Nutzererfahrung bieten.

Alles zuerst

Aber wo fangen Sie am besten an? Mobile-First-Ansatz, Content zuerst, Offline-erster? Welches ist es, wenn Sie ein Design für die Flexibilität des Webs entwickeln? Die Antwort lautet: Ja, alles zuerst. Der Begriff Mobile-first wurde seit seiner Einführung durch Luke Wroblewski im Jahr 2009 auf viele Arten interpretiert: von der Emulation plattformspezifischer UI- und UX-Muster im Web über das Erstellen von mobilen Apps vor dem Erstellen von Webanwendungen bis hin zur Verwendung von Media-Queries mit Mindestbreite. Der ursprüngliche Sinn ist jedoch folgender: Auf Mobilgeräten müssen Sie sich konzentrieren. Wie Lukas schon sagte:

Bei Mobilgeräten müssen sich Softwareentwicklungsteams nur auf die wichtigsten Daten und Aktionen in einer Anwendung konzentrieren. Auf einem Bildschirm mit 320 × 480 Pixeln ist einfach kein Platz für überflüssige Elemente. Sie müssen Prioritäten setzen. Wenn ein Team also ein Mobile-first-Design entwirft, liegt der Fokus auf den wichtigsten Aufgaben, die Nutzer erledigen möchten, ohne Umwege und unnötige Elemente, die die heutigen Websites für den Desktop-Zugriff überladen. Das ist nutzerfreundlich und gut fürs Geschäft.

Luke Wroblewski

Konzentrieren Sie jede Ansicht Ihrer Website auf die wesentlichen Aufgaben, die Nutzer dort erledigen möchten. Fügen Sie der Idee nicht mehr hinzu, nur weil sie mehr Platz auf dem Bildschirm haben.

Das zweite Prinzip wird im responsiven Webdesign angedeutet: der „Grad der unterschiedlichen Nutzung“. Ein einzelnes, identisches, pixelgenaues Erlebnis für jeden einzelnen Nutzer sollte nicht das Ziel Ihrer Arbeit sein. Das ist so gut wie unmöglich.

Anstatt Ihre Weberfahrung als etwas Festes zu betrachten, sollten Sie sie als eine Reihe von Empfehlungen betrachten, die auf dem Gerät des Nutzers verwendet werden, um die beste Erfahrung für den aktuellen Kontext zu schaffen. Dazu müssen progressive Verbesserungen genutzt werden.

Progressive Verbesserung

Progressive Verbesserung ist ein Muster, mit dem wir Code schreiben können, der überall funktioniert. Ausgehend von Standard-HTML, -CSS und -JavaScript werden zusätzliche Funktionen mit geeigneten Fallbacks hinzugefügt, wenn eine API nicht verfügbar ist.

Wie optimieren Sie? Bei der Funktionserkennung führen Sie einen Test zur Unterstützung durch und reagieren auf Grundlage der Testergebnisse. Hierfür gibt es verschiedene integrierte Webplattform-Tools und -Praktiken.

Prüfen Sie mit @supports, ob eine CSS-Funktion vom Browser unterstützt wird, und wenden Sie basierend auf dem Ergebnis Regeln an. Dies gilt sowohl für CSS-Eigenschaften als auch für Werte. Wenn eine Eigenschaft unterstützt wird, ein Wert jedoch nicht, schlägt sie fehl, ebenso wie eine nicht unterstützte Eigenschaft. Der JavaScript-Code kann über die CSSSupportsRule darauf zugreifen.

Die meisten neuen Webplattform-Funktionen sind mit vorhandenen Objekten verknüpft, sodass 'feature' in der Objektstilerkennung in JavaScript ebenso gut funktioniert wie andere ähnliche Suchen, z. B. die Suche nach Eigenschaften oder Methoden für Elemente.

Wenn du modernes JavaScript veröffentlichen möchtest, kannst du das Muster module/nomodule verwenden, um modernere Browser zuverlässigere Funktionen mit kleinerer Nutzlast und älteren Browsern ein Fallback zur Verfügung zu stellen. Außerdem ist dadurch eine neue Baseline von JavaScript-Funktionen wie Promises, Klassen, Pfeilfunktionen und const und let für Browser verfügbar, die ES-Module unterstützen.

Sie können sogar mehrere Formen der Merkmalserkennung kombinieren, um eine erweiterte Baseline zu erstellen. Diese vom BBC News-Team geprägte Methode wird als „Cutting the Mustard“ bezeichnet. Sie ermöglicht es, allen Nutzern eine grundlegende Funktion zur Verfügung zu stellen und erst dann Verbesserungen vorzunehmen, wenn ein bestimmter Wert für die Funktion erreicht wurde.

Geräteerkennung vermeiden

Sie sollten direkt testen, ob die Funktionen unterstützt werden, anstatt von einer Unterstützungsannahme auszugehen, die auf dem User-Agent-String basiert.

User-Agent-Strings waren nie wirklich zuverlässig. Sie müssen nahezu perfektes Wissen über jeden Browser, jedes Betriebssystem und jede Gerätekombination haben, um die richtige Entscheidung zu treffen. Selbst dann sind sie anfällig für User-Spoofing. Beispielsweise ist es oft so einfach wie das Spoofing eines Desktop-User-Agent-Strings, Desktopwebsites in mobilen Browsern weiterzuleiten.

Darüber hinaus arbeiten Browser daran, ihre User-Agent-Strings zu fixieren. User-Agent-Strings für die Funktionserkennung werden als Grund für die Einstellung genannt. Das macht sie noch unzuverlässiger als zuvor zur Identifizierung von Nutzern und Geräten.

Inhalte im Fokus

Ein weiteres Prinzip des Webdesigns lautet: Beginnen Sie zuerst mit Ihren Inhalten. Ein Echtzeit-Aktienticker mit einem Diagramm der Kurse einer Aktie ist im Grunde eine Tabelle mit Aktien und deren Kursen über einen bestimmten Zeitraum, möglicherweise mit einem Link zum Aktualisieren der Website.

Dieser kann dann mit JavaScript und Abrufanfragen erweitert werden, um die Werte der Tabelle nach einem Timer zu aktualisieren, oder mit Sockets, um Push-basierte Echtzeitaktualisierungen bereitzustellen. Sie kann noch einmal verbessert werden, um die Ergebnisse in Diagrammen darzustellen, vielleicht mit CSS, vielleicht mit SVG, vielleicht mit Canvas. Der Kern beginnt jedoch mit Inhalten.

Intrinsisches Design

  • Mobilgeräte als zentrales Problem bei der Nutzererfahrung
  • Hervorheben von Inhalten und Hauptfunktionen im Designprozess
  • Die Funktion wird nach und nach um erweiterte Funktionen ergänzt, sofern verfügbar.

Zusammen ergeben diese Prinzipien etwas Neues: das intrinsische Design. In ihrem Vortrag Designing Intrinsic Layouts spricht Jen Simmons über die Verwendung moderner CSS-Tools wie Grid, Flexbox, Flow Layout und Schreibmodi zum Entwerfen und Erstellen von Benutzeroberflächen. Mit diesen Tools kann sie:

Sie können das Layout wirklich an die Inhalte und das Design anpassen, das wir haben und das wir umsetzen möchten.

Jen Simmons

Mit diesem neuen CSS können Designer die Kontrolle über das Layout wiedererlangen, aber auf eine Weise, die den neuesten Prinzipien des Webdesigns entspricht. Anstatt feste Formulare basierend auf festen Bildschirmgrößen zu erstellen, definieren Sie Inhaltsbasierte Regeln, die das Layout bestimmen, indem sie die intrinsischen Eigenschaften dieses Inhalts nutzen, z. B. wie klein oder groß er sein kann, die Größe des Texts und den verfügbaren Platz. So können Sie Ihr Design so gestalten, dass es mit Ihren Inhalten interagiert, ohne die Platzierung jedes Pixels steuern zu müssen.

Mit intrinsischen Layouts wird die Diskussion über die Kontrolle im Web abgeschlossen und definiert. Im Web geht es nicht darum, Geräte, Bildschirmgrößen, Farben, Schriftarten, Layouts oder Funktionen für jeden Besucher Ihrer Website festzulegen. Bei der Websteuerung geht es darum, Regeln zu schreiben, die ein Browser verwendet, um die Benutzeroberfläche zusammenzustellen und für jeden Nutzer in Ihrer progressiven Webanwendung individuell zu erstellen.

Webleistung

Die letzte, aber nicht am wenigsten wichtige Grundlage unserer PWA ist die Webleistung. Eine gute Nutzererfahrung ist unerlässlich. Sie führt auf jede erdenkliche Weise zu mehr Conversions.

Die Webleistung umfasst mehrere Schritte:

  • Informationen zu den wichtigsten nutzerorientierten Messwerten
  • Legen Sie Ziele für jeden Messwert fest.
  • Unsere PWA analysieren
  • Wir verbessern unsere Messwerte, indem wir Techniken und Best Practices statisch in unserem Code oder auf unserem Server anwenden.
  • Noch einmal messen.
  • Die Nutzerfreundlichkeit für jeden Nutzer in Echtzeit basierend auf dem Kontext des Nutzers verbessern.

Mit Messwerten zur Webleistung messen Sie, wie schnell Ihre Inhalte auf dem Bildschirm angezeigt werden, wie interaktiv Ihre Website ist und wie Nutzer die Erfahrung wahrnehmen.

Core Web Vitals

In den letzten zehn Jahren haben wir uns mit verschiedenen Kennzahlen beschäftigt, um den Erfolg der Webleistung zu messen. Aktuell konzentrieren sich die empfohlenen Messwerte, die sogenannten Core Web Vitals, auf drei wichtige Bereiche, die sich auf die Leistung und Nutzerfreundlichkeit auswirken:

Eine Reihe von Messwerten aus Core Web Vitals, die die Leistungsergebnisse einer Website zeigen.

Mit Core Web Vitals können Sie auf einen Blick erkennen, wie gut oder schlecht Ihre PWA in Bezug auf Leistung und Nutzerfreundlichkeit ist.

PWA-Grundlagen

Ihre PWA sollte auf einem soliden Fundament aus responsivem Design, Mobile-first-Design, Intrinsischem Design und Webleistung basieren, um allen Nutzern eine hervorragende Nutzererfahrung zu bieten.

Ressourcen