Responsive Webdesign

Wir leben in einer Zeit, in der jeder online ist und wir alle unterschiedliche Geräte benutzen. Die Zeiten, in denen Websites für alle gleich groß waren, sind vorbei. In der Tat sind sie schon seit einer Weile vorbei. Wenn Sie noch keine responsive Website haben, ist es an der Zeit, dies zu ändern. Der mobile Datenverkehr macht bereits mehr als die Hälfte des gesamten Internetverkehrs weltweit aus, so dass dies mehr als nur ein wichtiger Trend ist.

Mobile Benutzer sollten sich heute nicht mehr mit großem Text herumschlagen müssen, der nur durch Vergrößern und Verkleinern korrigiert werden kann oder mit Schaltflächen, die zu klein sind, um sie zu drücken, ohne versehentlich etwas anderes anzuklicken. Mit responsivem Design werden diese Probleme gelöst.

Was ist Responsive Webdesign?

Responsive Design bedeutet in etwa „reaktionsfähiges Design“. Ziel eines responsiven Webdesigns ist es, das Erscheinungsbild der Seite automatisch und flexibel an das genutzte Endgerät anzupassen. Die Website wird somit auf Smartphone, Tablet, Notebook oder PC optimal zum Betrachten und Lesen dargestellt. Responsive Webdesign sorgt also für eine optimale Anzeige auch auf mobilen Geräten und ist damit ein großer Pluspunkt von responsiv dargestellten Internetseiten in Sachen Nutzerfreundlichkeit (User Experience; UX) und Nutzeroberfläche (User Interface; UI).

Wen es interessiert: Die technische Grundlage dafür sind Media Queries, die Teil des CSS3-Standards sind. Media Queries ermöglichen es, je nach Bedingungen, z. B. Größe des Bildschirms oder Ausrichtung des Geräts, unterschiedliche Stile zu definieren.

Praktisch äußert sich das durch verschiedene Faktoren:

Ladegeschwindigkeit der Webseite,
Einfache Navigation,
Medieninhalte, die ohne horizontales Scrollen angezeigt werden können,
Textgröße, die ohne Vergrößerung lesbar ist und
Links und Buttons, die weit genug auseinander liegen, damit sie leicht auch mit den Fingern und nicht nur mit der Maus gut angeklickt werden können.

Die Vorteile des responsiven Designs liegen auf der Hand: Es vermeidet lästiges horizontales Scrollen und ermöglicht Nutzern einen schnellen und einfachen Zugriff auf die Inhalte, unabhängig von ihrem Gerät.

Mobile first

Diese Vorteile hat auch Google längst erkannt und zog daraus Konsequenzen, die es Webseiten, die nicht entsprechend technisch programmiert sind, im Suchergebnisranking schwer macht. Ab 2015 begab sich Google an Änderungen seines Suchmaschinenalgorithmus, um Websites einen Ranking-Bonus für Mobilfreundlichkeit zu geben. Diese Änderung wurde von der Tech-Presse als „Mobilegeddon“ bezeichnet. 2018 hat Google dann offiziell erklärt, Webseiten zu bevorzugen, die mobilfreundlich sind – für Google (und auch andere Suchmaschinenanbieter) gilt daher seitdem der Grundsatz „mobile first“. Das bedeutet, dass Websites, die nicht für den mobilen Zugriff optimiert sind, auf den Ergebnisseiten der Suchmaschinen (SERPs) weiter hinten stehen, also niedriger eingestuft werden. Hinter dieser Änderung steckt die schlichte Entwicklung, dass viele Internetrecherchen oder das Internetsurfen bei Wartezeiten und zum Zeitvertreib mit mobilen Geräten stattfinden.

Mit dem Vorrang des Mobile-First-Index werden Websites von Google seitdem auf Basis der mobilen Version ihrer Inhalte eingestuft und nicht mehr wie bisher auf Grundlage der Desktop-Version; Google hat Ende Oktober 2023 mitgeteilt, dass dieser Umstellungsprozess nun abgeschlossen ist. Eine für kleinere Bildschirme optimierte Website schneidet damit in den Suchergebnissen besser ab als eine, die dies nicht tut.

Wenn Sie möchten, dass Ihre Website von potenziellen Kunden leicht gefunden wird, sollten Sie also sicherstellen, dass Ihre Internetseiten von jedem Gerät aus gleich gut zugänglich ist. Ob Ihre Seite diese Voraussetzung aktuell erfüllt, können Sie bei Google prüfen.

Nutzung mobiler Geräte nimmt weiter zu

