17 Sep

Responsive Webdesign vs. Mobile Webdesign

  • Patrick Niehsen
  • mobile Webdesign, responsive Webdesign, Suchmaschine, Suchmaschinenoptimierung
Responsive Webdesign vs. Mobile Webdesign

Die Vorteile von Responsive Webdesign gegenüber Mobile Webdesign

Das Internet ist inzwischen einer der wichtigsten Absatz- und Marketing-Kanäle. Aber nicht nur das Netz hat sich rasant weiterentwickelt, sondern auch andere technische Bereiche und damit das Surfverhalten der User. Insbesondere die ungebrochene Popularität von Smartphones und Tablet-PCs in Verbindung mit schnellen und günstigen Mobilfunkverbindungen hat einen völlig neuen Trend eingeläutet – das mobile Internet.

Zuvor diskutierten Seitenbetreiber und SEO-Agenturen noch darüber, ob eine Website eine statische Breite zwischen 900 und 1.200 Pixel oder eine entsprechende dynamische Mindestbreite haben sollte, weil die quadratischen Röhrenbildschirme langsam von den rechteckigen Flachbildschirmen abgelöst wurden. Heute ist ein völlig neues Problem hinzugekommen: die kleinen Displays von Smartphones und Tablets. Eine Zeit lang hieß die Lösung, extra spezielle Domains dafür anzulegen, aber mittlerweile steht eine völlig neue Richtung fest: Responsive Webdesign.

Wir leben in einer Zeit der rasanten Veränderungen – gerade in Bezug auf das Internet

Bei vielen Seitenbetreibern und Unternehmen wächst das Bewusstsein immer noch sehr langsam, dass Smartphones und Tablet-PCs die Marketing-Situation völlig verändern. Hinzukommt eine technische Überarbeitung des Suchmaschinen-Algorithmus von Google zugunsten der Qualitätssteigerung, wie es sie seit den Anfängen des Suchmaschinenriesen nicht gegeben hatte, doch dazu später mehr. Das grundsätzlich größte Problem für Webdesigner kam zunächst mit den kleinen Displays der Tablets und Smartphones.

Schon seit 2012 nutzen rund 50 Prozent der Internetnutzer kleine mobile Endgeräte

Vielleicht bist Du mit Deinem mobilen Endgerät ebenfalls schon auf unterschiedlichen Websites gewesen. Dann ist Dir sicherlich aufgefallen, dass Du entweder eine viel zu große Seite angezeigt bekommst, bei der Du erheblich scrollen musst – auch seitlich. Oder Du hast bemerkt, dass Du zu einer anderen Domain weitergeleitest wurdest – in der Regel auf eine mobi-Domain, also als Toplevel statt beispielsweise „.de“ nun „.mobi“ oder einer Subdomain m.deinedomain.de.

Bei herkömmlichen Websites muss dabei nicht nur wegen der Texte sehr viel gescrollt werden. Weiterhin sind oft verwendete Grafiken viel zu groß für die kleinen Monitore. Viele User klicken dann sehr schnell von einer solchen Website weg. Wenn Deine Seite noch so aufgebaut ist, schadet Dir das in doppelter Hinsicht: Zum einen verlierst Du potenzielle Kunden, die von Deinem Angebot erst gar nicht Gebrauch machen, und zum anderen kann es sich negativ auf Deinen Pagerank auswirken.

Der Anteil am mobilen Internet-Traffic lag bereits 2012 bei rund 50 Prozent. Das ist jede zweite Anfrage!

Doch eine herkömmliche Seite verliert mehr als nur die Besucher, die wegklicken. Google hat in den letzten beiden Jahren spektakuläre Updates seines Algorithmus ausgerollt: Panda, Penguin und eben erst Penguin 2.0. Nun steht die Qualität im Vordergrund und für Spammer ist es zum Glück schwieriger geworden, einen guten Google-Pagerank zu erreichen. Oft hört man in diesem Zusammenhang davon, dass hochwertige und aktuelle Texte auf der eigenen Website wichtig sind, und ebenso, dass Backlinks schädlich sein können.

Doch ein anderer wichtiger Ranking-Faktor wird oft übersehen: die Bounce-Quote. Hinter diesem Begriff verbergen sich die Absprungzahlen. Die Aufenthaltsdauer von Besuchern auf Websites wird dabei gemessen und fließt in die Berechnung der Suchmaschinenpositionierung ein. Google geht davon aus, dass eine Website minderwertig sein muss, wenn sie viele Besucher sehr schnell wieder verlassen. Genau dieser Effekt stellt sich aber ein, wenn eine Internetpräsenz ausschließlich auf herkömmliche Desktop-Monitore ausgerichtet ist. 

Daher kam die Idee für mobiles Webdesign. Dazu wird der gesamte Seiteninhalt so überarbeitet, dass er auf den kleineren Displays von Smartphones und Tablets gut lesbar wird. Außerdem werden die Bedienelemente oft größer gestaltet, da sie ja nun nicht mit der Maus sondern über den Touchscreen bedient werden.

Allerdings hat Webdesign, das ausschließlich auf mobiles Internet ausgelegt ist, auch Nachteile

