Responsive Webdesign: Basis für eine erfolgreiche Webseite

Wer hätte vor 20 Jahren gedacht, dass Smartphones einmal unseren Alltag bestimmen würden? Als Webseiten noch simpel und wenig ästhetisch aussahen, machte sich niemand Gedanken darüber, vor welchen Herausforderungen man ein knappes Jahrzehnt später stehen würde.

/// 01

Responsive Webdesign – Was ist das bitte?

Eine berechtigte Frage für jeden, der sich noch nie näher mit der Konzipierung von Webseiten befasst hat. Das englische Wort „responsive“ wird im Netz oft mit den Adjektiven „ansprechbar“ und „reaktionsschnell“ übersetzt – Eine Kombination aus Beidem ist dabei wohl die beste Antwort auf die Frage.

Zum einen sprechen wir bei einer Webseite die „ansprechbar ist“ von der Fähigkeit, zu prüfen von welchem Endgerät eine Webseite betrachtet wird. Dabei unterscheiden sich die Werte bzgl. Breite und der Höhe einer Webseite natürlich von Gerät zu Gerät.

Um dies anschaulicher zu erläutern, hier einmal ein Beispiel: Das Ansichtsfenster (der Viewport) ihres Smartphones ist aufgrund der Maße des Gerätes natürlich kleiner, als das ihres PC-Monitors. Sie müssen sich also vorstellen, dass Inhalte somit per se auch nicht im gleichen Größenverhältnis angezeigt werden können. Eine Navigationsleiste mit vielen Unterpunkten, gestreckt über die gesamte Breite ihrer Webseite auf dem PC, könnte daher niemals in der selben Größe auf dem Smartphone angezeigt werden. Die einzelnen Elemente müssten so klein werden, dass man sie nicht mehr genau erkennen könnte. Das sogenannte „Hamburger-Menü“ hilft uns hierbei. Dieses ist auf nahezu jeder Webseite zu sehen, meistens finden sie es am oberen rechten Bildrand. Hier sind es oftmals drei Balken (daher die Bezeichnung als „hamburger“), die bei einem Klick ein Untermenü öffnen, um genau diesen Konflikt mit der Displaybreite zu verhindern.

/// 02

Alle weiteren Inhalte einer Webseite

Texte, Bilder und andere Elemente werden beim responsive Webdesign auf die Bildschirmbreite angepasst. Eine Zeile ist also genau so breit, wie auch der Bildschirm. Die Schriftgröße muss dabei oft nicht einmal groß verändert werden, da sich der Text auch einfach weiter nach unten strecken kann.

Bei Bildern wird oft Länge und Breite verändert, so dass das Bild tatsächlich kleiner ist. Somit wird verhindert, dass der Besucher bei seinem Besuch z.B. nach rechts scrollen muss, um das gesamte Bild einsehen zu können.

Unter dem Oberbegriff „media queries“ verbirgt sich jener Code, der das Aussehen einer Webseite in Relation zum Viewport verändert. Online sind hierzu weitere Informationen zu finden

/// 03

Warum ist responsive Webdesign also so wichtig?

Laut einer Studie von „statista“ aus dem Jahre 2020 finden rund 52% aller Besuche einer Webseite über dem Smartphone oder anderen mobilen Endgeräten statt. Das bedeutet, dass benutzerfreundliche Webseiten geschaffen werden müssen, damit der Besucher alle Inhalte barrierefrei anschauen kann. Es existieren jedoch immer noch Webseiten auf denen man scrollen muss, da Texte und Bilder viel zu klein dargestellt sind. Die responsive Darstellung ist also essenziell für einen Seriösen Auftritt im Netz.

More To Explore

Do You Want To Boost Your Business?

drop us a line and keep in touch