Bis ins Jahr 2005 war Webdesign relativ einfach: Ein Onlineshop wurde für Computer oder Notebooks optimiert. Der Kunde saß entweder daheim oder wurde im Büro abgeholt. Als Onlinehändler konnten Sie davon ausgehen, dass er sich vor einem großen Bildschirm befand – und solchen bequem bedienen konnte. Das hat sich mit dem Siegeszug von Smartphones und Tablet-PCs grundlegend geändert. Anders als die „alten“ Computer sind diese Endgeräte mit berührungssensitiven Displays ausgestattet und lassen sich per Finger bedienen.
„Diese Entwicklung führte zu unerwarteten Problemen – das Responsive Webdesign war geboren!“
Im Jahr 2010 wurden die Schwachstellen nach und nach deutlich: So waren die meisten Frontends (Benutzeroberflächen) nur für herkömmliche Displayformate geeignet. Ein Smartphone ist kleiner als ein klassischer Computer. Zudem ist es an einem winzigen Bildschirm deutlich komplizierter, die einzelnen Inhalte anzusehen – oder haben Sie die Maus fürs Smartphone erfunden?
Was ist Responsive Webdesign?
Auf kleinen Bildschirmen kann man Inhalte schwer erreichen. Scrollen benötigt eine Maus und mit den Fingern lässt sich diese Bewegung kaum durchführen.
Die Lösung nennt sich Responsive Webdesign – „reagierendes Webdesign“: Eine Website passt sich allen Geräten an und ist überall schön anzusehen. Auch die Navigation sollte fehlerfrei funktionieren, denn der Benutzer muss alle Inhalte bequem einsehen können. Sonst verlässt er Ihre Homepage und entscheidet sich womöglich für die Konkurrenz.
Im Gegensatz zum Adaptive Design, kann sich Responsive Webdesign der Größe des Browserfensters flexibel anpassen. Somit unterscheidet es sich von den starr konstruierten Layouts alter Onlineshops.
Vorteile: Warum ist es so wichtig?
Vor wenigen Jahren interessierte sich kaum jemand für Internet auf mobilen Geräten. Es wurde für kleine Spiele oder zum Laden weniger Seiten genutzt. Mehr war nicht drin, da die Datentarife sehr teuer waren, nur eine geringe Datenmenge zuließen und es am schnellen Netz mangelte. Seitdem konnte die Webentwicklung enorme Fortschritte erzielen. Dank LTE oder 4G gehören diese Probleme der Vergangenheit an – was dafür den Unternehmen zu schaffen macht:
„Knapp 10 % der Onlineshops sind für mobile Geräte optimiert.“
Das ist viel zu wenig, da sich die Nutzerlandschaft gewandelt hat. Während es vor 10 Jahren ein geringfügiger Prozentsatz war, sind nun über 70 % der Bevölkerung mit Smartphone, Tablet und Co. im Internet unterwegs. Es ist deutlich entspannter, auf der Couch nach dem gewünschten Produkt zu suchen – anstatt einen „sperrigen“ Computer zu benutzen. So hat sich die Anzahl an Tablets seit 2010 quasi ver-20-facht.
Hierbei bietet das responsive Design folgende Vorteile:
1. Eine Version für alle Endgeräte
Wer bis dato eine Version genutzt hat, muss umdenken: Heute sollten Sie die Bildschirmauflösung verschiedener Geräte einbeziehen:
- Smartphones 320px bis 480px
- Tablets 768px bis 1024px
- Desktop-PCs 1024px und höher
Mit Responsive Webdesign müssen Sie sich darüber keine Gedanken machen, da sich die Bildschirmauflösung automatisch anpasst – was auch für neue Geräte mit anderer Auflösung gilt. Es ist keine Änderung am Code erforderlich.
2. Es wird nur eine URL benötigt
Ohne Responsive Webdesign müssten Sie für jede Bildschirmauflösung eine eigene URL oder Subdomain erstellen. Nun liked ein Computer-Nutzer Ihre Homepage. Eine tolle Sache – doch dieser Link wird nur am PC korrekt dargestellt. Tablet-Usern erscheint das Design mangelhaft, denn es ist die Computer-Version. Gute Werbung sieht anders aus!
„Aus SEO-Sicht erhalten Sie ein besseres Ranking, wenn Sie für alle Inhalte eine Domain nutzen.“
Und Sie sparen viel Zeit. Eine URL benötigt nur einen Bruchteil der Pflege, die Sie für mehrere Links aufbringen müssten. Wenn sich nur ein kleiner Baustein ändert, müssten Sie ihn für alle URLs anpassen – eine echte Sisyphusarbeit! Im E-Commerce müssen Sie schnell und flexibel auf Neuerungen reagieren. Nutzen Sie die Zeit lieber sinnvoll, als mehrere Versionen einer Website zu pflegen.
3. Professionelles Auftreten
Viele Unternehmer legen kaum Wert auf ein seriöses Auftreten. Sie glauben, einige gute Texte würden genügen, um ihre Kompetenz zu unterstreichen.
Die Realität sind anders aus, da sich die Kunden solche Inhalte gar nichts erst anschauen. Sie klicken sofort weiter, wenn ihnen eine Website unseriös erscheint. Das Design einer Homepage sollte für Sie einen wichtigen Stellenwert einnehmen. Langfristig erzielen Sie wirtschaftliche Vorteile, wenn Sie Ihre Internetpräsenz möglichst kundenfreundlich gestalten. Mit Responsive Webdesign erhält jeder Besucher die bestmögliche Variante der Website angezeigt.
4. Bedeutung des mobilen Internets
Wie bereits erwähnt, gewinnen Tablets und Co. immer höhere Marktanteile. Das ist auch Internetkonzernen wie Google aufgefallen, die ihren Suchalgorithmus danach ausrichten.
„SEO: Websites mit Responsive Webdesign werden höher gerankt.“
Im Umkehrschluss bedeutet es, das „alte“ Homepages schwerer zu finden sind. Hierbei handelt es sich nicht nur um leere Worte, sondern um eine konkrete Bewertung. Das letzte Google-Update erhöht den Druck auf Unternehmer: Mit der Bewertung „mobile-friendly“ erhalten responsive Websites einen Ranking-Bonus. In Zukunft müssen Sie sich daran messen, ob Ihr Onlineshop über alle Endgeräte erreichbar ist.
5. Design: Identische Inhalte aller Endgeräte
Lange ist es her: Datentarife genügten nicht, um eine Homepage in voller Größe anzuzeigen. So wurden Bilder oder Inhalte weggelassen. Zudem existierten kaum Smartphones mit hoher Bildschirmauflösung. Seitdem hat sich viel in der Webentwicklung getan.
Inzwischen steht mobilen Geräten ein vollwertiger Internetbrowser zur Verfügung und die Preisfrage hat sich erledigt. Neben kostenlosen WLAN-Netzen in Großstädten sind die Datentarife deutlich günstiger geworden. Und daheim ermöglicht ein Router das Abrufen beliebiger Datenmengen.
6. Conversion-Rate steigern
Je höher die Anzahl an optimierten Geräten, desto größer der Kundenstamm. Stellen Sie sich vor, 100 User interessieren sich für ein Produkt auf Ihrer Website – die aber nur für Desktop-PCs optimiert ist.
„Es ist realistisch, dass 50 % der Besucher mobile Endgeräte nutzen.“
Somit lassen Sie sich jeden zweiten Kunden entgehen. Mit Responsive Webdesign können Sie jegliche Bildschirmauflösung abdecken. Viele Onlineshops klagen über hohe Absprungraten, also die Anzahl der User, die den Shop sofort wieder verlässt. Durch responsives Design erreichen Sie alle Kunden und erhöhen die Conversion-Rate (Abschlussrate).
Was ist Mobile First?
Immer mehr Menschen nutzen Smartphones und Tablets, was zu einer Sinnfrage führt: Ist es nicht schlauer, eine Website zuerst für solche Endgeräte zu optimieren?
Die hohe Bildschirmauflösung des Desktop-Computers erlaubt es, viele Elemente auf einer Homepage unterzubringen. Negative Folge: Sie wirkt schnell überfüllt und strotzt vor Informationen – die niemand benötigt. Darum macht es Sinn, eine Website zu entschlacken und auf unnötige Bausteine zu verzichten. Wie geht man am besten vor?
„Bei Mobile First arbeiten Sie sich von der kleinsten Layout-Version zur größten vor.“
Bei diesem Konzept nutzen Sie den vermeintlichen Nachteil kleiner Bildschirme. So können Sie immer mehr Elemente integrieren, was einfacher ist, als wichtige Bausteine wegzulassen. Nicht zu vernachlässigen ist das limitierte Datenvolumen mancher Nutzer sowie deren verfügbare Bandbreite. Ein Besuch sollte nicht das komplette Internet-Volumen Ihrer Kunden kosten. Verzichten Sie auf unwesentliche Informationen und Bedienelemente und entscheiden Sie sich für ein optisch angenehmes Design.
Wie wird Responsive Webdesign umgesetzt?
Mit Responsive Webdesign profitieren Sie von Mobile First und das sogar vollautomatisch. So können Sie mit einem einspaltigen Layout für Smartphones beginnen und das Design immer komplexer gestalten – oder die Gestaltung einem Webdesigner überlassen. Hier ist es nur wichtig, eine gewisse Grundstruktur beizubehalten. Schließlich sollte man Ihre Website auf jedem Gerät wiedererkennen.
Für die Umsetzung machen Sie von den sogenannten Media Queries (Medienabfragen) Gebrauch. Hierbei handelt es sich um eine Liste an Kriterien, die von einem Ausgabemedium erfüllt werden müssen – also der Medientyp (Drucker oder Computer) und das Medienmerkmal (Farbe, Größe, usw.). Wenn Sie eine Website mit einem Smartphone aufrufen, sorgen die Media Queries dafür, dass das Layout entsprechend angepasst wird. Für die Erstellung verwendet der Webdesigner CSS3 (Cascading Style Sheet). Bei der Webentwicklung wird jeweils eine CSS Datei pro Endgerät angefertigt. Dadurch erhalten Sie für Desktop-PC, Smartphone und Tablet insgesamt drei CSS Dateien.
Was sollten Sie beachten?
Als Unternehmen möchte man mit seiner Website Geld verdienen. Wer sich einfach nur präsentieren möchte, sollte sich ebenfalls an diese Tipps halten, denn …
„… am Ende zählt die Anzahl der zufriedenen Kunden.“
Und wann ist der Kunde zufrieden? Wenn er eine Homepage mit hoher Zugänglichkeit und Bedienbarkeit vorfindet. Der englische Fachausdruck nennt sich „Usability“ und sollte für Sie an erster Stelle stehen. Dieser Begriff ist an folgende Bedingungen geknüpft:
- Content
- Ladezeit
- Navigation
Diese drei Punkte sind die häufigsten Fehlerquellen im Responsive Webdesign. Bei der Webentwicklung sollten Sie darauf achten, dass alle Texte korrekt dargestellt werden. Gerade Bilder erhöhen unnötig die Ladezeiten. Denken Sie darüber nach, ob und wie Sie Werbung in der mobilen Version anzeigen möchten. Je schlanker Sie den Content (Inhalt) gestalten, desto schneller lädt Ihre Website – was Google besser rankt. Auch eine lange Verweildauer macht sich positiv bemerkbar. Responsive Webdesign hilft Ihnen dabei, indem die Website immer korrekt angezeigt wird.
Testen Sie die Navigation auf allen Geräten. Bei kleinen Endgeräten wird sie zu groß dargestellt und raubt dem eigentlichen Inhalt den Platz. Machen Sie die Navigationspunkte kleiner oder lassen Sie diese ganz weg. Jeder Button sollte mindestens 1cm x 1cm aufweisen, damit er mit dem Finger bedienbar ist.
Fazit: Responsive Webdesign ist Pflicht. Schon lange gelten mobile Geräte nicht mehr als Trend, sondern erobern einen immer höheren Marktanteil. Alleine die Anzahl an Tablets erhöht sich jährlich um etwa 5 bis 10 Prozent.
„Seit 2014 gehen mehr User mit mobilen Geräten ins Internet als über klassischen Desktop-Computer.“
Im E-Commerce können Sie sich einen echten Vorteil gegenüber Ihrer Konkurrenz sichern. Steigen Sie auf Responsive Webdesign um und gewinnen Sie zusätzliche Kunden.
