Unsere Rufnummer: 08071 9044 573 | » Zum Kundenbereich |
  7media Videos bei YouTube 7media bei Twitter 7media auf Facebook 7media Blog RSS Feed abonnieren

Benötigen Sie eine mobile Website?

Und falls ja, welche?

Responsive Web Design (Wiki Commons Bild)

Google hatte ja angekündigt, ab 21. April 2015 in seinen Suchergebnissen Seiten zu bevorzugen, die "mobile friendly" dargestellt werden können. In der Aufregung wurde oft unterschlagen, dass dies nur für Suchen auf dem Mobilgerät - also Smartphone oder Mini-Tablets - gilt und nicht für die Suche auf Desktop oder Tablet.

Obwohl der Anteil der mobilen Nutzung beim Seitenaufruf noch unter 25% liegt (bei den meisten 7media-Kunden 10-15% -  in Europa laut Statista bei 23%) liegt, kann die Zielgruppe doch sehr interessant sein. Zum Beispiel Schüler, die einen Ausbildungsbetrieb suchen, Studenten und junge Facharbeiter auf Jobsuche, oder Menschen in der Nähe, die etwas suchen, was Sie lokal anbieten.

Die Zielgruppe und deren Nutzungsverhalten sollte den Ausschlag dafür geben, wenn Sie sich eine mobile Website erstellen lassen. Ob als "Mobile Website" oder per "Responsive Webdesign" (was der bessere Weg ist klären wir weiter unten).


Was heißt eigentlich "mobile friendly"?

Auf dem Smartphone werden Websites z.B. dann benutzerfreundlich dargestellt, wenn

  • die Schrift groß genug bleibt zum Lesen
  • große Bilder kleiner dargestellt werden, evtl. in anderer Anordnung zum Text
  • Links weit genug auseinander stehen, um sie mit dem Finger anzutippen
  • das Menu sich anpasst und navigierbar bleibt
  • die Ladezeit vertretbar ist
  • und man keinesfalls (!) "quer" scrollen muss

 

Was heißt das für die Umsetzung in der Praxis?

In der Praxis gibt es zwei Wege zur mobile-friendly Website:

  • die eigenständige "Mobile Website" und
  • die sog. "Responsive Website"

Die "Mobile Website" wird unabhängig von der Desktop- und Tablet-orientierten Website gepflegt und das Layout kann komplett auf die mobile Nutzung abgestimmt sein. Es gibt in diesem Fall also zwei Websites. Damit wird das Teilen auf Facebook 

Die "Responsive Website" verwendet eine Programmierung, die mit einem Inhalt auskommt und diesen auf verschiedenen Geräten unterschiedlich anzeigt. Ein Bild steht z.B. auf dem Desktop rechts vom Text, aber ordnet sich auf kleinen Bildschirmen darunter an. Hier gibt es also eine Website, die sich mit Hilfe von CSS und sogenannter "media queries" automatisch und selbständig an die jeweilige Display-Größe anpasst.

Mobile Website oder Responsive Webdesign - welcher Weg der bessere ist, lässt sich mit den Worten von Peer Wandinger von "Selbständig im Netz" umreissen: "Responsive Webdesign eignet sich vor allem bei eher einfachen Websites oder Blogs. Eine separate mobile Website ist dagegen oft besser bei komplexen Anwendungen und Inhalten geeignet, die sich nicht einfach automatisch für das kleine Display optimieren lassen." (Quelle: Selbständig im Netz). Das Magazin "Spiegel Online" verwendet z.B. eine "Mobile Website" unter der Adresse http://ml.spiegel.de/ für Zugriffe von Smartphones. Bei Zugriff vom Desktop findet eine Umleitung statt auf www.spiegel.de.


Wie hoch ist der Aufwand für eine Responsive Website?

Der Aufwand kann dann relativ gering ausfallen, wenn die Website auf die Verwendung von Tabellenstrukturen für das Layout verzichtet. Klassische Tabellenspalten können sich leider nicht "responsive" verhalten.

