Mobiloptimierung von Webseiten wird immer wichtiger

Die Mobiloptimierung von Webseiten gewinnt für Unternehmen an Bedeutung, da der Anteil des mobilen Traffics weiter wächst. Laut einer Prognose der Digitalagentur Go-Globe soll der Anteil von Mobile am gesamten Internet-Traffic bis Ende 2018 auf 61,2 Prozent ansteigen. Mit Responsive Design („reagierendes Design“) lassen sich die Inhalte der Webseite an die verschiedenen Displaygrößen und Auflösungen der Smartphones und Tablets anpassen, ohne dass eine separate Mobilversion nötig ist. Das verringert den Arbeitsaufwand, da so nicht zwei unterschiedliche Versionen der Webseite gepflegt werden müssen. Die Desktop-Version kann in puncto Design zwar in großem Umfang von der Smartphone-Version abweichen, die Dateistruktur bleibt jedoch gleich, das HTML ist identisch.

Google hat mit Mobile First-Indexierung begonnen

Auch die mit Abstand wichtigste Suchmaschine Google hatte ihren Algorithmus schon im Jahr 2015 dahingehend geändert, dass responsive Webseiten besser gerankt werden als solche mit statischem Design. Nun hat Google zudem mit seiner Mobile-First-Indexierung begonnen. Damit nutzt das Unternehmen nicht mehr die Desktop-Version von Webseiten, sondern greift auf die mobile Darstellung zurück. Daher ist es für Webseitenbetreiber jetzt wichtiger als je zuvor, auch mobil alle wichtigen Inhalte anzubieten, die es auf der Desktop-Version gibt. Wer mit seinem Online-Auftritt also möglichst weit oben in den Suchergebnissen erscheinen möchte, sollte eine Mobiloptimierung seiner Webseite vornehmen.

Auch interessant: So bereiten Sie sich auf den Mobile-First-Index vor

Um dieses Ziel zu erreichen, ist die alleinige die Verwendung von Responsive Design ideal. Denn laut Google kann es zu Problemen führen, wenn beide oben beschriebenen Varianten parallel betrieben werden, es also zusätzlich zur responsiven Seite eine separate Mobilversion gibt. Die Suchmaschine weiß dann nicht immer, welche Version sie in den Ergebnissen anzeigen soll. 

Responsive Webseiten werden in den Suchergebnissen bei Google besser gerankt. Responsive Webseiten werden in den Suchergebnissen bei Google besser gerankt. (© 2018 Shutterstock / Jeramey Lende)

Umsetzung von Responsive Design

Homepage-Lösungen der Telekom

Die Telekom bietet Unternehmen verschiedene Pakete für die Gestaltung einer Webseite – passend zum eigenen Bedarf.

>> Zu den Homepage-Lösungen

Die Umsetzung von Responsive Design erfolgt durch die Nutzung der Programmiersprachen HTML5 und CSS3. Hier stehen Medienabfragen, sogenannte Media Queries, zur Verfügung. Durch diese können Endgeräte Informationen abfragen, die sie hinsichtlich der Mobiloptimierung benötigen. Das betrifft zum einen das Layout: Ein Beispiel ist das Querformat, das unter Umständen ins Hochformat transformiert werden muss. Auch die Eingabemethoden von Daten über eine Tastatur, eine Maus, die Finger oder Sprache müssen berücksichtigt werden. Inhalt und Layout einer Seite müssen strikt getrennt sein, damit das Responsive Design bestmöglich funktioniert. Ziel ist immer, dem Nutzer die Webseiteninhalte so übersichtlich und benutzerfreundlich wie möglich anzubieten, da der Platz auf den mobilen Endgeräten viel begrenzter ist als auf einem Desktop.

Auch interessant: Fünf Anzeichen, dass Ihre Webseite einen Relaunch benötigt

Tipps zur Gestaltung einer responsiven Webseite

Verzichten Sie bei der mobilen Navigation auf kleine Kästchen. Flächendeckende und eindeutige Schaltflächen sind für den User leichter zu bedienen. Generell sollten die Texte gut strukturiert, also mit vielen Absätzen versehen sein. Diese Mobiloptimierung erleichtert die Lesbarkeit. Aufwendige Grafiken und große Bilder sollten angepasst werden, um lange Ladezeiten zu vermeiden. Motivhintergründe stören bei kleines Displays nur. Inhalte, die bei wechselnden Auflösungen nicht mehr nebeneinander platziert werden können, sollten entsprechend dynamisch untereinander angeordnet werden können. Eine Reihe von Apps bieten eine gute Orientierungshilfe, wie ein mobil optimiertes Design aussehen könnte.

Die Anforderungen an das Layout sind auf Mobilgeräten anders als auf dem Desktop. Die Anforderungen an das Layout sind auf Mobilgeräten anders als auf dem Desktop. (© 2018 Shutterstock / ThatStockCompany)

Checkliste: Die wichtigsten Punkte zum Responsive Design

  • Beim Responsive Design wird eine Webseite je nach Bildschirmgröße und/oder Device anders dargestellt, um die Besucherfreundlichkeit zu gewährleisten.
  • Webseiten mit Responsive Design werden in den Suchergebnissen bei Google besser gerankt.
  • Eine separate Mobilversion zusätzlich zum responsiven Webdesign kann Google verwirren.
  • Die Umsetzung erfolgt durch die Nutzung der Programmiersprachen HTML5 und CSS3.
  • Bei der Mobiloptimierung sind eine passende Struktur und gute Lesbarkeit wichtig.