Die intern von unserem eigenen Paul Lewis entwickelte CDS-Website zeigte, wie man eine hervorragende mobile Weberfahrung für Konferenzbesucher schaffen kann.
Hintergrundvideos
Bemerkenswert ist, wie flüssig die Website in verschiedenen mobilen Browsern dargestellt wird. Dabei werden die Layout- und Farbzyklen des Browsers optimal genutzt.
Neue Webplattformfunktionen verwendet
- Service Worker
- Manifest
- Farbe des Designs
Muster
- Ausstehende Karten
- Responsives Raster
- Material Design
Quellcode
Das Interview
Entwicklung
Als Paul sich mit der Entwicklung der Website begann, bestand eine der wichtigsten Prioritäten für die Progressive Enhancement. Anstatt ein Design für Desktop-Computer zu entwickeln, hat er es zuerst für kleine Bildschirme entwickelt und dann auf größere Bildschirme erweitert. Das Ergebnis: schrittweise verbessert, statt wie ein Graceful Degrading zu durchlaufen. Das erforderte eine Reihe von Medienabfragen, aber auch ein gewisses Maß an Freiheit, um kleine Änderungen zwischen den wichtigsten Haltepunkten im Auge zu behalten. Durch das Vor- und Zurückspulen zwischen Bildschirmgrößen hatte er eine Vorstellung davon, wo der Inhalt kaputtgehen würde, sodass er das Problem schnell beheben konnte.
Ein weiterer wichtiger Aspekt von Produktexperten ist, dass sie möglichst abwärtskompatibel sind. Paul entschied sich für die Verwendung von Floating-Creatives über Flexbox, weil er die Website glaubte, die Anzahl der Browser zu erhöhen, in denen die Website funktionieren würde. Für das spezifische Layout der Website war dies überhaupt kein Problem. Wenn er die Flexbox bräuchte, hätte er sie mithilfe von PEs hinzugefügt.
Eine große Herausforderung der Website war die Funktion zum Maximieren und Minimieren von Karten, bei der eine ganz neue Art der Animationen entworfen werden musste. Paul entwickelte eine Strategie, die er FLIP nennt. Dabei werden animierte Elemente auf ihren endgültigen Zustand gesetzt. Anschließend wenden Sie kompositorfreundliche Eigenschaften wie Transformationen und Deckkraft an, um die Änderungen umzukehren und das Element an seine Startposition zurückzusetzen. Aktivieren Sie abschließend die Übergänge für Transformationen und die Deckkraft und entfernen Sie diese Änderungen. Dadurch werden die Elemente wieder an ihre endgültige Position verschoben. Paul gibt zu, dass es ein wenig unerwartet ist, aber es funktioniert sehr gut und steigert die Leistung.
Leistung
Da ich Paul Lewis als Performance-Guru kenne, war ich nicht überrascht, dass Powerformance beim Erstellen der Website eine sehr wichtige Überlegung war. Er setzte stark auf WebPageTest, um den Geschwindigkeitsindex so niedrig wie möglich zu halten. Ohne die YouTube-Einbettung erreichte Paul über eine Kabelverbindung weniger als 1.000 Aufrufe, was bedeutete, dass die meisten Nutzer ein erstes Rendering in unter einer Sekunde erhielten.
Der größte Teil der Arbeit, um dies zu erreichen, wurde in Grunt-Aufgaben ausgeführt, um Bilder so weit wie möglich zu verketten, zu minimieren und zu komprimieren. Die Website verschiebt auch nicht unbedingt erforderliche Bilder erst nach dem Seitenaufbau, damit die tatsächlichen Inhalte schneller gerendert werden.
Um die Seitenladezeit noch weiter zu verbessern, hat Paul einen Service Worker eingesetzt. Damit kann ein Seitenaufruf aus dem Cache abgerufen werden, egal ob Sie online sind oder nicht. So können Sie auch bei schlechter Internetverbindung auf die Inhalte zugreifen. Das ist extrem wichtig, wenn das Konferenz-WLAN genutzt wird. Die CDS-Website ist eine der ersten Produktionswebsites, in denen die neue Funktion eingesetzt wird. Paul war dabei auf einige „Early-Adopter-Probleme“ gestoßen, aber die enorme Leistungssteigerung, sagte er, hat das wieder wettgemacht. Mittlerweile nutzt er jede Website, die er erstellt.
Die Leistung hängt nicht nur davon ab, wie gut eine Website geladen wird, sondern auch, wie gut sie ausgeführt wird. Paul wusste, dass die Animationen eine Herausforderung sein werden, deshalb kam er auf FLIP. Außerdem achtete er darauf, dass die Eingabe durch Berührung oder das Scrollen nicht behindert wurde. Trotz der Tatsache, dass die Website nicht besonders komplex ist, verwendete er für den Build eine modifizierte RAIL-Methode (er brauchte nicht wirklich viel Leerlaufzeit) und das war sehr hilfreich.
Design
Da die Website von einer einzigen Person gefälscht wurde, bedeutete dies, dass Paul sowohl Designer als auch Entwickler des Projekts war. Dies führte zu einem beispiellosen Verständnis in Bezug auf die Bedenken der anderen in den beiden „Teams“. Er entwirft den Desktop gerne nach unten (das Gegenteil von Progressive Enhancement, die er während der Entwicklung verwendet hat), weil er so einen Eindruck davon bekommt, was in das Projekt einfließen muss. Danach wechselt Paul zur mobilen Ansicht. Dort kann er alles noch weiter optimieren und dafür sorgen, dass die wichtigsten Dinge die meiste Aufmerksamkeit erhalten. Daraus wird dann die Desktop-Version abgeleitet, da die Informationsarchitektur und -priorität ausnahmslos aktualisiert werden müssen.
Es lief nicht alles reibungslos. In den Material Design-Richtlinien war damals nicht klar, wie eine Inhaltswebsite erstellt werden sollte, daher gab es Bereiche, in denen er die Erwartungen nicht erfüllte. Das Design berücksichtigt auch nicht den Zusammenhang zwischen Zeitplan und Sitzungsinformationen. Letztendlich bedeutete das UX-Design, dass die Teilnehmenden zum Zeitplan gingen und frustriert waren, dass sie nicht direkt zu den Sitzungsinformationen gelangen konnten.
Nichtsdestotrotz hat Paul die Material Design-Spezifikationen in eine Inhaltswebsite übertragen. Ich bin wirklich zufrieden mit den visuellen Elementen und der Bewegung. Es hat das einzigartige Material Design und die Informationen und das Aussehen fördern Interaktionen und Hierarchien.
Abgeschlossen
- Die gesamte Website wurde auf Github veröffentlicht (> 200 Sterne) und diente als Standardtext und Inspiration für Webentwickler.
- Die neuesten und besten Elemente der Webplattform wurden integriert: Service Worker, Web Manifest und dynamische Designfarben. Der Endeffekt ist etwas, das sich bei der Ausführung auf Android-Geräten wirklich in die Plattform integriert anfühlt. Wenn sie dem Startbildschirm des Nutzers hinzugefügt werden, fühlt es sich sehr wie eine App an, die der Nutzer verwenden würde, und das ist wirklich cool.
- ~73.7k Seitenaufrufe und ~73.7k Klicks auf Website-Unterbereiche bedeuteten, dass Nutzer die Website tatsächlich verwendet und damit interagierten. Das bedeutete viel mehr als erwartet.
Insgesamt eine großartige Inspiration für die Webentwickler von heute und eine sehr erfolgreiche Konferenzwebsite.