Responsive Web Design (RWD) und der Mobile First Ansatz
Websites werden heute auf verschiedensten Geräten, Browsern und Displays betrachtet. Das stellt neue Anforderungen an die Gestaltung, die Technik und die Abläufe zur Entwicklung des Webdesign.
Der herkömmliche Design-Prozess (mit statischen Layouts) ist diesen neuen Anforderungen nicht gewachsen.
Wie wurde bisher vorgegangen ? Nach der Planung der Website-Struktur, -Inhalte und -Ziele wurden Wireframes entwickelt. Diese wurden anschließend von einem Designer z.B. in Photoshop gelayoutet. In der Design-Präsentation wurden dem Kunden diese Layouts gezeigt und ggf. Korrekturen erarbeitet. Nach der Design-Freigabe setzte ein Frontend-Programmierer die Layouts in Code um.
Statische Layouts sind unflexibel, langsam und aufwändig
- Statische Layouts sind immer eine Momentaufnahme. Sie zeigen die Website aus einer Größenansicht (Viewport) und aus einem Browser. Die Erstellung von Ansichten aus verschiedenen Viewports verbessert zwar diesen Zustand, deckt aber nie alle Ansichten ab und erzeugt unnötigen Aufwand.
- Interaktionen, Animationen und Übergänge sind schwer oder gar nicht darstellbar.
- Nachträgliche Änderungen müssen aufwändig in allen Ansichten nachgearbeitet werden.
- Das Bedienerlebnis (user experience) kann im Design-Prozess nicht erfahren werden.
Der neue Design-Prozess (mit einem interaktiven Prototypen) hat viele Vorteile.
Wie geht man heute vor ? Designer und Frontend-Entwickler sind heute ein und die selbe Person oder arbeiten von Beginn an eng zusammen. Dabei entsteht das Design und der Code parallel. So entsteht von Beginn an ein dynamisches Layout.
Dynamische Layouts sind näher am Produkt, flexibler und schneller
- Die Website kann immer aus verschiedenen Viewports und Browsern betrachtet werden.
- Interaktionen, Animationen und Effekte sind im Prototypen erlebbar.
- Änderungen können zentral vorgenommen werden.
- Die Website ist bereits im Prototyp bedienbar und erlebbar.
- Missverständnisse oder falsche Erwartungshaltungen werden frühzeitig ausgeräumt.
Mobile First Responsive Web Design
Im Mobile First Ansatz beginnt der Design-Prozess, wie der Name schon sagt, bei den kleinen Screens.
Mittels Progressive Enhancement arbeitet man sich von klein nach gross.
Es wird als erstes festgelegt, was mobile Nutzer sehen sollen. Da der kleine Bildschirm nicht viel Platz bietet ist es besonders wichtig die Inhalte zu priorisieren. Weiters geht man vorerst von einem schwachen System aus. Zum Beispiel von einem veralteten Browser und einem Mobilgerät das leistungsschwächer ist und keine so stabile Internet-Verbindung hat wie ein Desktop-Computer. Wenn die Website auf diesem Gerät zufrieden stellt, dann geht man zu größeren Bildschirmen und besseren Geräten über.
Ladezeiten und Performance der Geräte werden berücksichtigt
Es werden Inhalte erst nachgeladen wenn sie in den sichtbaren Bereich kommen (ansonsten muss viel geladen werden und die Seite wird langsamer). Es werden verschiedene Bildgrössen für die unterschiedlichen Ausgabegeräte verwendet.
Kommentar schreiben
You must be logged in to post a comment.