Wenn diese Bedingung gegeben ist, kann zum Beispiel im CMS-System (z.B. in MODX oder WordPress) das bestehende Template durch ein "responsive" Template ersetzt werden - für alle Seiten. Es muss dann nur redaktionell geklärt werden, in welcher Reihenfolge sich Inhalte auf dem Smartphone nacheinander "stapeln" oder ob bestimmte Inhalte auf dem Smartphone wegfallen sollen. Im Idealfall muss an den Inhalten selbst nichts geändert werden.

In der Praxis wird man manchmal Bilder oder Bildergalerien neu einbinden und auch Videos noch in "responsive" umprogrammieren.

Falls bei älteren Inhalten doch noch viele Seiten mit Tabellenstrukturen als Layoutraster arbeiten, müssen die Inhalte je Seite aus ihren "Zellen" herausgeholt und ohne Tabelle angeordnet werden. Dies kann den Aufwand natürlich erhöhen.


Responsive Relaunch

Bei älteren Websites bietet sich deshalb gleich ein Relaunch inklusive modernerem Design, inhaltlicher Überarbeitung und zugleich "responsive" in HTML5 und CSS3 an. Damit ist der Auftritt dann wieder für mehrere Jahre inhaltlich wie technisch up-to-date. Man kann beim Relaunch auch die Frage stellen, welche Inhalte ggf. wegfallen und welche verstärkt werden sollen. Da der Platz auf kleinen Smartphones trotz mobil-Optimierung geringer ist, lohnt sich die Überlegung, sich auf Wichtiges zu konzentrieren.

Im Ergebnis kommt eine inhaltlich aufgefrischte und technisch optimierte Seite den Besuchern auf allen Geräten zu Gute. Das lässt dann nicht zuletzt auch Google anhand des Besucherverhaltens auf Ihrer Seite erkennen, dass die Website ein gutes Ranking verdient.



  >> Ihre responsive Website unverbindlich anfragen


Videoanimation:
So verhält sich eine responsive Website in verschiedenen Geräten

Im Video sehen Sie die Website unseres Kunden Rolf Gengenbach Messtechnik. (Der zur Simulation und Animation der verschiedenen Viewport-Größen verwendete Viewport Resizer ist ein Browser-Plugin, erhältlich für Chrome, Firefox, Opera und Safari.)


Responsive Email-Newsletter sind Pflicht

Genau wie Ihre Website wird auch Ihr Newsletter häufig auf Smartphones gelesen werden.

Versenden Sie schon "responsive"? Wir unterstützen Sie gern!

 

Interesssante Links zum Thema mobile-friendly und responsive:

Google's Test auf Optimierung für Mobilgeräte

Anteil mobiler Endgeräte an allen Seitenaufrufen im Jahr 2015

Ein recht guter Responsive Relaunch Leitfaden

 



Quellennachweis: Bild "Responsive Web Design":
By Muhammad Rafizeldi (Google+) [CC BY-SA 3.0], via Wikimedia Commons

Autor: Heinz-Günter Weber - Google-Profil - Zuletzt bearbeitet am 30. Juni 2015






7media Webdesign-Blog Kommentare powered by Disqus

Die Kategorien im
7media Webdesign-Blog:

Links und Tipps
für 7media-Kunden:


... zum 7media Newsletter
Tipps & Know-how für Google, SEO & Co.

7media Newsletter

Laufend Infos zu Google
und Praxistipps für
erfolgreiche Homepages


Webhosting-Tipp:

Jetzt das eigene Projekt starten mit den webgo Webhosting Paketen

Heinz-Günter Weber
Profil bei Xing:

Heinz-Günter Weber
blogtotal.de - Netzwelt
contact

Spitzen-Websites: Auch für kleine und mittlere Unternehmen!
Gutes Webdesign beginnt im Kopf: Bei der Konzeption. Lassen Sie andere basteln - Profitieren Sie von unserem Know-how.