Responsive Webdesign

Der Schlüssel zum nachhaltigen Erfolg Deiner Website

Responsive Webdesign: Was ist das eigentlich und muss meine eigene Internetseite das auch können? Ist es mit mehr Aufwand verbunden als eine normale Website? Worin liegt der Unterschied zu einer mobilen Seite? Ganz egal, was Du in diesem Bereich wissen möchtest und musst, wir halten die Antworten auf Deine Fragen bereit. Denn hier erfährst Du alles rund um das Thema Responsive Webdesign.

Zunächst wird sich der Frage gewidmet, worum es beim Thema Responsivität überhaupt geht. Hierbei wird das Konzept mitsamt Hintergrund beleuchtet und von anderen, ähnlichen Methoden abgegrenzt. Danach werden die Vor- und Nachteile dieser Art der Websitedarstellung auf mobilen Gerätschaften aufgezeigt, bevor es zu einer Erläuterung der konkreten Funktionsweise kommt. Zum Schluss verraten wir Tipps und häufige Probleme bei der technischen Umsetzung.

Was ist Responsive Webdesign?

Bei Responsive Webdesign handelt es sich um einen Webdesign-Ansatz, dessen Ziel darin besteht, eine Webseite für sämtliche Endgeräte zu optimieren. Der Content sowie das Design sollen also nicht nur auf einem Desktop-PC gut aussehen, sondern vor allem auch auf mobilen Endgeräten, wie dem Smartphone und dem Tablet-PC.

Ein Design gilt dabei erst als responsive, wenn sich die Darstellung der Webseite automatisch an das jeweilige Endgerät anpassen kann, mit dem die Webseite aufgerufen wird. Der Ausdruck „responsive“ sagt dabei aus, dass das Web Design z. B. auf die max-device-width des mobilen Endgeräts von selbst „antwortet“.

Hintergrund ist der wachsende Trend der Internetnutzung auf Geräten, die mobil sind. Vor allem im privaten Bereich wird der Anteil der mobilen Nutzer, die Smartphone und Tablet benutzen, immer größer. Das Responsive Design als mobile Optimierung ist somit eine Reaktion auf diesen Trend, um die User Experience möglichst angenehm zu gestalten.

Abgrenzung

Zur mobilen Website

Eine mobile Webseite besitzt, zusätzlich zur normalen Desktop-Version, ein separates Template für die mobile Ansicht, die dann zur Verwendung kommt, wenn die Seite auf einem mobilen Gerät besucht wird. Beim responsive Design muss dagegen nur eine einzige Version der Webseite angefertigt werden, die sich dann eigenständig an das entsprechende Umfeld anpasst.

Zur adaptiven Website

Genau wie eine responsive Webseite kann sich ein adaptive Design vielen verschiedenen Geräten anpassen. Allerdings passiert das nach demselben Prinzip wie bei der mobilen Webseite: Für jedes Gerät wird im Voraus ein optimiertes Template, ein adaptive Layout generiert. Wie gesagt muss man beim responsive Design dagegen nur eine Fassung des Designs erstellen, die sich fluid an jedes Gerät anpasst.

Gründe für Responsive Webdesign

Vorteile

Ein Vorteil davon, seine Seite auf diese Weise zu designen, besteht darin, dass sie für jeden User gleichermaßen zur Verfügung steht, ganz egal, welche technischen Möglichkeiten dieser hat. Dabei ist die Seite nicht bloß auf allen Endgeräten erreichbar, sondern weist auch denselben Umfang an Inhalten auf. So muss ein User nicht etwa zur Desktop-Variante wechseln, um eine spezielle Funktion nutzen zu können (z. B. Anmeldung mit der E-Mail-Adresse).

Auch aus SEO-Sicht gibt es Vorteile. Eine mobile Version Deiner Seite wird von den Suchmaschinen als Wiederholung aufgefasst, darunter leidet dann das Google-Ranking der gesamten Seite. Mit der Entscheidung, seine Seite responsive zu machen und nur eine URL zu haben, die Google übrigens explizit empfiehlt, kann dies umgangen werden.

Die Wartung der Seite gestaltet sich außerdem wesentlich angenehmer. Dadurch, dass es ein Code für alle mobilen Gerätschaften gibt, muss im Grunde nur das Design einer einzigen Seite gepflegt werden, was das Ganze unkomplizierter und schneller macht.

Nachteile

Das Webdesign responsive zu machen, kann aber auch einige Nachteile haben. Es gibt gewisse Anforderungen, die zu beachten sind, z. B. muss die Ausführung bestimmter Skripte verhindert, Bilder formatiert und das Layout auf unterschiedlichen mobilen Gerätschaften getestet werden. Dies ergibt einen Entwicklungsaufwand, der viel größer ist als der von konventionellen Seiten, aber in Hinsicht auf  bevorstehende Google Updates im März 2021 absolut notwendig geworden ist.

Das Webdesign muss auch an die kleinsten mobilen Gerätschaften angepasst sein sollte, in den meisten Fällen also ans Smartphone. Das bedeutet, dass Bilder und Texte reduziert werden müssen, damit der Smartphone-Nutzer nicht unendlich weit scrollen muss. Es müssen also wohl oder übel Verluste am Content hingenommen werden, beziehungsweise auf jeden Fall überlegt werden, wie man diesen mobil sinnvoll anzeigen kann.

