Responsive Design

Eine gute Bedienbarkeit, die attraktive Aufbereitung der Inhalte, eine schnelle und zuverlässige Verfügbarkeit und eine stets optimale Darstellung auf unterschiedlichen Endgeräten – dies sind die Kriterien, die den Erfolg moderner Websites bestimmen. Besucher von Websites erwarten heutzutage inhaltliche Qualität und eine absolut funktionelle Benutzerführung. Sowohl im Desktop-Bereich als aber auch vor allem im mobilen Segment sind daher längst traditionelle Pfade verlassen worden. Flexibilität und Individualität sind jetzt Trumpf. Genau dies bietet Ihnen Responsive Webdesign.

1. Reagieren auf Merkmale und Eigenschaften des jeweiligen Ausgabemediums

Ein responsives Webdesign (kurz: RWD) stellt ein, auf die jeweiligen Anforderungen unterschiedlicher Endgeräte, reagierendes Design dar. Das bedeutet, dass der grafische Aufbau grundsätzlich an den Merkmalen und Eigenschaften des jeweils genutzten Gerätes gekoppelt ist. Dies betrifft vor allem Faktoren wie zum Beispiel die Positionierung und Ansicht einzelner Seitenelemente. Im Fokus stehen hierbei die Navigationen, Texte und Seitenspalten sowie Eingabemethoden und neuere Webstandards wie etwa HTML5 JavaScript oder auch CSS3. Aus technischer Perspektive bilden dabei vor allem so bezeichnete Media Queries eine wesentliche Voraussetzung für ein responsives Webdesign. Hierbei handelt es sich um eine Stylesheet-Sprache für elektronische Dokumente im Rahmen eines CSS3-Konzeptes (CSS: Cascading Style Sheet). Dieses Konzept ermöglicht es, dass unterschiedliche Designs immer passend zu bestimmten Merkmalen und Eigenschaften des Ausgabemediums reagieren.

2. Responsive Design: Flexibilität und Individualität stehen im Fokus

Zweifelsohne ist Responsive Webdesign längst zum Standard geworden. Sie werden kaum eine neue Website oder auch einen Relaunch finden, die nicht im responsiven Stil umgesetzt wurden. Allerdings gibt es mitunter prägnante Unterschiede auf dem Weg dahin; dementsprechend flexibel präsentiert sich dann auch der allgemeine Workflow. Überhaupt nimmt die Flexibilität und auch Individualität einen hohen Stellenwert im Hinblick auf Responsive Webdesign und den jeweiligen Workflow ein. Denn von der Grundidee her soll ein responsives Webdesign das Internet bzw. das Web wieder zu dem machen, was es im ursprünglichen Sinne von Haus aus eigentlich ist: flexibel und individuell nutzbar.

3. Starre Raster waren früher das Maß aller Dinge

Diese jetzt wieder durch das Responsive Webdesign neu avisierte Flexibilität bringt das Web quasi zu seinen Wurzeln zurück. Denn noch vor nicht allzu vielen Jahren war von dieser Flexibilität kaum noch etwas zu sehen. Websites wurden zum Beispiel ausschließlich für feste Bildschirmgrößen gestaltet. Übernommen wurde diese Gestaltungsmethode aus dem Printbereich. Es ging einzig und alleine darum, ein Dokument mit festen Abmessungen bzw. Maßen herzustellen. Webdesigner nutzten Grafikprogramme – zumeist das alt-ehrwürdige Photoshop – für die Gestaltung von fixen Layouts und Designs, die sie dann mit HTML und CSS in der Regel gleich eins-zu-eins umsetzten. Starre Raster waren allgegenwärtig und angesagt.

4. Feste Bildschirmgrößen sind Relikte aus längst vergangenen Zeiten

