Responsive Design – Learnings von der UX Lisbon 2015

uxlx-responsive-design

Anfang des Monats fand einmal mehr die UXLx-Konferenz in Lissabon statt, an der auch meine Kollegin Jumana und ich teilgenommen haben. Über 2 Tage Workshops und einen Tag Vorträge ergab sich ein guter Mix aus Inspiration von hochkarätigen Speakern und tieferem Hands-On-Wissen.

Auch Brad Frost war vor Ort – ein Name, der eigentlich jedem etwas sagen sollte, der mit Responsive Design zu tun hat. Er betreibt einige Web-Resourcen zum Thema, schreibt und hält häufig Vorträge. Als Webdesigner und Frontend-Entwickler war er an Websites wie Techcrunch und dem Mobile-Shop von Tiffany beteiligt. Bei UX Lisbon hielt er einen Vortrag und einen Workshop, über die ich heute berichten möchte:

  • Workshop: Responsive Patterns
  • Vortrag: Atomic Design

 Responsive Patterns

Embedded image permalink

Der halbtägige Workshop war eine ganze Ecke technischer als die anderen auf der UXLx und Brad Frost entschuldigte sich auch direkt zu Anfang dafür, dass er ab und zu Code zeigen würde. Wirklich etwas selber machen konnte man in den 3 Stunden nicht, dafür gab es aber jede Menge Inhalt und es wurden auch viele Fragen gestellt.

Am liebsten würde ich einfach seine grandiosen Slides mit Hunderten von Quellen verlinken, aber leider darf ich das nicht. Deshalb hier nur ein paar Punkte und Links, die für mich neu oder zumindest eine wichtige Erinnerung waren:

  • Auch im Code sollte „Mobile First“ gearbeitet werden, damit nicht zu viel geladen werden muss und Devices ohne Mediaquery-Support die einfachste Variante anzeigen.
  • Breakpoints sollten durch den Content und mit Tests im Browser bestimmt werden, nicht basierend auf Geräteauflösungen.
  • Es gibt „Major Breakpoints“, bei denen sich das gesamte Layout ändert, aber auch „Minor Breakpoints“, bei denen nur einzelne Elemente angepasst werden. Diese sind unabhängig voneinander.
  • Die HTML-Struktur limitiert eigentlich die Möglichkeiten, das Layout responsiv zu verändern, aber inzwischen gibt es Auswege:
  • Performance ist ein sehr wichtiges Thema und wird viel zu sehr vernachlässigt (siehe dazu auch der Beitrag zu Website-Performance von Jens Jacobsen). Schlüsselworte sind „Conditional Loading“ und „Aggressive Enhancement“:
    • Nur essentiellen Content („the thing“), etwa Artikelbeschreibung und Warenkorb-Button, sollten direkt geladen werden .
    • Alles andere („not the thing“), etwa Kundenbewertungen und ähnliche Artikel, werden besser asynchron nachgeladen.
    • Das Nachladen kann entweder auf Anfrage passieren, etwa in Akkordeons, oder automatisch („Lazy Loading“).
    • Auf größeren Auflösung sind Akkordeons häufig nicht notwendig und somit muss automatisch nachgeladen werden. Aber aufpassen: Großer Bildschirm bedeutet nicht schnelle Verbindung!
  • Eine sehr gute Quelle für das Responsive Design von einzelnen Modulen ist This is Responsive. Vieles davon kannte ich schon, aber folgende fand ich spannend:
    • Neue Navigations-Pattern:
    • Bilder sollten als Default einfach als neue Seite im Browser geöffnet werden. Nur bei höheren Auflösungen sollte eine Lightbox eingesetzt werden.
    • Karten sollten zunächst nur als Vorschaubild geladen werden, welches auf die native App verlinkt. In höheren Karten kann dann das Kartenwidget nachgeladen werden.
  • Für responsive Bilder gibt es inzwischen einige neue Möglichkeiten jenseits von Javascript:
    • srcset für unterschiedliche Auflösungen des selben Bilds
    • <picture> für „Art Direction“, also unterschiedliche Bildausschnitte je nach Auflösung

Atomic Design und Pattern Lab

