Gestaltung · Responsive Design
Responsive Design
Das Ziel beim responsiven Webdesign ist es, auf die Eigenschaften und Einschränkungen des jeweiligen Endgeräts mit best möglichen Design-Konzepten zu reagieren. Dies gilt insbesondere für Tablets und Smartphones, da diese kleine Bildschirme aufweisen und auch in der Bedienung weitaus gröber zu bedienen sein müssen, da als Eingabemittel kein Werkzeug, sondern der Finger dient. Meist definiert man bei solchen Anpassungen so genannte Breakpoints bei denen das Layout jeweils wieder neu angepasst wird.
Desktop – etwa 1000px und mehr
Der Breakpoint wird meist so eingerichtet, dass ab etwa 1000px keine separate Anpassungen mehr gemacht werden, sondern nur noch ein Layout verwendet wird.
Tablet – etwa 700px – 1000px
Für die Zwischengrösse zwischen Mobile und Desktop wird zum Teil noch eine weitere Grösse angepasst.
Mobile – weniger als 700px
Für die kleinsten Geräte muss meiste eine sehr radikale Layout-Anpassung gemacht werden.
Mobile Geräte
Mobile Geräte haben einen sehr starken Zuwachs und machen jedes Jahre in den Statistiken der Besucherzahlen einen grösseren Anteil aus. Insbesondere Smartphones sind stetig wachsend. Tablet-Geräte sind nicht mehr stark wachsend.
Wichtige Einführungen von neuen Geräten
- iPhone, 29. Juni 2007
- iPad, 3. April 2010
Schweiz
Internetnutzung
nach Gerätetypen
in %
Desktop
Mobile
Tablet
Weltweit
Internetnutzung nach Gerätetypen
Quellen: StatCounter
Responsive Inhalte
Icons (Grafiken)
Icons können auf verschiednen Grössen verschiedene Detailgrade annehmen. Die Klarheit eines kleinen Icons kann in grossen Grössen grob wirken und feine Strukturen können in kleinen Grössen wegbrechen. Um dies zu vermeiden, können verschiedene Versionen abhängig von der Grösse und Auflösung gewählt werden.
Charts (Diagramme)
Da es bei Charts (Diagrammen) oftmals zu einer dichte an Informationen kommen kann, ist es sinnvoll, die Information entsprechend dem Raum zu optimieren. Dies gilt sowohl für die Typografie, wie auch die Darstellung.
Responsive Tabellen
Tabellen können bei kleinen Bildschirmen schnell zu breit wachsen. Es gibt diverse Konzepte, wie bei kleinen Bildschirmen die Daten umgeschichtet werden können, so dass zumindest die Information noch zugänglich ist.
Autor
Stefan Huber
sh@signalwerk.ch
+41 78 744 37 38
Dokumentgeschichte
September 2015: Erstellung
März 2017: Erweiterung
Weiterführende Informationen
Übliche Bildschirmauflösungen
Responsive Visualisierung
Responsive Design
Icon-Systeme & Responsive Icons
- Iconic (kommerziell)
- History of Icons