Das macht sogar Sinn, sofern es in der Tat recht ähnliche Bildschirmgrößen gibt. Schließlich beherrschte vor Jahren noch der herkömmliche Desktop-PC die Szenerie. Aber die Entwicklung hat ein neues Anforderungsprofil an die Oberfläche gespült: Weg vom klassischen Desktop-PC, hin zum mobilen Internet. Damit wird jedoch einer Gestaltung mit starren Rastern die Grundlage entzogen. So ist eine feste Bildschirmgröße jetzt eben nicht mehr der kleinste gemeinsame Nenner, für die Designer auf der ganzen Welt Websites aufbauen. Stattdessen sind die Nutzungsszenarien jetzt weitaus vielfältiger geworden: Ein gemeinsamer Nenner existiert im Grunde überhaupt nicht mehr.

5. Neue Herausforderungen durch die mobile Internet-Nutzung

Alleine die Anzahl der zur Verfügung stehenden Nutzungsgeräte hat sich drastisch erhöht. Neben dem klassischen Desktop-Computer nutzen User nunmehr auch Smartphones, Tablets oder Phablets, Laptops, Netbooks sowie auch zum Beispiel Uhren, Fernseher oder auch Produkte aus dem Bereich Wearable Computing wie etwa Google Glass. Etwas überspitzt formuliert fungiert nahezu jedes Produkt mit Internetzugang und Display als nutzbares Gerät. Und die diesbezügliche Entwicklung ist keineswegs abgeschlossen. Die Absatzzahlen mobiler Endgeräte sprechen hier eine deutliche Sprache. So wurden bereits im Jahr 2010 rund 324 mobile Endgeräte verkauft; nur sechs Jahre später waren es schon rund 1,4 Millionen Geräte. Dies entspricht einer Steigerung von nahezu 420 Prozent. Ganz anders präsentiert sich die Entwicklung im Segment der Desktop-Computer. Hier kam es im gleichen Zeitraum zu einem Zuwachs von lediglich 50 Prozent. Fakt ist, aufgrund der unterschiedlichen Geräte müssen Websites in der Form gestaltet sein, dass sie sowohl fit für eine Vielzahl von Displaygrößen als auch für verschiedene Eingabegeräte sind.

6. Optimierung von Websites für viele Nutzungsszenarien

Tastatur und Maus haben hier längst kein Monopol mehr; Touchpad und Touchscreen sind bei neuen Geräten nahezu schon Standard. Bei den Bildschirmgrößen werden die Unterschiede inzwischen immer gewaltiger. So gibt es heutzutage mobile Endgeräte wie zum Beispiel die Apple Watch, welche eine Displaygrößen mit Bildschirmdiagonalen von gerade einmal 38 Millimetern bietet, während Sie mittlerweile auch auf Smart TVs zurückgreifen können, die es auf Bildschirmdiagonalen von fast zwei Metern bringen. Theoretisch muss das Webdesign heute alle Bildschirmbreiten zwischen 300 und maximal 6.000 Pixeln bedienen. Um dieser ungemein großen Bandbreite an unterschiedlichen Nutzungsszenarien gebührend Rechnung zu tragen, wird eben ein Webdesign benötigt, dass jederzeit dazu in der Lage ist, sich von der Darstellung her dem jeweiligen Ausgabebildschirm anzupassen. Beim Responsive Webdesign geht es genau darum. Mittels dieser Designmethode wird eine Website für alle möglichen, oder zumindest für viele Nutzungsszenarien entsprechend optimiert.

7. Eine optimale Anpassungsfähigkeit als Zielvorgabe

Die Website wird dabei in der Form gestaltet, dass sich die via Responsive Design erstellte bzw. optimierte Website den jeweiligen Gegebenheiten anpasst. Responsive können Sie dann auch mit “anpassungsfähig” oder besser “reaktionsfähig” übersetzen. Das bedeutet also: Responsive Webdesign steht für die Gewährleistung, dass jedes mit dieser Designmethode erstellte Webdesign unabhängig von der jeweiligen Bildschirmgröße von den Usern optimal genutzt werden kann und dementsprechend optisch attraktiv dargestellt wird. Zum Portfolio eines solchen flexiblen Webdesigns zählen neben variablen Rastern auch unterschiedliche Medien sowie die so bezeichneten Breakpoints, an denen die Änderung der Darstellung letztendlich vollzogen wird. Allerdings dürfen Sie Responsive Design keineswegs lediglich mit der Anpassung der Darstellung von Inhalten an den möglichen Anzeigebereichen auf Displays gleichsetzen. Vielmehr müssen auch die gesamte Konzeption, die Inhalte sowie das Design an sich, an die neuen Gegebenheiten und Anforderungen gezielt angepasst werden. Daher ist Responsive Design auch immer als ein umfassender Prozess anzusehen, bei dem zahlreiche Faktoren berücksichtigt werden müssen.

