Was ist responsive Webdesign?

‚Responsive Webdesign‘ bedeutet übersetzt ‚reagierendes Webdesign‘ und meint die automatische Anpassung einer Internetseite an das jeweilige Ausgabegerät. Da wir heute nicht mehr nur mit PC und Laptop sondern auch mit Tablets und Smartphones im Internet surfen, werden Internetseiten in unterschiedlichsten Bildschirmgrößen betrachtet. Statische Webseiten, wie sie vor dem Smartphonezeitalter üblich waren, passen sich lediglich in ihrer Größe an. Sie werden also im Zweifel zu einer Miniaturausgabe, sodass man mühsam den Inhalt hin und herschieben und relevante Informationen heranzoomen muss. Menüpunkte und Links sind meist so klein, dass man sie schon mit kleinen Fingern kaum treffsicher antippen kann und mit dem Aufruf einer neuen Seite beginnt der Spaß von Neuem.

Responsive Webdesign kam ungefähr im Jahr 2011 auf, vorher löste man das Problem häufig mit separaten mobilen Webseiten, die in Design und Funktion eingeschränkt waren. Jeder hat sich mal über solch eine Seite geärgert, weil es hier nicht selten gehakt hat. Von dem Aufwand, eine komplette zweite Ausgabe der Firmenhomepage zu pflegen mal ganz abgesehen.

Wie funktioniert responsive Webdesign?

Responsive Webdesign löste das Problem, indem über CSS-Frameworks einfach zahlreiche Funktionen für verschiedene Größen und Auflösungen mitgeliefert wurden. Man hat also nur eine Internetseite, aber diese kann sich von selbst an das Ausgabegerät anpassen: Die Elemente sind in Blöcken zusammengefasst und werden nach einem bestimmten Raster neu sortiert. Was auf dem großen PC-Bildschirm oder Laptop in Spalten nebeneinander steht, wird auf dem kleinen, hochformatigen Smartphone untereinander angeordnet. Das Menü, das sonst horizontal quer über die Seite verläuft, verkleinert sich zu einem Button und fährt per Fingertipp auf. Die Schriftgröße bleibt erhalten und der Text umbricht automatisch im Bildschirmformat, sodass die Lesbarkeit auf kleinen Bildschirmen gewährleistet ist. Links und Buttons sind groß genug, um sie komfortabel mit dem Finger anzutippen.

Wie finde ich heraus, ob eine Webseite responsive ist?

Ob eine Webseite responsive ist, kann man natürlich am einfachsten testen, indem man sie auf einem Smartphone oder Tablet aufruft. Es geht aber auch am PC: Klickt man oben rechts auf das doppelte Kästchen neben dem roten „Schließen“-X, wird das Browserfenster etwas kleiner.

Fahren Sie mit der Maus auf den Rand und ein Doppelpfeil erscheint. Nun können Sie den Rand durch Anklicken mit der Maus verschieben und das Fenster auf Handyformat verkleinern. Wenn die Inhalte sich an das kleinere Format anpassen, der Text anders umbricht oder Spalten und Elemente verspringen, ist die Seite responsive. Bleibt die Seite starr und verschwindet der Inhalt mit der Verkleinerung des Browserfensters, handelt es sich um statisches Webdesign.

Brauche ich für meine Webseite responsive Webdesign?

Um ehrlich zu sein: Ja. Die Lesbarkeit auf Smartphones und mobilen Endgeräten ist von hoher Bedeutung. Einerseits gehen über 40% der Internetnutzer inzwischen mobil online und erwarten geradezu, dass Internetseiten auf Smartphones komfortabel zu bedienen sind. Andererseits straft auch Google inzwischen nicht-mobiloptimierte Seiten ab, indem sie im Ranking abgewertet werden, um das Nutzererlebnis zu verbessern. Wenn Sie möchten, dass Ihre Internetseite von Google und von den Nutzern geliebt wird, sollten Sie daher auf responsive Webdesign umrüsten.

Autor: Silke Kronen

Sie benötigen Unterstützung bei der Umstellung auf responsive Webdesign? Gerne helfe ich weiter: Vereinbaren Sie am besten direkt ein kostenloses Erstgespräch mit Silke Kronen – in Rheinberg, Kamp-Lintfort, Alpen, Moers – oder per Telefon:

[ms_button style=“normal“ link=“https://silkekronen.de//kontakt/“ size=“medium“ shape=““ shadow=“no“ block=“no“ target=“_self“ gradient=“no“ color=“#8b2939″ text_color=“#ffffff“ icon=“fa-comments-o“ icon_animation_type=“bounce“ border_width=““ class=““ id=““]jetzt Termin vereinbaren[/ms_button]

 

Linktipps:

Mehr dazu auch hier: Wikipedia – Responsive Webdesign