logologo

Responsive Design

Responsive bedeutet in Englisch „ansprechbar“, „reagierend“. Auf gut Deutsch ist ein Responsive Webdesign folglich eine Webseite, die so entwickelt wurde, dass sie sich an die jeweilige Bildschirmgrösse anpasst. Dies ist besonders wichtig bei den kleinen Bildschirmen von Smartphones oder Tablets, bei welchen Webseiten ansonsten unleserlich wären oder mühsam in alle Richtungen gescrollt werden müsste.

HINTERGRÜNDE VON RESPONSIVE DESIGN

Beim Responsive Webdesign wird dem Browser gesagt, dass er ab einer bestimmten Bildschirmweite die Bestandteile der Webseite anders darstellen soll, sodass sie leicht scrollbar und problemlos leserlich sind. Das bedeutet bei der Programmierung etwas mehr Arbeit. Es gewährleistet jedoch, dass Kunden auch vom Taxi aus über ihr Telefon problemlos auf die Webseite zugreifen können.

Ins Leben gerufen wurde das Responsive Design eben gerade wegen der neuen, in Englisch „Devices“ genannten Endgeräte. Webseiten waren vormalig entweder fix, was bedeutet, dass bei einer Verkleinerung des Fensters ein Teil der Webseite gar nicht mehr sichtbar ist und man scrollen muss, um darauf zuzugreifen. Oder sie waren so programmiert, dass sie sich automatisch an den Bildschirm anpassten – was die Verkleinerung aller Boxen und Bilder bedeutete. Nun stelle man sich bei Variante 1 die extreme Scrollarbeit auf einem Smartphone vor…oder aber wie klein die Boxen werden bei Variante 2. Responsive Webdesign löste dieses Problem höchst wirkungsvoll!

Es muss also endgültig Abschied von der Vorstellung genommen werden, dass eine Seite, sobald sie einmal programmiert wurde, unveränderbar ist und in jedem Fall genau den Vorstellungen des Designers entspricht. Um allerdings auch nicht ein Riesenchaos zu veranstalten und alle Inhalte durcheinander angezeigt zu bekommen, ist Responsive Design die Antwort, die heutzutage als Grundsatz und im Webdesign als unverzichtbar gilt.

WIE RESPONSIVE DESIGN FUNKTIONIERT

Responsive Design bezieht sich auf verschiedene Kriterien, die „responsive“, sprich reagierend, eingestellt werden können. Zwar ist einer der entscheidenden Gründe die vermehrte Verwendung von Mobilgeräten im Alltag, allerdings treffen viele der Punkte auch auf Browser-Einstellungen am PC und auf die Wahl des Monitors zu.

Zu den Eigenschaften, welche als responsive programmiert werden können, gehört die Einstellung und Anpassung an die Breite und Höhe des Browserfensters und an die Grösse des Gerätes. Ein weiterer wichtiger Punkt in diesem Zusammenhang ist die Bildschirmauflösung und die daran angepasste Rastergrafik des Webseiteninhalts. Diese unterscheidet sich wiederum entsprechend des gewählten Layouts, das entweder Quer- oder Hochformat sein kann. Für manche PCs und alle Tablets und Mobilgeräte ist die Eingabemöglichkeit ein Faktor, der durch responsives Design gewährleistet werden kann. Dadurch ist es nämlich möglich, dass das Tastaturfeld erst mit einem Klick auf das Eingabefeld öffnet, sodass man die Möglichkeit erhält, den gewünschten Text einzugeben. Neue Geräte haben inzwischen auch alle die Möglichkeit, mit einer Sprachfunktion Ausführungen in Auftrag zu nehmen.

Im Gegensatz zu mobilen Webseiten, welche speziell für mobile Geräte entworfen werden, passen sich Webseiten mit responsive Webdesign selbst dem gegebenen Gerät sowie dessen Browser und Grösse an.

Bei einer Adaptiven Website hingegen wird, ähnlich wie bei einer mobilen Website, nur eine Vorlage erstellt, in welche sogenannte Breakpoints gesetzt werden, entlang derer die Seite gebrochen und die Inhalte verteilt werden. Zwischen den Breakpoints bleibt das Layout allerdings statisch. Dadurch ist eine teilweise Anpassung an die gegebenen Umstände möglich, allerdings nicht in dem Ausmass, wie das durch die fluide Anpassung bei Websites mit Responsive Design der Fall ist.

Als dritte Abgrenzung von Responsive Design gilt liquides Design, welches die Anpassung der Inhalte an die Browsergrösse ist. Allerdings wird hier, im Gegensatz zum responsive Webdesign, die Anordnung der verschiedenen integrierten Layoutelemente nicht verändert.

Insofern ist responsives Design die beste Lösung für die heutzutage sehr hohen Ansprüche, die an Websites gestellt werden. Zwar ist der Aufwand, eine Website mit Responsive Design zu erstellen grösser, doch es zahlt sich aus. Zum einen, da dadurch nur eine Website programmiert werden muss und zum anderen durch die höchste Benutzerfreundlichkeit.

BRAUCHE ICH RESPONSIVE DESIGN?

Wir empfehlen in jeden Fall, die Webseite responsive oder zumindest adaptive zu machen. Heutzutage wird sehr häufig der Weg zur Arbeit genutzt, um online nach möglichen Zulieferern, Partnern oder Brands zu stöbern. Und die Anzahl derer steigt täglich an. Wer nicht auf den Zug aufspringt, dem entgehen zunehmend mehr Kunden. Denn auch Nutzer, die übers Telefon nach Marken suchen, werden anschliessend, basierend auf diesen Informationen, direkt im Geschäft einkaufen!

MENÜS IN RESPONSIVE DESIGNS

Menüs werden in der Smartphone-Version des Responsive Designs (häufig ab ca. 500 oder 600 px Weite) auf Grund des Platzmangels als die ganze Bildschirmbreite einnehmende Balken oder als Schaltfläche (Button) angezeigt. Stöbern Sie im Internet oder konsultieren uns, um sich ein Bild über die Möglichkeiten zu machen!

RESPONSIVE DESIGN VS. ADAPTIVE, LIQUID UND MOBILES DESIGN

Während sich Responsive Design auf eine dynamische Anpassung des Seiteninhaltes auf die Devices bezieht, werden die Inhalte bei Adaptive-, Liquid- und mobilem Design aufgrund ihrer konkreten Funktionsweise auf den verschiedenen Endgeräten nicht unbedingt passend angezeigt.

mik img with devices

FAZIT

Responsive Design beschreibt, wie das Layout einer Website an ein Device, bzw. an einen Browser angepasst wird. Responsive Design ist eine adaptive Reihe mit unterschiedlichen liquiden Layouts.