8. Linearer Ablauf setzt auf klar getrennte Disziplinen und Arbeitsschritte

Dadurch verändert sich letztendlich auch der gesamte Workflow bei der Gestaltung von Internet-Präsenzen. Beim klassischen Webdesign kommt hierbei grundsätzlich ein linearer Ablauf zum Einsatz. Dabei werden die einzelnen Disziplinen stets nacheinander abgearbeitet; echte Berührungspunkte sind hier Mangelware. Erst wenn eine Tätigkeit komplett abgeschlossen ist, folgt der nächste Arbeitsschritt. Alles ist deutlich und klar voneinander getrennt. Am Anfang steht immer die Planung bzw. die Konzeption, dann werden die Inhalte erstellt und erst danach wird das Design ausgestaltet. Steht das Design, geht es an die Programmierung. Ein solcher lineare Workflow funktionierte jahrelang ohne große Probleme, da der Desktop-PC Priorität als Nutzungsgerät besaß. Hinzu kommt, dass ein linearer Workflow sowohl für die Webdesigner und Webprogrammierer als auch für die Website-Betreiber zu jeder Zeit gut nachvollziehbar ist. Grund hierfür ist in erster Linie die klare Trennung zwischen Planung, Inhaltserstellung, Technik und Design.

9. Ein linearer Workflow respektive eine statische Website sind ins Abseits geraten

Spätestens seit 2005 wurden die Schwachstellen eines linearen Ablaufs bzw. Workflows immer deutlicher. Als Fixpunkt, der die Abkehr von dieser linearen Vorgehensweise begründete, gilt allgemein das Jahr 2007. Denn in diesem Jahr kam das iPhone auf den Markt, was in der IT-Branche gerne als Startzeitpunkt des mobilen Internets bezeichnet wird. Im Laufe der nächsten Jahre rückte die zuvor identifizierte Kernzielgruppe von Nutzern der Desktop-PCs immer mehr in den Hintergrund; heute ist diese Kernzielgruppe quasi nicht mehr existent. Damit einhergehend wurden schnell auch statische Websites als nicht mehr zeitgemäß angesehen. Denn eine statische Webseite passt sich nicht den unterschiedlichen Viewports an.

10. Heute muss das Webdesign sämtliche Viewports bedienen

Das bedeutet: Weder bei vergleichsweise großen Monitoren noch bei eher kleineren Displays sorgt eine statische Website für eine optimale Darstellung. Dies liegt daran, dass ein statisches Layout immer für eine bestimmte Breite entworfen und realisiert wird. Ein linearer Workflow beziehungsweise eine statische Website ist daher im mobilen Web und im Hinblick auf responsive Websites in allen Belangen ineffizient und damit unbrauchbar geworden. Aus diesen Gründen führt in der heutigen Zeit kein Weg mehr an einem Responsive Webdesign vorbei. Gefragt sind flexible Designs, das optimalerweise sämtliche Viewports bedient bzw. berücksichtigt. Pixelgenaue Designs im fixen Rahmen sind nicht mehr gefragt und zudem eben auch gar nicht mehr praktikabel.

11. Der Unterschied von responsiven Websites zu adaptiven Varianten

