Wenn du mit einem Webdesigner über Webseiten sprichst, dann fällt irgendwann einmal ganz unweigerlich der Begriff „responsives Webdesign“. In diesem Beitrag erfährst du, was das genau ist. Und auch, warum es für Besucher und auch Suchmaschinen-Optimierung (SEO) superwichtig ist.
Was ist responsives Webdesign?
Responsiv bedeutet „antwortend, anpassend“: Ist eine Interseite responsiv, so „antwortet“ sie mit optimierter Anzeige auf das aufrufende Medium. Das kann ein riesengroßer Monitor eines PCs sein, ein Laptop oder eine kleinerer Bildschirm wie bei Tablets oder Smartphones. Soweit die saharatrockene Definition.
Schauen wir uns eine traditionelle „statische“ Webseite an. Wenn Du sie auf einem großen Monitor ansiehst, dann sieht sie vermutlich noch „ganz hübsch“ aus. Aber wenn Du sie auf einem Tablet oder Smartphone aufrufst, musst du eventuell horizontal scrollen – und das finden Nutzer nicht gut.
Mit responsivem Design wird eine Website automatisch im richtigen Format ausgegeben. Das bedeutet, dass alle Texte, Bilder, Buttons, etc. sich in Größe und Anordnung anpassen müssen.
Warum es wichtig ist, eine responsive Website zu haben
Kennst du noch den Satz „Optimiert für den IE in der Auflösung von 1024 x 724 px“? Diese Zeiten sind gefühlte Webdesigner-Lichtjahre her. Jeder erwartet heutzutage eine optimale Anzeige für das sein Gerät. Ist das nicht der Fall? Uäääh – klick – weg!
Die Nutzungszahlen zeigen es klipp und klar: Das Smartphone ist klar im Vormarsch. Dem hat die „Mainstream-Suchmaschine“ Google schnell Rechnung getragen und favorisiert Webseiten, die smartphone-optimiert sind. Mehr noch: Nicht responsive Webseiten fallen im Ranking absolut ab. Das ist ein übergewichtiges Argument, wenn es um deine eigene Webseiten geht.
Möchtest du Deine Website-Besucher mit deinen Inhalten oder lieber mit „Ladekringelchen“ hypnotisieren? Ladezeiten-Optimierung ist hier das Stichwort: Mit responsivem Webdesign ist es möglich, beispielsweise weniger oder reduzierte Bilder zugunsten der Ladezeiten für mobile Geräte einzusetzen. Auch das ist ein Argument für Google, schnell ladende responsive Websites positiv zu bewerten.
Dann spielt noch das Thema Nutzerfreundlichkeit eine Rolle. Ein Beispiel: Eine normale, permanente Navigationsleiste ist bei kleineren Anzeigen gar nicht vernünftig nutzbar. Dafür wird die Navigation platzsparend hinter den drei waagrechten Strichelchen, dem „Hamburger“ verborgen und nur bei Bedarf aufgerufen.
Wie wird responsives Webdesign umgesetzt?
Es ist absolut nicht trivial, zig skalierte bzw. umgeordnete Ansichten sauber aufeinander abzustimmen. Schriften, Bilder, Bereiche: Alle wollen wie ein Model perfekt in Szene gesetzt sein, sonst herrscht blanker Zickenkrieg.
Ein professioneller Webdesigner hat das bereits im Entwurf des Konzepts der Site im Kopf. Er denkt quasi „mehrdimensional“: Und daran erkennt man auch oft Webseiten, die in Eigenregie gestrickt worden sind.
Dafür wird oftmals ein dynamisches Raster eingesetzt, das sich proportional an das Ausgabemedium anpasst. Bilder werden relativ vergrößert oder verkleinert, ebenso Schriften. Gerätespezifische Gegebenheiten werden mit bedacht – beispielsweise sollen auch dickere Finger zielsicher die Buttons treffen.
Das Navigationskonzept ist normalerweise auch ein großes Thema: Insbesondere umfangreichere Sites müssen an dieser Stelle mit größter Sorgfalt geplant werden.
Wie teste ich, ob meine Site responsiv ist?
Dafür gibt es zwei einfache Methoden: Nimm Dein Smartphone und rufe Deine Seite auf. Kannst du sie ohne horizontales Scrollen oder Nachvergrößern lesen? Dann stehen die Chancen gut, dass sie responsiv ist. Dabei fällt normalerweise schnell auf, wie die Navigation auf die veränderte Anzeigegröße reagiert. Bei den „kleineren“ Ausgaben erscheint irgendwann der „Hamburger“.
Eine andere pragmatische Variante ist, von einem größeren Ausgabemedium – z. B. dem PC – auszugehen. Setze das Browserfenster nicht auf maximale Größe, sondern auf eine verkleinerte Ansicht. Klicke auf eine seitlichen Rand des Browseranzeige und verkleinere / vergrößere das Fenster mit gedrückter Maustaste. Ich finde, man sieht dabei ziemlich gut, ob und wie die Anzeige flutscht.
Au weia – meine Site ist nicht responsiv! Und nun?
Dann solltest du mit dem Webdesigner Deines Vertrauens in Klausur gehen, um das schleunigst zu ändern. Aller schleunigst. Mit Hyperlichtgeschwindigkeit. Früher war eine statische Seite voll in Ordnung und aller Ehren wert. Heute de facto nicht mehr.
Es gibt mittlerweile viele gute Templates / Themes / Layouts, die in den verschiedenen Content Management Systemen (CMS) wie beispielsweise WordPress installiert und kundenspezifisch angepasst werden können.
Bei webwirbel.de baue ich auf den etablierten Theme- und Pagebuilder Divi beim Einsatz von WordPress: Unsere Kunden profitieren hier von unserer Lizenz. Sprich mich gerne darauf an, wenn du deine Website modernisieren möchtest.
Deine Website braucht frischen Schwung?
Erfahre, wie sie für Kunden wieder attraktiver wird.
