Responsive Webdesign: Was ist es und warum ist es wichtig?

Eines vorweg: Eine Webseite zu haben, ist wichtig, aber sie sollte auch responsive sein – sonst macht es nicht viel Sinn.

Denn mittlerweile ist „Responsive Webdesign“ der Goldstandard. Was es genau ist, warum es so wichtig ist und wieso gerade Burger eine wichtige Rolle spielen, erfährst du in diesem Blogbeitrag.

Was ist „Responsive Webdesign“?

Wird eine Webseite responsive designt, bedeutet das, dass sich ihre Darstellung immer an das jeweilige Gerät anpasst, mit dem die User sie aufrufen. 

Aber das bedeutet nicht nur, dass sich die Größte der dargestellten Inhalte ändert. Sie werden gegebenenfalls auch neu angeordnet. Der Anzeigebereich eines Smartphones, das im Hochformat verwendet wird, ist eben nicht so breit wie der eines herkömmlichen Computerbildschirms.

Beispiel responsive Smartphone-Ansicht:

smartphone ansicht responsive design.png
desktop ansicht responsive design

Der Begriff „responsive“ stammt aus der englischen Sprache und bedeutet so viel wie reaktionsfähig.

Das Ziel eines responsiven Designs ist, allen Usern eine hohe Bedienfreundlichkeit (Usability) zu ermöglichen. Die Webseite richtet sich stets so aus, dass die Elemente nicht über den horizontalen Anzeigebereich hinausragen, was ein aufwendiges Scrollen nach sich ziehen würde.

Du kannst dich nur in eine Richtung über die Webseite bewegen, nämlich von oben nach unten. Das sind die User bereits vom Surfen mit dem PC gewohnt.

Auch das Zoomen und verkleinern fällt weg. Es sollte bei einer responsiven Homepage nicht vorkommen, dass du sie vergrößern musst, um beispielsweise den Text lesen zu können und verkleinern musst, um ein Bild vollständig anzuschauen. Die Größen der Elemente sind so aufeinander abgestimmt, dass eine komfortable Nutzung möglich.

Bei einer sauber programmierten responsiven Webseite spielt es für die Usability keine Rolle, ob du sie mit einem Smartphone, einem Tablet oder einen Laptop aufrufst.

Auch die Ausrichtung des Geräts ist dabei egal. Die Anzeige richtet sich stets so aus, dass du auf alle Bereiche zugreifen kannst. Damit ist allerdings zum Teil verbunden, dass sich Menüstrukturen auf kleinen Displays nicht vollständig anzeigen lassen. Sie klappen sich erst nach einer Eingabe der User auf.

Woran lässt sich eine responsive Webseite erkennen?

Viele Unternehmen, die eine eigene Webseite betreiben, wissen unter Umständen nicht, ob sie responsive ist, weil ihnen dazu die nötige Expertise fehlt.

Der einfachste Weg, um dies herauszufinden, ist, die Homepage mit einem anderen Gerät als dem Computer aufzurufen.

Aber es gibt auch andere Möglichkeiten: So enthalten die meisten modernen Browser sogenannte Entwickleroptionen, mit denen der Zugriff von einem mobilen Gerät dargestellt werden kann.

entwicklerkonsole danheller de

Das bietet weitere Vorteile: Mit diesen Hilfsmitteln ist es möglich, unterschiedliche Bildschirmgrößen und -ausrichtungen auszutesten.

Du erhältst durch sie einen umfangreichen Eindruck davon erhalten, wie gut die Umstellung der Anzeige funktioniert. Zudem kannst du auf diesem Weg den HTML-Code anpassen, um zu sehen, wie sich mögliche Änderungen bemerkbar machen.

Diese Änderungen kannst nur du sehen, da sie nicht im System hinterlegt, sondern lediglich vom Browser simuliert werden.

Daneben bietet Google mit der „Google Search Console“ und dem „Test auf Optimierung für Mobilgeräte“ zusätzliche Möglichkeiten, um zu überprüfen, in welchem Maße die Webseite für mobile Geräte optimiert ist.

Dabei werden neben dem responsiven Design auch weitere Faktoren berücksichtigt, die für ein gutes Suchmaschinenranking wichtig sind. So kannst du Bereiche ermitteln, in denen Verbesserungsbedarf besteht.

google responsive check

Diese werden von den Analysetools eindeutig benannt, sodass sie sich einfach identifizieren lassen.

Welche Vorteile bietet eine responsive Webseite?