Dadurch, dass die responsive Seite mehr Ressourcen benötigt, damit sie auf allen Geräten ordnungsgemäß funktionieren kann, entstehen auch längere Ladezeiten – Die muss man gezielt mit den richtigen Anwendungen auf ein Minimum reduzieren. E gilt also: Mehrarbeit einplanen und auf diese Art langfristig Besucher auf Deine Seite ziehen und Google signalisieren, dass Deine Seite zeitgemäß und optimiert ist.

Bausteine

Media Queries

Eine Eckpfeilertechnologie des responsive Designs sind die Media Queries. Hierbei handelt es sich um eine Funktion, die es ermöglicht, die Inhalte an bestimmte Faktoren, z. B. an die Bildschirmauflösung jedes Gerätes anzupassen. In diesem Beispiel würden dann fürs eigene Design die entsprechenden Pixelwerte für Smartphones, Tablet-PCs und Laptops manuell eingestellt.

Responsive Layout

Das Layout ist ein wichtiger Aspekt im Webdesign, um die Seite nicht nur ans Browser-Fenster der Desktop-Ansicht anzupassen, sondern auch an kleine Displays, sodass sie mobile-friendly ist. Das Layout unterteilt sich normalerweise in die folgenden Elemente: Container, Kopfzeile, Inhalt, Sidebar, Fußzeile. Die Größe dieser Elemente legt man mit prozentualen Angaben fest; so können sie sich je nach Gerät fluid verändern.

Responsive Bilder und Typografie

Auch hier sieht man von absoluten und fixen Größen ab. Stattdessen wird die Schriftgröße mittels einer Prozentangabe bestimmt, die es der Schrift erlaubt, sich dem Standard des jeweiligen Gerätes anzupassen. Bilder müssen in mehreren verschiedenen Größen hochgeladen werden, die Technologie ordnet diese Größen dann aber den Geräten selbständig zu.

Technik

Es erfolgt ein Zusammenspiel von HTML und CSS. Beide Sprachen übernehmen wichtige Aufgaben, deren Umsetzung letzten Endes das gesamte Interface ausmachen.

HTML

HTML hilft dabei, das wesentliche Grundgerüst der Seite zu bauen, die am Ende sowohl auf großen Bildschirmen als auch auf kleineren Bildschirmen perfekt angezeigt wird. Mit HTML wird nämlich der Inhalt und die Struktur der Seite koordiniert. In der Praxis ermöglichen es HTML-Codes, Bilder und andere Elemente in die Website einzufügen, die auch an mobile Gerätschaften angepasst sein werden.

CSS

CSS auf der anderen Seite ist für das Layout und das Design zuständig. Konkret formuliert macht es CSS möglich, die Content-Elemente, die kurz zuvor mithilfe von HTML implementiert wurden, zu editieren. CSS-Frameworks erlauben es, ihre Maße und Farben zu bearbeiten. In Kombination mit Medienabfragen ist das Resultat des Ganzen dann eine einsatzfähige responsive Website. Eine Media Query ist z. B. „device-width“, eine andere „font-size“.

Die Umsetzung

Tipps

Wichtig bei der Implementierung eines Responsive Webdesigns ist, moderne Technologien zu verwenden, also im Wesentlichen HTML5 und CSS3. Die Planung erfordert ein gewisses Know-how und Abstraktionsvermögen, sowie die tatsächliche Umsetzung einen geschickten Workflow zwischen Konzeptern, Designern und Programmierern verlangt. Weiterhin sollte die Demonstration im Browser möglichst früh in der Entwicklungsphase erfolgen, um zu koordinieren, wie sich die Elemente auf mobilen Gerätschaften verhalten.

Probleme

Ein Problem, das bei der Umsetzung häufig auftritt, ist, dass das Konzept nicht zu Ende gedacht worden ist. Bei der Benutzerfreundlichkeit auf allen Geräten muss vieles beachtet werden. So können Aspekte leicht übersehen werden, die die Responsivität nun einmal notwendig macht. Z. B. wird auf dem mobilen Smartphone eine Aktion durch das Tippen eines Buttons ausgeführt, während man auf dem Desktop lediglich mit der Maus über den Button fahren muss.

Fazit

Somit wurde umfangreich aufgezeigt, was hinter dem Ansatz des Responsive Webdesign steckt. Die konkreten Stärken und Schwächen wurden präsentiert und ein Einblick in die Funktionsweise dieses Konzepts gewährt. Es ist eine moderne und effiziente, wenn auch knifflige Reaktion auf den wachsenden Trend der Internetnutzung auf mobilen Geräten.

Für wen sich ein Responsive Design eignet und lohnt, ist wohl eine Frage der Komplexität des Internetauftritts, die deswegen im individuellen Einzelfall zu klären ist. Grundsätzlich handelt es sich aber um eine zukunftsträchtige und praktische Methode, seine Webseite auch für mobile Gerätschaften reibungslos und mit einer maximalen Bedienungsfreundlichkeit anzubieten.