Auch hier ist es wieder die Unternehmenspolitik von Google, die einem schnell einen Strich durch die Rechnung machen kann. Es gibt insgesamt weit über 100 Faktoren, die die Position einer Website in den SERPS (Position in den Suchergebnissen) beeinflussen. Ein enorm wichtiger Faktor ist der sogenannte Double Content. Dieser doppelte Inhalt verschlechtert das Ranking der Website – genau der wird zumeist mit einer zusätzlichen mobi-Domain erstellt, da dieselben Inhalte ja auch auf der eigentlichen Domain liegen.

Für eine der beiden Domains kann das bedeuten, dass sie bei Google nie gut positioniert sein wird und schlimmstenfalls stürzen sogar beide Domains ab. Einfach ignorieren lässt sich Google aber mit circa 80 bis 90 Prozent Marktanteil (abhängig, ob im deutsch- oder englischsprachigen Internetraum betrachtet) keinesfalls. Verwendest Du darüber hinaus einen Redirect zur mobi-Domain, der auf Javascript basiert, erhalten rund 20 Prozent aller mobilen Endgeräte die Weiterleitung nicht, da Script-Blocker verwendet werden.

Eine innovative Lösung für jeden Internet-Nutzer: Responsive Webdesign

Für die Lösung sämtlicher Probleme, die durch mobiles Webdesign aufgeworfen werden, gibt es mit dem neuen HTML-Standard HTML5 in Verbindung mit CSS3 einen Ansatz, der sich seit 2012 langsam herumspricht: das Responsive Webdesign bzw. reaktionsfähiges Design. Darunter versteht man ein Webdesign, das sich individuell an das gerade verwendete Endgerät des Nutzers anpasst. Mit HTML5 sind nun Media Queries möglich, also Anfragen vom Browser zum Endgerät des Benutzers.

Über diese Media Queries übermittelt das Endgerät seine Größe, Auflösung, Orientierung (horizontal oder vertikal) und Funktionsweise (Touchscreen oder Maus) an den Browser. Auf dem Cascade Stylesheet (CSS) werden nun im Prinzip verschiedene CSS-Stylesheets vereint, also Teilbereiche wie beispielsweise CSS-A, CSS-B, CSS-C usw. Je nach den empfangenen Informationen des Seitenaufrufers wird der entsprechende CSS-Teilbereich aufgerufen und dessen Formatierungsvorgaben laden im Browser des Endgeräts.

Diese Teilebereiche können nun unterschiedlich gestaltet werden, zum Beispiel für Smartphones bis 5 Zoll einspaltig, für Tablets bis 10 Zoll zweispaltig, für Netbooks bis 15 Zoll dreispaltig etc. Bei den Stylesheets für Tablets und Smartphones werden dann zusätzlich Orientierung und Touchscreen-Bedienung berücksichtigt. Grafiken können bis 5 Zoll Thumbnail-Charakter aufweisen und für Geräte ab 15 Zoll hochauflösend und entsprechend groß gestaltet werden – so bekommt jeder Nutzer ein für sein benutztes Endgerät optimal erstelltes Webdesign zu sehen. Innerhalb der Grenzen wird die Breite dann auch nicht statisch, sondern dynamisch definiert.

Natürlich bedeutet das einen deutlichen Mehraufwand bei der Entwicklung einer Website, doch die Vorteile wiegen diese zusätzliche Zeit schnell auf:

  • Vermeidung von Double Content
  • Keine überdurchschnittliche Absprungrate mehr
  • Durch die beiden vorgenannten Punkte mehr Kunden und ein besseres Suchmaschinen-Ranking
  • Es muss keine zweite (mobi-)Domain oder Subdomain angelegt werden.

Du bietest mit Responsive Design allen Deinen Seitenbesuchern eine bestmöglich optimierte Website, bei der das Lesen, Informieren, Kommunizieren oder Bestellen Spaß bereitet. Wird Deine Seite nun auch noch perfekt in soziale Netzwerke eingebunden, kannst Du sicher sein „Likes“ zu bekommen, denn die sind ebenfalls ausgesprochen wichtig – sowohl für die direkte Kommunikation mit Deinen Seitenbesuchern als auch für das Ranking bei Google, das auch diese Faktoren berücksichtigt.

Mit viel Erfahrung, technischem Wissen und Fingerspitzengefühl klappt das Webdesign

Natürlich bedeutet die Gestaltung einer Website entsprechend der individuellen Nutzer-Bedürfnisse sehr viel Arbeit, zumal inzwischen die Programmiervoraussetzungen für die perfekte Internetpräsenz sehr hoch sind. Hinzukommt, dass sich die SEO-Techniken in Bezug auf Suchmaschinenoptimierung, Suchmaschinenmarketing wie AdWords sowie Social Media Marketing ständig weiterentwickeln. 

Somit ist neben einem großen Erfahrungsschatz auch ein enormer Zeitaufwand notwendig, um stets auf dem Stand der Zeit zu sein und dann die richtigen Marketing- und Kampagnen-Entscheidungen zu treffen. Die Wahl einer guten SEO-Agentur ist dabei ein logischer Schritt, durch den Du langfristig viel Geld sparen kannst, weil Du nicht selbst „herumdoktern“ und versuchen musst, sondern Dich auf Dein eigenes Kerngeschäft konzentrieren kannst. So stellt der Erfolg Deiner Website sich durch die Erfahrungswerte und das technische Know-how der Agentur wesentlich schneller ein.

Ähnliche Artikel anschauen

1. Was ist Responsive Webdesign?
2. Responsive Webdesign und Suchmaschinenoptimierung

zurück zur Blogübersicht