Mobiltelefone sind heute wichtiger als Desktops. Das ist einfach eine Tatsache. Immer mehr Menschen nutzen ihre Smartphones für alles, auch für die Suche nach und das Lesen von Inhalten über Ihr Unternehmen im Internet. Überlegen Sie einmal, wie oft Sie tagsüber Ihr Handy im Vergleich zu Ihrem Desktop- oder Laptop-Computer benutzen – wahrscheinlich die meiste Zeit, oder? Laut Statista gab es im Jahr 2018 weltweit fast 3 Milliarden Smartphone-Nutzer, für das Jahr 2022 wird erwartet, dass diese Zahl auf mehr als 4 Milliarden ansteigen wird. Mit dieser Entwicklung wird auch die Wichtigkeit von Responsive Design weiter zunehmen. Im Jahr 2018 gab es erstmals mehr Suchanfragen über mobile Geräte als über Desktop-Computer, ein Drittel aller Online-Einkäufe in Deutschland wurden über ein Smartphone oder Tablet getätigt. Dieser Trend setzte sich in den Folgejahren fort. Für 2021 wurde angenommen, dass fast 60 % aller Suchanfragen bei Google über mobile Geräte nach Produkten und Dienstleistungen im Internet suchen werden. Diese Entwicklungen zeigen, dass sich das Verhalten der Nutzer im Laufe der Zeit verändert hat. Wenn es beispielsweise darum geht, lange Texte zu lesen, geschieht dies zunehmend auf Tablet-PCs und Smartphones: Aktuellen Studien zufolge lesen 70 Prozent der Nutzerinnen und Nutzer lange Texte lieber auf ihrem mobilen Gerät als auf einem Desktop-Computer. Bei herkömmlichen Websites ist die Bildschirmgröße oft nicht optimal – sie sind einfach zu klein und können nicht vollständig dargestellt werden. Das hat zur Folge, dass die Texte nicht nur vertikal, sondern auch horizontal gescrollt werden müssen. Das bedeutet, dass ein Leser ein- und auszoomen muss, was die User Experience mit einer nicht responsiven Website nicht gerade erhöht.

Umstellungsaufwand? So gut wie keiner.

Um den Nutzern ein gutes Erlebnis bei der Verwendung Ihrer Website zu bieten, sollten Sie also Responsive Webdesign implementieren. Das klingt auf den ersten Blick aufwendig und kompliziert – muss es aber gar nicht sein! Denn mit einem guten und modernen Content Management System als technischer Grundlage ist es heute leicht realisierbar, verschiedene Bildschirmgrößen und Geräte zu berücksichtigen. Technisch wurden früher für unterschiedliche Bildschirmgrößen jeweils eigene Webseiten erstellt. Damit waren mehrere URLs nötig und doppelte Programmierarbeiten sowie laufend mehrfacher Pflegeaufwand für die separaten Internetseiten erforderlich. Genau hier kommt nun das Responsive Webdesign ins Spiel. Da Google jetzt die mobile Version Ihrer Website zuerst crawlt und indexiert, ist es wichtig, dass es keine inhaltlichen Unterschiede zwischen den beiden Versionen (mobil und Desktop) Ihrer Website gibt. Mit Responsive Design können Sie heute eine einzige Website entwerfen, die auf jeden Bildschirm passt. Praktischerweise wird damit der Prozess der Veröffentlichung von Inhalten auf verschiedenen Geräten vereinfacht. Das spart Zeit und Geld, ohne Ihre gestalterischen Möglichkeiten und Kreativität einzuschränken.

Vorteile für User

Neben der geräteabhängigen Darstellung und optimierten Lesbarkeit gibt es weitere Vorteile für Nutzer bzw. Leser Ihrer Webseiten, die Sie kennen und berücksichtigen sollten.

Da responsive Websites so gestaltet sind, dass sie auf allen Geräten leicht zu bedienen sind, punkten sie auch in anderen Bereichen, etwa bei der Ladegeschwindigkeit. Da nur eine URL für alle Geräte verwendet wird, muss der Inhalt nicht mehrfach geladen werden. Da außerdem weniger Elemente geladen werden als bei einer separaten mobilen Website, können responsive Seiten schneller angezeigt werden – insbesondere auf Smartphones mit vergleichsweise langsamen Netzwerkverbindungen.

Responsive Webdesign macht es den Nutzern auch leichter, eine Seite, die ihnen gefällt, mit ihren Freunden zu teilen. Sie müssen nicht vor ihrem Computer sitzen, um eine Seite zu teilen – sie können dies von jedem Gerät aus tun, das sie gerade benutzen.

Ist eine Webseite nicht für mobile Geräte optimiert und somit nicht responsive, werden Besucher diese Seite sehr schnell verlassen und wahrscheinlich auch später nicht mehr zurückkehren. Dadurch sinkt die Zahl der Menschen, die eine Website regelmäßig besuchen, erheblich. Gerade wenn Sie eine Website z. B. beruflich betreiben, ist das ein wichtiges Argument. Sie verlieren nicht nur Kunden, sondern die Konkurrenz mit einer optimierten Website freut sich über die praktisch mühelos dorthin getriebene Nachfrage. Also: Wollen Sie riskieren, potenzielle Kunden zu verlieren, bloß weil Sie den kleinen Bildschirm vernachlässigen?

Websites, die noch nach altem Muster mit zwei Versionen und URLs erstellt wurden, sollten schleunigst umgestellt werden, um die oben beschriebenen Nachteile für Nutzer und für Ihr Suchmaschinenranking zu vermeiden. Ich erstelle Websites grundsätzlich immer im Responsive Design. Bei Interesse an einer modernen Websitegestaltung oder Aktualisierung Ihrer bestehenden Webseiten nehmen Sie doch einfach Kontakt mit mir auf. Ich berate Sie dazu gerne!