Popover Right
Popover Left

Responsive Design

Eine Website besitzt dann ein Responsive Design, wenn der präsentierte Content je nach Größe des Displays (= Viewport) skaliert dargestellt wird, so dass der Nutzer immer komfortabel durch die Seite navigieren kann, egal ob er einen Desktop-PC oder ein Smartphone verwendet. Moderne Content-Management-Systeme unterstützen zumeist von Vornherein ein responsives oder zumindest adaptives Design. Das Responsive Design ist dem adaptiven Liquid Layout (= flexibles Layout) insgesamt überlegen, da es sich

 

  1. ...nicht anhand von relativen Angaben an den Anzeigenbereich anpasst und
  2. ...neben der Darstellungsfläche auch die Auflösung, Pixeldichte, Seitenorientierung (hoch, quer) und Eingabemöglichkeiten (Tastatur, Stift, Finger) optimiert.

 

Um die Skalierung und Übertragung auf Mobilanwendungen zu erleichtern, eignen sich lange Seiten, auf denen viel gescrollt wird (z.B. Infinite Scrolling) und so auch mit Fingern leicht durch die Seite navigiert werden kann. Auch die Vermeidung von zu eng gelegten Links ist essentiell, da diese ansonsten nur schwer mit dem Finger angesteuert werden können. Damit Nutzer, die an den Seitenanfang zurückkehren wollen, nicht abermals lange scrollen müssen, bietet es sich darüber hinaus an, am Ende jedes Bereichs eine Rückkehrmöglichkeit zum Seitenbeginn anzulegen. Aufgrund dieser komplexen Ansprüche an ein mobiles Design hat sich der Mobile-First-Ansatz unter Web Entwicklern durchgesetzt: Designer beginnen bei der Planung einer Webseite zumeist mit dem Layout, das den meisten Restriktionen unterworfen ist. Konkret heißt das, das Web Entwickler zunächst das Design der Mobilseite planen und erst anschließend das flexiblere Desktop-Layout ausgestalten. Gerade da Mobilseiten so viele Restriktionen aufweisen, ist es jedoch wichtig, den Besucher selbst auswählen zu lassen, ob er lieber die unhandlichere, dafür umfangreichere Desktop-Ansicht ansteuern möchte oder lieber die funktional abgespeckte Mobil-Ansicht.

Im Verlauf der Designentwicklung wird für jeden Gerättyp (Smartphone, Tablet, Desktop-PC) einzeln in Zeichnungen bzw. Modell-Skizzen – sogenannten Wireframes (= Drahtmodell) – festgelegt, welche Elemente in den Seitenaufbau integriert und welche ausgelassen werden sollen. Die Wireframes werden anschließend wiederum Ausgangspunkt, um die Navigationspfade und damit die Customer Journey zu planen, indem die interne Verlinkung von Wireframe zu Wireframe determiniert wird.