Ist Ihre Website mobile-friendly?

21.05.2015

Mobile-friendly ist das Schlagwort, an dem es schon seit einiger Zeit kein Vorbei mehr gibt. Und spätestens seit Google verkündet hat, dass dies nun auch das Ranking in den Suchergebnissen beeinflusst, hat das Thema an Brisanz noch weiter zugenommen. Doch was genau steckt hinter diesem Ausdruck? Genau das möchten wir im Folgenden erläutern. Dabei erklären wir ein paar grundlegende Begrifflichkeiten und versuchen Ihnen dabei diese Thematik etwas verständlicher zu machen.

Bei dem Begriff mobile-friendly geht es schlichtweg darum, eine Website so darzustellen, dass diese auch mit Mobile Devices (also Tablets und Smartphones) optimal nutzbar ist. Dies bedeutet einerseits, dass Elemente gross genug dargestellt werden, sodass diese gut erkennbar sind und gleichzeitig auch, dass die Navigation über einen Touchscreen möglich ist. Das offensichtliche Problem liegt darin, dass mobile Endgeräte üblicherweise über deutlich kleinere Bildschirme verfügen, als jeder normale Computerbildschirm. Und dennoch muss der Inhalt der Website gut lesbar darauf abgebildet werden. Um dies zu bewerkstelligen gibt es diverse Herangehensweisen.

Separate mobile Website

Mit dem Aufkommen der ersten internetfähigen Handys wurde es üblich, eine zweite Version von Websites bereitzustellen, die extra auf die Grössenverhältnisse dieser Geräte angepasst war. Diese wurde oft unter einer Subdomain wie m.beispiel-domain.ch verfügbar gemacht (das m. ersetzt dabei das www. und macht die Subdomain aus). Die Mobile- und die Desktopversion der Website sind tatsächlich voneinander getrennte Installationen. Somit mussten Änderungen immer für beide Versionen vollzogen werden. Ein nächster Schritt dieser Lösung ist es, innnerhalb eines Content Management Systems (CMS) wie zum Beispiel TYPO3, beide Versionen in einer Installation unterzubringen. Die mobile Version referenziert dabei die Inhalte der Desktopversion, nutzt aber andere Templates und Stylesheets (siehe nächsten Abschnitt) um dem kleineren Bildschirm gerecht zu werden. Dabei können Inhalte teilweise auch einfach ausgelassen werden, um Platz zu sparen. Beispielsweise wäre es möglich, auf unserer Startseite den Bilderslider nicht auf mobilen Geräten anzuzeigen, falls dieser keine essenziellen Informationen enthält.

 

Stylesheets für mobile Devices

Eine andere Lösung ist es, für eine Website spezielle CSS-Styles für Mobile Devices zu definieren. CSS steht dabei für Cascading Style Sheet und hier werden üblicherweise alle Designelemente wie Grössen, Farben, Hintergründe, Rahmen, Schattierungen u.v.m. definiert. Tatsächlich würden die meisten Websites ohne CSS und JavaScript (JS) eher wie ein übliches Office-Dokument aussehen. Zur Veranschaulichung - so in etwa würde unsere Website ohne CSS aussehen:

Website ohne CSS und JS

Mit CSS ist es heutzutage sehr einfach möglich abzufragen, auf welchem Format der Browser die gerade aufgerufene Website darstellen soll. Sogenannte Media Queries können dabei beispielsweise eine bestimmte Maximalbreite festlegen, bis zu welcher die folgenden Styles genutzt werden sollen. Abhängig vom Browser kann man nun also unterschiedliche Styles definieren, und somit lässt sich die Website für Mobilgeräte anpassen.

Eines für alle - Responsive Design

Mit der Zeit drängten aber immer mehr Smartphone-Anbieter und später auch weitere mobile Geräte wie Tablets auf den Markt - alle mit unterschiedlich grossen Bildschirmen und anderer Pixeldichte. Um diese Vielfalt an unterschiedlichen Anforderungen abzudecken, hat sich eine ganz andere Herangehensweise eingebürgert. Basierend auf den Beschaffenheiten des Endgerätes (Media Queries), können Grössen für alle Elemente der Website dynamisch angepasst werden und somit immer die maximal verfügbare Fläche ausgenutzt werden. Dieser Ansatz läuft unter dem Schlagwort Responsive Design, da das Design auf das jeweilige Endgerät reagiert und dynamisch adaptiert wird.