Immer mehr User surfen mit Smartphones und Tablets, alleine in 2020 waren es laut Statista mehr als 60 Millionen Nutzer in Deutschland. Dabei hat sich in den vergangenen Jahren vor allem das Nutzen der Sozialen Netzwerke mit mobilen Geräten durchgesetzt.

Die dort oder mit Messenger-Apps geteilten Links werden direkt mit den entsprechenden Devices aufgerufen. Auf eine responsive Webseite zu setzen, lohnt sich alleine aus dem Grund, damit dir dieser Traffic nicht entgeht.

Die sogenannte „mobile friendliness“, also die Bewertung, wie benutzerfreundlich eine Webseite für mobile User ist, ist eine wichtige Eigenschaft im Bereich der Suchmaschinenoptimierung.

Eine Webseite, die die Kriterien erfüllt, erreicht alleine dadurch eine höhere Sichtbarkeit, da sie in den Suchergebnissen weiter oben angezeigt wird als eine Seite, die nicht responsive ist.

Hinzu kommt: Google hat inzwischen den Fokus auf das „Mobile Indexing“ gelegt. Der Suchroboter durchforstet seitdem nahezu ausschließlich die mobilen Webseiten, um deren Inhalt in seinen Katalog aufzunehmen.

Mann am Smartphone

Wichtig: Die Desktop-Versionen spielen nur noch eine untergeordnete Rolle!

Wenn du also keine Webseite besitzt, die für User mit mobilen Geräten konzipiert ist, werden die Inhalte nicht von Google erfasst und können somit bei einer Google-Suche nicht gefunden werden.

Nicht zuletzt profitierst du mit einer responsiven Webseite davon, dass sich diese auch künftig immer an die Displays der User anpasst. Du bleibst zukunftsfähig, da sich die Technik im Hintergrund um die erforderlichen Anpassungen kümmert. Das gilt beispielsweise auch dann, wenn sich dann neue Bildschirmgrößen und -formate etablieren sollten.

Wie setzt man eine responsive Webseite um?

Bei einer responsiven Webseite sorgen sogenannte Breakpoints für die Struktur.

Mit ihnen definierst du die Breite, über die sich die Inhalte erstrecken. Alles, was darüber hinausgeht, wird umgebrochen. Die Elemente werden dann nicht mehr nebeneinander, sondern untereinander angezeigt.

Es gibt eine Reihe von gängigen Breakpoint-Formaten. Sie werden beispielsweise bei Breiten von 320 Pixeln für Smartphones und 768 Pixeln für Tablets im Hochformat definiert. 

Auch für Desktop-User werden ein Bereich festgelegt: Er ist 1024 Pixel breit. Glücklicherweise brauchst du dich selbst nicht darum kümmern, die Punkte für den Umbruch festzulegen – das regelt die Technik (meistens) im Hintergrund für dich.

Für bekannte Content-Management-Systeme wie WordPress, Joomla und Typo3 gibt es Erweiterungen, die die mobile Ansicht für dich optimieren

 Die Breakpoints werden im CSS Stylesheet festgehalten. Dabei handelt es sich um eine Datei, in der alle essenziellen Informationen hinterlegt sind, die das Design der Webseite ausmachen.

Früher behandelten Webdesigner die Umsetzung von mobilen Homepages zweitrangig

Sie erstellten zunächst die Desktop-Version und passten diese für die Darstellung auf kleineren Geräten an. Dadurch entstanden nicht selten Probleme bei der korrekten Anzeige auf Smartphones und Tablets.

Seit einigen Jahren hat sich im Webdesign jedoch das „Mobile First“-Prinzip durchgesetzt. Bei der Vorgehensweise werden zunächst die Webseiten für mobile Geräte programmiert. So lässt sich sicherstellen, dass sie auf den Geräten tadellos funktionieren.

Erst im nächsten Schritt werden die Bereiche für die breitete Desktop-Variante hinzugefügt. Das Upscaling ist mit einem deutlich geringeren Fehler- und Problempotenzial verbunden als das verkleinern.

Wenn es darum geht, eine moderne responsive Webseite zu gestalten, solltest du nicht versuchen, dass Rad neu zu erfinden. Es gibt einige Konventionen, die sich im Laufe der Zeit durchgesetzt haben. Dazu zählt unter anderem das sogenannte „Hamburger-Menü-Icon“.

Burger Menu Responsive Design 2

Dabei handelt es sich um drei übereinander Punkte oder Striche. Durch seine Ähnlichkeit zu einem Hamburger (zwei halbe Brötchen und in der Mitte der Belag) hat dieses Symbol seinen Namen erhalten.