Dabei dürfen Sie allerdings nicht responsive Websites mit adaptiven Varianten verwechseln. In der Praxis werden die Begriffe nämlich fälschlicherweise ab und an in einem Atemzug genannt. Denn es gibt hier deutliche Unterscheidungsmerkmale. So steht das Wort “adaptiv” für Anpassungsfähigkeit, während Responsive Webdesign eher auf die Reaktionsfähigkeit verweist. Adaptive Webseiten bestehen dabei im Kern aus einem Gestaltungsraster mit starrem Rahmen; das Layout ist im Grunde genommen also fixed. Die Designer erstellen dabei bestimmte Ansichten für explizit ausgewählte Bildschirmskalierungen. In der Regel werden hierbei neben der Desktop- auch eine Smartphone sowie eine Tablet-Ansicht entwickelt. Diese Ansichten bzw. Viewports orientieren sich vorzugsweise an den etablierten und gängigen Geräteskalierungen. Websites dieser Art haben aber oftmals das Problem, dass an den jeweiligen Umbruchpunkten mitunter nicht die passenden Eigenschaften geladen werden; außerdem wird der vorhandene Platz auf einer Website mitunter nicht sinnvoll genutzt. So kommt es vor, dass kleine Tablets reine Smartphone-Ansichten laden, da diese vergleichbare Abmessungen besitzen.

12. Layoutspezifisches Design als Charakteristikum responsiver Websites

Demgegenüber kommen beim Responsive Design eben flexible Gestaltungsraster zum Einsatz, die als elastisch beziehungsweise fluid anzusehen sind. Fest definierte Viewports gibt es hier daher nicht. Es geht beim Design vielmehr darum, keinen unnötigen Platz zu verschwenden. Außerdem liegt der Fokus auf einer flexiblen Layoutumsetzung sowie auf der Informationsaufbereitung. Grundsätzlich steht beim Responsive Webdesign ein layoutspezifisches Design im Vordergrund, während sich die adaptive Vorgehensweise auf die jeweilige Größe des Displays konzentriert. Diese unterschiedliche Methodik bei der Gestaltung sorgt dann dafür, dass Sie bei der Erstellung von responsiven Webdesigns deutlich mehr gestalterischen und auch technischen Aufwand in Kauf nehmen müssen.

13. Mehr Pluspunkte auf Seite des responsiven Webdesigns

Im direkten Vergleich bietet Ihnen ein responsives Webdesign deutlich mehr Vorteile als die adaptive Designvariante. Zum einen berücksichtigt das entsprechende Webdesign alle Displaygrößen. Zum anderen wird die Verschwendung von Ressourcen vermieden und der Fokus liegt auf den tatsächlich wichtigen Informationen. Zudem ist auch die optimierte Nutzererfahrung auf sämtlichen Endgeräten als ein wesentlicher Pluspunkt auszumachen. Dafür benötigt das Responsive Webdesign dann aber auch eine vergleichsweise lange Entwicklungsdauer und einen Mehraufwand hinsichtlich der technischen Umsetzung.

14. Auf einen Blick: Responsive Webdesign – von diesen Vorteilen profitierst Du

• Die Reichweite zu mobilen Zielgruppen wird gesteigert. Zukünftig wird die Nutzung von mobilen Geräten rund um Tablets und Smartphones noch weiter zunehmen. Mit einer responsiven Website schaffen Sie sich hier beste Voraussetzungen.
• Responsive Design sorgt dafür, dass der User eine verbesserte Website-Erfahrung macht. Denn es gibt keinerlei Notwendigkeit mehr, eine Umleitung auf eine mobile Website zu initiieren. Im Umkehrschluss bedeutet dies in der Regel ein Plus an Umsatz und steigende Conversion-Raten.
• Die Analyse und Auswertung von Traffic, Websiteverhalten und beispielsweise Conversion-Track wird durch Responsive Design effizienter. Sie benötigen lediglich einen einzigen Report, in dem gleich mehrere Geräte beziehungsweise Berichte zusammengefasst sind. So können Sie Ihre Website mit Hilfe entsprechender Analyse-Tools leichter optimieren.
• SEO-Kampagnen können mit einer einheitlichen Taktik und Strategie für alle Ausgabegeräte versehen werden. Das spart Geld und Zeit.