In den frühen 90ern war es das erste Mal möglich, verschiedene Webseiten im World Wide Web auf einem Computer aufzurufen. Der Aufbau und die Gestaltung der Webseiten waren recht simpel, sie waren hauptsächlich informativ und einfach zu bedienen. Da es zu der Zeit auch nur eine Art von Ausgabegerät mit ähnlichen Bildschirmgrößen gab, musste man sich keine Gedanken über das Responsive Webdesign machen.
Heutzutage haben sich die Ansprüche geändert und das nicht nur in der Benutzerfreundlichkeit und in dem Erscheinungsbild der Webseite. Durch die vielen verschiedenen Endgeräte wie Smartphones, Tablets und Co. muss auch jede Webseite für das entsprechende Ausgabemedium angepasst werden, damit es auf jedem Gerät optimal angezeigt werden kann.
Responsives Webdesign oder adaptives Design?
Bei dem adaptiven Webdesign steht die Fähigkeit des Endgerätes im Vordergrund. Hierbei werden die Größen der Browserfenster durch eine bestimmte Pixelhöhe und -breite festgelegt. Sie werden mit einem fixed Layout umgesetzt, d.h. mit einem starren Gestaltungsraster, welches für jedes Ausgabegerät einzeln angelegt werden müsste. Ist dies nicht der Fall, kann es passieren, dass bei kleineren Browser-Größen die Website nicht optimal angezeigt wird.
Da es aber mittlerweile zu viele verschiedene Endgeräte gibt, um alle auf die passende Pixelgröße umzusetzen, ist diese Methode veraltet.
Bei einem responsiven Webdesign hingegen steht die optimale visuelle Darstellung im Vordergrund. Nutzer haben die Möglichkeit, Webseiten auf jedem Endgerät optimal anzusehen. Die Inhalte einer Webseite, Funktion, Design und Inhalt passen sich flexibel und dynamisch an die entsprechende Bildschirmauflösung an, ganz egal, ob man das mobile Endgerät im Querformat oder Hochformat bedient. Übersetzt bedeutet Responsive Design so viel wie „reagierendes Webdesign“. Erfunden wurde der Begriff 2010 von Ethan Marcotte.
Die responsive Darstellung wird mittels Media Queries durch sogenannte Breakpoints im CSS umgesetzt. An diesen Breakpoints bricht die Website für die mobilen Endgeräte um. Sie definieren genaue Pixelwerte, damit Seitenelemente beim Skalieren zu bestimmten Positionen springen (z. B., wenn ein Bild neben einem Text sitzt, springt der Text bei der Mobilen Ansicht unter das Bild).
In der Regel wird ein responsives Design mit einem Fluid Layout umgesetzt. Das heißt, dass Spalten im Gestaltungsraster flexibel angelegt werden. Diese Spalten werden durch Prozentwerte definiert, wodurch sich das Layout an verschiedene Browser-Größen anpassen kann.
Eine Responsive Website erstellen
Es gibt verschiedene Ansätze, um ein responsives Webdesign zu erstellen. Im ersten Step wird entschieden, ob man mit der Mobile First (Progressive Enhancement) Variante oder der Desktop First (Graceful Degradation) Variante beginnen sollte.
Bei Mobile First fokussiert man sich zu Beginn auf die kleinste Browser-Größe mit dem schwächsten System, also das Smartphone. Man entwickelt also ein Layout, welches passend für die Mobile Nutzung ist. Nach und nach werden dann die Layouts für die größeren Browser-Größen erstellt.
Bei der Desktop First Variante geht man genau umgekehrt vor und beginnt mit der größten Browser-Größe und arbeitet sich bis hin zur kleinsten.
Da meist die kleinere Größe schwieriger zu gestalten ist, da man viele Elemente anderes darstellen muss oder sogar Elemente weggelassen werden müssen, ist es immer empfehlenswert, mit der Mobile First Variante zu beginnen.
Unterschied klassisches und Atomic Design
Bei der Erstellung eines responsiven Designs unterscheidet man zudem zwischen dem klassischen und dem Atomic Design.
Bei dem klassischen Design wird erst das Layout für eine Seite erstellt, einzelne Elemente werden nach und nach hinzugefügt. Die Vorgehensweise beim Atomic Design ist genau umgekehrt, hier werden erst die einzelnen Elemente gestaltet und dann in das Seitentemplate eingepflegt.
Eine Empfehlung der Vorgehensweise, welches die bessere Methode ist, gibt es nicht, beide Möglichkeiten sind gut umsetzbar und führen zu einem guten Ergebnis.
Fazit responsives Design
Im Allgemeinen kann man sagen, dass sich die Umsetzung eines responsiven Designs für den Nutzer immer lohnt. Jährlich kommen neue mobile Endgeräte mit unterschiedlichen Bildschirmgrößen auf den Markt. Hast du deine Webseite einmalig responsiv optimiert, bist du immer up to date und sorgst dafür, dass deine Webseitenbesucher durch einfache Nutzerführung und Übersichtlichkeit auf deiner Webseite bleiben.
