Geschäftsführer, Webdesigner & Web-Entwickler, staatlich geprüfter Mediengestalter
Was ist eigentlich Responsive Design? Wie funktioniert diese Technologie? Welche Vorteile besitzt ein Responsive Webdesign? All diese und viele weitere Fragen klären wir in diesem Artikel.
Inhaltsverzeichnis
Responsive bedeutet im übertragenen Sinne „reaktionsfähig“, also ein auf das jeweilige Endgerät reagierendes Layout. Oder: Das Layout reagiert auf den Nutzer, nicht der Nutzer auf die Webseite.
Vor etlichen Jahren noch gab es lediglich Desktop-Computer als Endgeräte zur Betrachtung von Webseiten. Mit der Erscheinung des Apple iPhone der ersten Generation im Jahre 2007 wurde dann ein mobiler Trend losgetreten. Dieser anfängliche Trend ist inzwischen alles andere als nur das: Smartphones gehören mit großem Vorsprung zu den meistgenutzten Endgeräten weltweit. Je nach Branche und Zielgruppe einer Webseite kommt es durchaus vor, dass weit über 80 Prozent der gesamten Webseiten-Besucher von mobilen Endgeräten wie Smartphones und Tablets ausgehen.
Im Bereich des Webdesigns musste also eine Lösung her, Webseiten auch auf kleinen Displays darzustellen. Gerade auch mit der Erscheinung weiterer Smartphones und Geräten-Modellen mit verschiedenen Bildschirmgrößen (meist von 4-6 Zoll) musste es möglichst flexibel sein. Auch eine einzige mobile Darstellung war schnell nicht mehr ausreichend. Die derzeit meist genutzte Lösung lautet „Responsive Design“ — inzwischen ein Standard im modernen Webdesign. Diese Lösung ist nicht nur unabhängig von der Bildschirmgröße, sondern auch von Betriebssystem und Browser. Meist steht die mobile Fassung einer Webseite sogar an erster Stelle der Prioritätenliste, eben noch vor dem Desktop. Hier spricht man dann von „mobile first„.
Ein professionelles Responsive Layout zeichnet sich dadurch aus, dass es natürlich unabhängig von Endgerät bzw. Auflösung gleichermaßen gut funktioniert. Hier spricht man dann auch von einem stufenlosen Layout. Gemeint ist damit, dass es nicht nur auf dem Apple iPhone 11 funktioniert, sondern eben auf jedem anderen Smartphone ebenso gut. Das kann gewährleistet, wenn man die Breakpoints des Layouts auf Basis des Designs umsetzt und nicht in Hinblick auf Endgeräte. Darüber hinaus ist natürlich auch die Usability wichtig — wie auch auf dem Desktop. Im Mobile-Sektor spricht man auch von der „mobile User Experience“.
Die Funktionsweise von Responsive Design ist schnell erklärt. Einfach gesagt, ist das Layout einer Webseite nicht mit festen Werten und Maßen umgesetzt, sondern mit prozentualen Angaben. Also statt 500 Pixel in der Breite werden z.B. 50 Prozent angegeben. Somit folgt die Gestaltung der Webseite keinem festen, sondern einem „flüssigen“ Raster.
Responsive Design ist nicht eigenständig. Letztlich handelt es sich um das Desktop-Layout, das lediglich auf die kleinere Darstellung runtergebrochen wird. Oder — im Falle des „mobile First“-Ansatzes — wird die mobile Darstellung auf den Desktop-Computer vergrößert. Unabhängig von „mobile first“ oder „desktop first“ — es gibt immer eine Basis. Bei einer mobilen Webseiten-Darstellung mittels Responsive Design handelt es sich also niemals um eine eigene, zusätzliche oder zweite Webseite.
Die Umsetzung von Responsive Design erfolgt mittels der Technologien HTML5 und CSS3. Mit CSS3 wurden die sogenannten Media Queries eingeführt. Damit ist es unter anderem möglich, im CSS Code die Auflösung, Displaygröße und Format des Endgeräts abzufragen.
In folgendem Beispiel für die Webseite ab einer Auflösung von 480 Pixel in der Breite einen weißen Body-Hintergrund besitzen, während die Webseite auf dem Desktop möglicherweise mit einem dunklen Hintergrund dargestellt wird. Hier spricht man dann von sogenannten Breakpoints.
Seit dem 21. April 2015 ist „Mobile Friendliness“ ein Rankingfaktor für den Suchmaschinenriesen Google. Spätestens seit diesem Tag ist eine mobile Variante einer Webseite nicht mehr wegzudenken. Google folgt hier natürlich letztlich einfach nur dem Trend der technologischen Entwicklung. Besitzt eine Webseite kein Responsive Design, so bedeutet das natürlich nicht, dass man auf dem Google-Index fliegt. Gerade bei den technischen Faktoren ist Google — zumindest zu Beginn — weniger streng. Gerade im Jahre 2015 gab es also immer noch viele Top-Rankings ohne mobile Darstellung. Allerdings wächst die Gewichtung solcher Faktoren oftmals zunehmen — unter anderem deshalb, weil Google den Webseiten-Betreibern natürlich eine gewisse Schonfrist gewährt. Nicht zu vergessen sind jedoch auch „indirekte“ Ranking-Faktoren wie z.B. User Experience, Verweildauer und die Absprungrate — Werte, die sich natürlich verschlechtern, wenn die Webseite nicht mobilfreundlich ist, aber 70 Prozent der Besucher der Webseite ein Smartphone verwenden.
Ab März 2021 ist es zudem so, dass Google ausschließlich den „mobile“ Index bewertet. Etwaige Inhalte einer Webseite, die zwar auf dem Desktop sichtbar sind aber im Responsive Design fehlen, werden somit nicht mehr bewertet. Ein weiterer Schritt in Richtung „Mobile“ und erneut ein „Wink mit dem Zaunpfahl“ für Unternehmen, die immer noch kein Responsive Webdesign einsetzen.
Die einzige Alternative zum Responsive Design ist eine eigenständige, mobile Version der Webseite. Diese kann auch mehr oder weniger als Vorgänger des Responsive Design verstanden werden. Allerdings ist eine eigenständige Mobil-Version natürlich weniger flexibel, oftmals viel mehr an Endgeräte bzw. Auflösungen gebunden und nicht selten auch über eine Subdomain erreichbar (z.B. mobi.eine-domain-xy.de). Ein erhöhter, technischer Aufwand ist kaum zu vermeiden — teilweise sogar aus inhaltlicher Sicht, da z.B. alle Inhalte doppelt gepflegt werden müssen.
Auch aus Sicht der Suchmaschinenoptimierung (SEO) ist man vor zusätzliche Herausforderungen gestellt, da man es Google verständlich machen muss, dass die Inhalte auf z.B. einer Subdomain nur eine mobile Version und eben keine zweite/weitere Webseite darstellen. Google selbst empfiehlt auch explizit das Responsive Design für die Umsetzung einer mobilen Webseite, wenngleich man die eigenständigen Mobil-Versionen weiterhin als „mobile friendly“ anerkennt.
Spannende Artikel zum Thema Webdesign
Sie benötigen eine WordPress Agentur? Wir stehen als Ihre Experten zur Verfügung. Treten Sie mit uns in Kontakt und vereinbaren Sie ein unverbindliches Beratungsgespräch.
Als Bestandteil des UX-Designprozesses gehört Persuasive Design vielfach dazu, weil damit einfach und effizient Conversionziele erreicht werden können. Doch was ist Persuasive Design konkret,...
mehr lesen
Eine Website wurde neu erstellt, entspricht den aktuellen Designs und technisch ist auch alles in bester Ordnung – und doch bleiben die Besucher:innen aus?...
mehr lesen
Der Begriff Joy of Use bezeichnet die Freude an der Verwendung. Selbst im B2B-Bereich ist dies eine Option, wenngleich sie zunächst vielleicht seltsam erscheinen...
mehr lesen
Hier gibt es eine Übersicht der beliebtesten und besten Google Web Fonts für das nächste Webdesign. Außerdem beantworten wir die Frage, was Google Fonts...
mehr lesen
Ligatur: Was ist das? Eine Ligatur ist ein Begriff aus der Typografie, der sich vom lateinischen Wort „ligare“ für „verbinden“…
Was ist das Backend? Der Begriff „Backend“ beschreibt die tiefste Ebene eines Schichtenmodells aus der Informationstechnologie, welches für die strukturierte…
Was bedeutet Breadcrumb? Der Begriff Breadcrumb beschreibt eine sekundäre Navigation auf einer Website, welche die primäre Navigation des Menüs unterstützt….