CSS-Frameworks und Gridsysteme

Auch hier wurden mit der Zeit immer mehr Systeme entwickelt, die uns die Arbeit erleichtern. Mit Hilfe von CSS Frameworks wie Bootstrap, Gumby, Foundation und vielen mehr, lassen sich nun im HTML Markup einfache Klassen vergeben, die in CSS und JS erkannt werden. Diese sorgen dann dafür, dass sich die benannten Elemente der jeweiligen Bildschrimgrösse anpassen. Dabei wird üblicherweise mit einem Grid gearbeitet, welches den Contentbereich der Website in 12 Spalten aufteilt.

Das Grid auf einer Kundenwebsite

Auf einem grossen Bildschirm können mehrere Elemente nebeneinander dargestellt werden und trotzdem gut lesbar bleiben. Beispielsweise könnten drei Blöcke jeweils vier der 12 Spalten des Grid einnehmen. Über spezielle CSS-Klassen lässt sich nun festlegen, dass dieselben Elemente auf einem Tablet jeweils sechs Spalten einnehmen (also grösser werden) und auf einem Smartphone die gesamte Breite von 12 Spalten überspannen. Dadurch rutschen die Blöcke untereinander, bleiben aber immer gut lesbar. 

Zur Veranschaulichung sehen Sie unsere Startseite einmal in der Desktop-Version und wie Sie auf mobilen Geräten dargestellt wird:

Startseite auf Desktop

Startseite auf Mobile

Meine Website ist nicht mobile-friendly - was nun?

Natürlich sind bei weitem nicht alle Websites im Netz für Mobile Devices optimiert. Google selbst bietet eigens einen Test an, mit welchem Sie Ihre Website analysieren lassen können. Die dort gefundenen Probleme wirken sich, wie bereits beschrieben, seit neuestem auch direkt auf die Auffindbarkeit der Website über Google aus. Das bedeutet, dass alte Websites unter diesen Kriterien neu beurteilt und eventuell angepasst werden müssen, um im Ranking nicht abzusteigen. Gleichzeitig bietet dies die Chance sich von der Konkurrenz abzusetzen, da viele die neuen Standards erst nach und nach oder gar nicht umsetzen werden. Wer jetzt handelt, kann zumindest einen zeitweisen Vorsprung gewinnen.

Es ist natürlich möglich, eine bestehende Website aufzurüsten und mobile-friendly zu gestalten. Ein Framework muss mittels CSS und JS eingebunden werden und die Templates müssen angepasst werden, um die richtigen Klassen zu vergeben. Letzteres bedeutet aber immer einen relativ hohen Aufwand, da das HTML Markup der kompletten Website überarbeitet werden muss. Dennoch kann sich der Aufwand lohnen, wenn für ein Unternehmen das Suchmaschinen-Ranking eine grosse Rolle spielt. Je nach dem, wie aktuell das Design der Website ist, könnte es aber mehr Sinn ergeben, direkt einen kompletten Relaunch in Angriff zu nehmen und die Site von Grund auf zu modernisieren. Welche Lösung im Einzelfall die sinvollere ist, hängt immer von vielen Faktoren ab. Wie alt ist die Website, wie aktuell ist die Software (also das CMS inklusive aller Plugins), ist das Design grundsätzlich noch zeitgemäss etc. 

Sollten Sie sich dafür entscheiden, Ihre Website mobile-ready zu machen, sind wir gerne für Sie da. Gemeinsam können wir erörtern, welche Lösung für Ihre Site die beste ist und dabei Vor- und Nachteile einzeln durchsprechen. 


Referenzen

Aufgrund unserer über 16-jährigen Erfahrung auf dem Gebiet der Webentwicklung, können wir auf eine lange und vielseitige Liste von Referenzen verweisen. Machen Sie sich selbst ein Bild von unserer Bandbreite, und stöbern Sie etwas herum. Wir sind sicher, wir können Sie überzeugen! Unsere Referenzen »

Kontakt

+41 61 261 16 46

info@k-webs.ch