Im Oktober besuchte ich den Responsive Webdesign Workshop von Vitaly Friedman von Smashing Magazine.
Einer der wichtigsten Punkte die ich aus dem Workshop mitgenommen habe, war die Notwendigkeit der ganzheitlichen Betrachtung von responsive Webdesign. Um es mit einem Zitat zu sagen:
„Responsive Webdesign is more than fitting stuff on screens.“
Wenn eine neue Funktionalität geplant ist sollte diese zunächst hinsichtlich Auswirkungen zur Geschwindigkeit (Speed), dann hinsichtlich Zugänglichkeit (Access) und Skalierung (Scale), und schlussendlich hinsichtlich Gestaltung (Style) betrachtet werden.
Um die Ladezeiten der Website auch für die Nutzung auf mobilen Geräten zu optimieren sollte ein „Performance Budget“ festgelegt werden und für jedes Feature überlegt werden, ob durch die neue Funktionalität das Budget noch eingehalten wird. Interessant zu betrachten sind hierbei Optimierungen zum Laden von Webfonts, Einsatz von Service Workers und Bildkompression.
Als Benchmark kann hier auch der SpeedIndex von WebpageTest herangezogen werden. Paul Irish, Google Chrome Developer Advocate, hat einen Zielwert von unter 1000 ausgegeben der schwer zu erreichen ist, aber z.B. von Seiten wie derstandard.at erreicht wird.
Accessbility
Friedman betonte die Wichtigkeit der Verwendung von nativen HTML Komponenten, da viele assistive Technologien darauf aufbauen. Viele Libraries unterstützen Accessibility nicht in dem Ausmaß wie notwendig, aber es gibt viele frei verfügbare Alternativen, z.B. der DatePicker von AirBnB oder der HTML5 Video Player von PayPal.
Skalierung
Der nächste Schritt nach Media Queries und Breakpoints ist das Fluid Scaling bzw. Fluid Typography. Mehr dazu ist im Artikel „Responsive And Fluid Typography With vh And vw Units“ im Smashing Magazine nachzulesen.
Style
Wichtige Tools um ein responsives Layout zu erstellen sind Flexbox und CSS Grid. Während Flexbox vor allem für eindimensionale Probleme (horizontales oder vertikales Stacking) eine gute Lösung ist, ermöglicht das CCS Grid eine flexible Positionierung von Elementen im zweidimensionalen Raum. Zu Verstehen wie die zwei Layout-Techniken funktionieren ist nicht ganz einfach – eventuell hilft dabei die spielerische Herangehensweise von Flexbox Froggy oder CSS Grid.
Brauchen Sie in Ihrem Projekt Unterstützung bei der Lösung von Aufgaben im Bereich der User Experience oder Responsive Website Design?