Es steht dafür, dass der User nach einem Klick auf zusätzliche Menüpunkte zugreifen kann.

Da es sich in mobilen Anwendungen aller Art durchgesetzt hat, können es die User intuitiv benutzen, wodurch es ihnen leichtfällt, sich auch auf deiner Webseite zurechtzufinden.

Das ist gerade für mobile Webseiten wichtig, da die User in unterschiedlichen Situationen auf sie zugreifen und nicht immer bereit sind, sich intensiv mit ihrer Struktur und ihren Funktionen zu befassen.

Du kannst das Design des Buttons zwar mit innovativen Ideen anpassen, Dabei solltest du aber darauf achten, dass das Symbol für die User weiterhin auf den ersten Blick zu erkennen ist.

Warum ist eine responsive Webseite wichtig?

In den Anfängen des mobilen Internets waren Desktop- und Handy-Versionen von Webseiten gänzlich unterschiedlich.

Dafür gab es zwei wesentliche Gründe.

1. Zum einen haben mobile Internetverbindungen damals noch nicht ermöglichen, Daten im heute üblichen Umfang herunterzuladen. Die Geschwindigkeit für die Übermittlung von Daten war zu niedrig und das Mobilfunknetz noch nicht so flächendeckend vorhanden.

2. Daneben konnten die Geräte auf ihren kleinen Displays die Homepages nur begrenzt darstellen. Nicht zuletzt war die Navigation über physische Tasten deutlich umständlicher als heute mit Touchscreens.

Mobile Webseiten waren auf das Nötigste reduziert. Das bedeutete zugleich, dass die nicht direkt mit dem Verwaltungsmenü der eigentlichen Webseite verbunden haben.

Wer heute kein responsives Design für seine Internetpräsenz einsetzt, sieht sich, was die Administration angeht, weiterhin mit dem Problem konfrontiert, dass er zwei Webseiten pflegen muss. Mit einer responsiven Webseite kannst du dir also Arbeitsschritte ersparen und die Verwaltung effizienter gestalten.

Hinzu kommt: Beide Webseiten sind dann aus einem Guss erstellt. Sie sind in ihrem Design, ihren Inhalten und ihrer Bedienung nahezu identisch.

Die Unterschiede liegen lediglich in Details und sind dem Umstand der besseren Usability geschuldet.

Besonders praktisch:

Wenn im CSS Stylesheet alle Angaben zum Design der mobilen und der Desktop-Webseite hinterlegt sind, brauchst du dich selbst nicht darum zu sorgen, dass die Inhalte korrekt angezeigt werden.

Es ist also nicht erforderlich, Bilder auf die korrekten Maße zu beschneiden. Das regelt automatisch die Technik im Hintergrund. Du kannst dich alleine darauf konzentrieren, die Inhalte zu veröffentlichen.

Eine responsive Webseite steigert die „mobile friendliness“ deiner Webseite.

Dazu zählt nicht nur das bloße Vorhandensein einer Variante für Smartphones und Tablets. Eine optimierte mobile Webseite kann auch mit kurzen Ladezeiten punkten.

Das kannst du beispielsweise dadurch erreichen, dass du die verwendeten Grafikdateien für die Darstellung im Internet optimierst – die User müssen dann nicht mehr so große Datenmengen herunterladen.

Davon profitieren nicht nur diejenigen, die deine Webseite aufrufen, sondern auch du.

Schließlich handelt es sich auch dabei um relevante Rankingfaktoren, anhand derer Suchmaschinen wie Google deine Webseite einschätzen. Und je höher das Ansehen ist, desto weiter oben wird deine Webseite in den Suchergebnissen angezeigt.

Mit einer optimierten mobilen Webseite erreichst du eine große und relevante Zielgruppe.

Immerhin besaßen in Deutschland bereits 2020 mehr als 97 Prozent der Menschen im Alter zwischen 14 und 49 Jahren ein internetfähiges Smartphone. Und die Anzahl der mobilen Zugriffe auf Webseiten ist in den vergangenen Jahren stetig gestiegen.

Dieser Trend wird voraussichtlich in der Zukunft anhalten. Damit wird eine gute und technisch einwandfrei funktionierende responsive Homepage immer mehr an Bedeutung gewinnen.

Willst du wissen, wie du mit dem richtigen Lead Magnet die Aufmerksamkeit deiner Traumkunden gewinnst?
Yes, verrate mir, wie es geht!
© 2023 contentmentor.de