Neben dem Workshop hielt Brad Frost auch noch einen Vortrag am zweiten Tag der UX Lisbon. Meine Notizen dazu:

  • Die Idee der „Seite“ macht im modernen Web keinen Sinn mehr. Wir müssen in Systemen und Modulen denken.
  • Frameworks wie Bootstrap machen es heutzutage einfacher denn je, eine Website zu erstellen. Aber sie sind häufig nicht individuell genug, sowohl technisch als auch visuell.
  • Frontend-Styleguides lösen dieses Problem, bringen aber neue: Aufwändig, zu abstrakt, erst im Nachhinein erstellt, …
  • Atomic Design ist eine Design-Methodik für modulare Websites, die aus 5 Phasen besteht: Atomen, Molekülen, Organismen, Templates und Seiten:
    • Atome sind einzelne HTML-Elemente wie Buttons, ein Logo oder Textfelder.
    • Moleküle sind kompakte Kombinationen von Atomen, die einem bestimmten Zweck dienen, etwa ein Suchformular.
    • Organismen sind ganze Seitenteile, die aus mehreren Molekülen aufgebaut sind, etwa der Header.
    • Templates definieren die Struktur des Contents, indem sie die möglichen Kombinationen von Organismen für unterschiedliche Zwecke definieren. So gäbe es etwa ein Template für Übersichtsseiten und eines für Detailseiten.
    • Seiten sind Templates, die mit konkreten Inhalten gefüllt wurden, um so die Templates validieren zu können. Mit richtigem Inhalt lässt sich erkennen, ob das Template wie erwartet funktioniert.
  • Die 5 Phasen sind dabei nicht zeitlich strikt linear, sondern wechseln sich ab und beeinflussen sich gegenseitig.
  • Die Gestaltung des Atomic Design passiert im Browser und kann dort direkt responsive getestet werden.
  • Pattern Lab ist eine Sammlung von Tools, um Atomic Design anzuwenden. Es bietet einen Startpunkt in Form von Komponenten und Pattern, der dann individuell angepasst werden sollte. Durch intelligente integrierte Scripte wird dies sehr einfach gemacht und der modulare Ansatz unterstützt.
  • Pro-Tipp von Brad Frost: Als Beispielbilder für die Seiten-Phase Photos von Beyoncé verwenden – überzeugt jeden Kunden!

Ein paar interessante Links:

Responsive Design erfordert mehr technisches Wissen von UX-Designern

Diese beiden Sessions bei der UXLx haben mir noch einmal verdeutlicht, das ein gewisses technisches Verständnis nötig ist, um ein guter UX-Designer zu sein. Responsive Design verstärkt dies, da die Machbarkeit, die Komplexität der Umsetzung und die Performance ohne etwas Hintergrundwissen kaum einzuschätzen sind. Dazu kommt der Trend zum Designen und Prototyping direkt in HTML-Code, dem auch Atomic Design folgt. Natürlich haben wir im Optimalfall immer schon einen Frontend-Entwickler im Team, aber selbst dann hilft es, sich auf Augenhöhe unterhalten zu können.

Ich persönlich freue mich schon darauf, die neu gelernten Responsive Patterns in Kundenprojekten anwenden zu können und vielleicht auch bald einmal nach dem Ansatz des Atomic Designs zu arbeiten.

Was ist Ihre Meinung zu diesem Thema: Müssen wir alle Coden lernen oder sollten wir uns weiterhin rein auf die richtigen Entwickler verlassen?

4 Gedanken zu „Responsive Design – Learnings von der UX Lisbon 2015

  1. Pingback: Rocket Internet, Blackberry, Apple.

  2. Michael Friedrich

    Hallo Jan,

    vielen Dank für den inspirierenden Artikel. Zu gern hätte ich noch mehr Original-Inhalte von Brad gesehen…

    Natürlich benötigen wir Entwickler, ab und an ist es aber sinnvoll, Schmerzen am eigenen Leib zu spüren: Ich habe mich in den letzten Wochen durch die „Mobil-Machung“ eines eigenen Projekts (Sport / Team-Verwaltung) gekämpft. Das war nicht immer leicht, ich habe bestimmt einige Fehler gemacht, die Brad Frost anprangern würde, letztlich möchte ich die eigene Erfahrung jedoch nicht missen. In Diskussionen mit Entwicklern über responisve Design und mobile Usability bin ich jetzt auf einem anderen Niveau – weil ich weiß, was möglich ist.

    Viele Grüße
    Michael

    Antworten
  3. magl85

    Die UX Lisbon hat uns mit sehr schönen Vorlagen im responsive Design versorgt. Dabei kann jede Webagentur Zug und jeder Webdesigner Zug sicher gehen, dass es gut bei dem Endkunden und deren Besucher ankommen wird. Besonders auffallend sind die Proportionen und die Designspiele. Leider enthält kein responsive Webdesign ein CMS System.

    Antworten
  4. Pingback: UX und Usability Events 2016 - die Veranstaltungstipps für das kommende Jahr - Usabilityblog.de

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.