Responsive Design – ein Begriff über den man in letzter Zeit häufig stolpert. Kaum jemand ausserhalb professioneller Agenturen kann etwas mit dieser Bezeichnung anfangen. Aus diesem Grund haben wir uns ausführlich mit dem Begriff des Responsive Designs und den Auswirkungen auf die Suchmaschinenoptimierung auseinander gesetzt:
Responsive Webdesign, was ist das eigentlich?
Heute gibt viele verschiedene Geräte, mit denen man eine Interseite betrachten kann. Angefangen bei einem HD-Fernsehgerät über den gängigen Desktop-PC bis hin zu handlichen Smartphones sind alle denkbaren Gerätegrößen vertreten. Diese technische Vielfalt der Anzeigegeräte stellt ganz neue Herausforderungen an eine Website, wenn diese auf allen Geräten optimal genutzt werden soll. Die früher genutzten statischen Layouts mit einer festen Breite sind i.d.R. auf den Monitor eines Desktop-PCs zugeschnitten und bieten auf größeren oder kleineren Geräten kaum eine benutzerfreundliche Anzeige. Gerade bei kleineren Geräten lassen sich verkleinerte Buttons oder Menüführungen einer Website selten wie gewünscht bedienen.
Die ursprüngliche Herangehensweise war die Erstellung von einer eigenen Website für jedes Gerät mit jeweils angepasstem Layout und einer vorgeschalteten Browserweiche zur Erkennung der Geräte und entsprechender Weiterleitung auf die korrekte Website. Diese Lösung ist eher suboptimal, da für vier Geräte dann auch vier separate Websites erstellt und betreut werden müssen.
Eine zukunftsweisende Lösung bietet das Responsive Design: Hier bieten ein flexibles Raster und flexible Inhalte auf beliebigen Endgeräten stets das beste Nutzererlebnis, indem es auf den Nutzer und seine Anforderungen reagiert. Anstelle von festen Rastern werden die Größenangaben über eine Prozentangabe flexibel gestaltet, so dass ein bestimmter Bereich einer Website z.B. immer 30% der zur Verfügung stehenden Bildfläche einnimmt; egal wie breit oder schmal das Anzeigegerät ist. Die Größen der Elemente passen sich also dem jeweiligen Gerät an, während die Größenverhältnisse der einzelnen Elemente zueinander dabei gleich bleiben. Auch Schriftgrößen und Bilder werden flexibel dargestellt.
Über Media Queries können zusätzlich einige Eigenschaften des Gerätes wie beispielsweise die maximale Anzeigebreite oder dessen Ausrichtung ausgelesen und das Layout noch weiter angepasst werden. Z.B. ist dadurch eine Verschiebung zu breiter Elemente möglich, so dass sie auf schmaleren Displays untereinander angezeigt werden. So kann eine einzige Website auch auf mobilen Endgeräten unterschiedliche Layouts anzeigen, je nachdem ob sich das Gerät in Portrait- oder in Landschafts-Orientierung (Hoch- oder Quer-Format) befindet. Zusätzlich können nicht relevante Elemente sogar ganz aus der Anzeige entfernt werden.
Responsive Design macht die Erstellung unterschiedlicher Websites für unterschiedliche Geräte unnötig: Es wird nur noch eine Website erstellt, die ohne Browserweiche und Weiterleitung anhand ausgelesener Geräteeigenschaften entscheidet, in welcher Breite sie angezeigt wird.
Und die Auswirkungen auf SEO?
Die Erstellung verschiedener Websites für unterschiedliche Anzeigeräte erforderte ggfs. auch das Anlegen von einer Subdomain pro Website und/oder eine User-agent-spezifische Weiterleitung, damit ein Suchroboter auch die jeweils zu seinem Anzeigegerät korrespondierende Website indizieren konnte und die Erkennung von double content verhindert wurde. Auch sollte jede Website eine eigene Verlinkung im Internet aufweisen.
Die aus verschiedenen Websites und Weiterleitungen resultierende Mehrarbeit für den Webserver verringert dabei gleichzeitig die Ladegeschwindigkeit der Websites.
Responsive Design wirkt dem entgegen. Die Serverlast wird durch den Wegfall der Weiterleitungen und der nun überflüssigen alternativen Websites verringert.
Ist eine Verlinkung im Internet für Mobile Websites überhaupt relevant?
Wenn Websites ihre Betrachter auf Mobile Websites weiterleiten sollen und Mobile Websites selten oder nie in den vorderen Suchpositionen auftauchen, sind Links für Mobile Websites dann überhaupt relevant? Aber ja doch! Es geht in diesem speziellen Fall nicht darum, möglichst viele Links für die Mobile Website zu bekommen. Viel mehr könnten Betrachter der Mobile Website diese verlinken oder teilen, wodurch der Hauptseite potenzielle Links und Teilungen gestohlen werden.
Beispiel: Eine Haupt-Website mit 4 Alternativ-Websites für unterschiedliche Anzeigegeräte weist 20 Verlinkungen auf, auf die Alternativ-Websites wurden von Benutzern jeweils 5 Verlinkungen gesetzt. In dem Fall verteilt sich zusätzliche Linkkraft auf 4 Websites, die genauso gut der Haupt-Website zu Gute kommen könnte. Bei der Nutzung von Responsive Design entfallen die 4 Alternativ-Websites, so dass deren Verlinkungen auf die Haupt-Website gesetzt werden. Die Hauptseite hätte 40 somit Verlinkungen, statt der vormals 20.
Mit Responsive Webdesign existiert nur eine URL für eine Website, von Betrachtern gesetzte Links oder Teilungen in Sozialen Netzwerken gelten somit für nur eine Website und verteilen sich nicht auf verschiedene Webpräsenzen.
Responsive Design ist eine zukunftsweisende Art, Webseiten mit verringertem Aufwand für eine Vielzahl von Betrachtungsgeräten zur Verfügung zu stellen, ohne das die Benutzerfreundlichkeit darunter leidet.