Start » Tipps » Responsives Webdesign – was ist das?

Das ist eine von meinen Kunden oft gestellte Frage. Hinterhergeschoben kommt dann: „Brauche ich das?“

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 aufrufst, musst Du eventuell horizontal scrollen – und das finden Nutzer nicht gut. Dazu kommt, dass z. B. Tablets quer oder hochkant gehalten werden können. 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.

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. 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.

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.

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.

Dafür wird oftmals ein dynamisches Raster eingesetzt, das sich proportional an das Ausgabemedium anpasst. Bilder werden relativ vergrößert oder verkleinert. 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.  

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.

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 bauen wir auf das etablierte Theme Divi beim Einsatz von WordPress: Unsere Kunden profitieren hier von unserer Lizenz.

Wird das hauseigene wewi:cms verwendet, so werden entweder von uns individuell in html und css entwickelte oder aber extern gekaufte Layouts angepasst.  

Gefällt Dir der Beitrag? Dann freue ich mich über eine Empfehlung: