Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Ratgeber

Deine Website soll „mobile friendly“ sein? Dann aber bitte richtig!

(Screenshot: developer.google.com)

Wer über mobile friendly redet, denkt zuerst an responsive Webdesign. Der Nutzer soll auf allen Geräten und Kanälen ein optimales Ergebnis bekommen. Auf der Developer Week, im Panel von Thomas Kaiser, haben wir uns inspirieren lassen.

Das Nutzerverhalten hat sich in den letzten Jahren extrem geändert. Egal, ob E-Mail schreiben oder Lebensmittel bestellen – wir agieren immer häufiger über unser Smartphone. Leider gibt es aber immer noch vereinzelte Websites, die nicht mobile friendly sind und es den Kunden oft unnötig schwer machen. 61 Prozent von ihnen brechen den Prozess ab, weil sie vom Aufbau der Seite frustriert sind. Doch das liegt nicht zwingend an der kompletten Website: „50 Prozent aller Nutzer scrollen nicht!“, sagt Thomas, „nicht weil es nicht funktioniert, sondern weil der Nutzer nicht will“. Trotz allem ist es unsere Aufgabe, dem Besucher das best mögliche UI und die best mögliche UX  zu bieten.

Ob deine Website mobile friendly ist, kannst du mit dem „Test my Site“-Tool von Google überprüfen.

Mobile friendly: Aber wie?

Mobile friendly ist kein Synonym zum Begriff responsive Webdesign. Eine Website die mobile friendly sein soll, kann auf drei Wegen erzeugt werden:

(Screenshot: Google)
Google selbst empfiehlt eine komplett responsive Website. (Screenshot: Google)

1. Full responsive

Eine Website, die komplett responsive ist, besitzt nur einen Quellcode. Der Quellcode stellt also unabhängig vom Endgerät – Desktop, Tablet, Mobilgerät – den selben HTML-Code bereit. Der Inhalt kann aber je nach Auflösung des Geräts variiert werden, zum Beispiel mit Hilfe von media queries, die im übrigen von Google empfohlen werden.

2. Dynamische Bereitstellung

Je nach Gerät oder Auflösung wird ein eigener Quellcode dynamisch bereitgestellt, die URL bleibt allerdings gleich. Für Suchmaschinen ist dieses Verfahren am schwierigsten zu erfassen, weil es zu einer Seite theoretisch sehr viele Varianten geben kann.

3. Unterschiedliche URLs

Für jede Seite gibt es eine oder mehrere Versionen, die für unterschiedliche Geräte angepasst sind. Die Geräte werden an Alternative Links weitergeleitet. Hier wird also versucht, das Endgerät zu erkennen und anschließend mit Hilfe von HTTP- Weiterleitungen zur passenden Seite zu leiten.

Fazit

Warum Google sehr deutlich zu einem responsive Design rät, ist aus mehreren Gründen nachvollziehbar. Webdesigner müssen dann pro Seite nur einen Quellcode entwickeln, Google muss wiederum nur einen Quellcode analysieren. Dennoch ist diese Form von mobile friendly nicht für jedes Unternehmen umsetzbar. Eine Menge an Content braucht auch ein gut ausgearbeitetes Konzept für die Umsetzung.

Und wie setzt du deine Projekte um? 

Bitte beachte unsere Community-Richtlinien

13 Reaktionen
Irrelephant

Heute den t3n Newsletter bekommen und hab mir gedacht, dass ich den auf dem Handy (win10) anschaue solange ich auf meinen Termin warte ... schrecklich wie schlecht der Newsletter dargestellt wurde. Vielleicht mal bei den Basics anfangen, ich musste auf alle Fälle dann doch zum Laptop greifen.

Thomas Kaiser

Hier gibt es die komplette Mobile Friendly Studie: http://www.cyberpromote.de/mobile/. Die 50% bzgl. scrollen sind keine aktuellen Zahlen und beziehen sich auf Desktop. Doch selbst wenn die Zahlen heute deutlich besser sind, ist es nach wie vor ein wichtiges Thema. Gesagt hatte ich allerdings, dass die Menschen nicht scrollen, weil sie es nicht können (ability) oder nicht wollen (volition). Oftmals wird dieser Aspekt übersehen. Grundsätzlich sollte man immer darauf achten, was ist Above the fold zu sehen. Vor allem die Call to Action sollte stets sichtbar sein. In den vielen Projekten die wir machen kann man immer wieder sehen, was man mit kleinen Maßnahmen erreichen kann. Auch wenn man die Conversionrate nur um ein paar Prozente verbessern kann, macht das langfristig gesehen viel aus.
In meinem Vortrag habe ich auch die Accelerated Mobile Pages erklärt. Garry Illyes hat gerade auf der SMX Advanced gesagt: AMP is going to be huge. Für Wordpress gibt es schon Plugins, für andere Systeme auch. Für Seiten ohne Formular sollte man prüfen, ob man diese in AMP umsetzen kann. Die Reduktion auf die Javascript Funktionalität in AMP ist natürlich ein Haken, aber es sieht so aus, also ob Google das forcieren wird.

esistsoweit

Den Teil bzgl dynamischer Bereitstellung HTML darf man aber kritisch gegenüber stehen. Klar, google gibt den Ton an, aber hier dreht sich das Konzept schnell im Kreis.
Wir machen viele Kunden Webseiten mittels CMS-Systeme und es halten sich nunmal hartnäckig Sachen wie Slider oder Videos im header - was aber niemand auf seinen Smartphone braucht / sehen will bzw überhaupt beachtet!

Für gewisse Teile einer solchen Webseite empfiehlt es sich unbedingt dynamisch auszugeben!

Mit so Sachen wie display:none; hat man dennoch die div und Script-Suppe die nicht mehr gebraucht wird im Quelltext, was wiederum auch seitens google kritisiert wird!
Man bekommt nicht mal annähernd < 1Sek Ladezeit hin - wenn einzelne Bereiche dynamsich generiert werden sind hier deutliche Verbesserung möglich- und da kann man jetz streiten wem mans lieber Recht machen will ... dem Besucher oder google?
Ab wann gilt eine Seite als Company -Seite die aufgrund der Menge an Content hier ausgenommen werden kann / oder muss?

Das beginnt doch schon ab da, ab wo man CMS-Systeme einsetzt und / oder Datenbankanfragen im Spiel sind. Die angepeilten Ladezeiten (lt google max 0.2s ) sind nach meiner Erfahrung nur mit statischen Seiten möglich.

Markus

Mit nem richtigen CMS geht das aber auch rein responsive, wenn man sich ein bisschen Mühe gibt. Stichworte zum Beispiel srcset und mediaqueries auch für Bilder in Slidern, Videos die automatisch laden und starten gehören eh verboten...

esistsoweit

Stimme zu 75% absolut überein! ;) *thumbsup

grep

Hallo 'Optimiert',

vielen Dank für ihre aufrichtige und offene Kritik; Google PageSpeed Insights meint meine Webseite ist top optimiert, ergo habe ich einen 100/100 Score - nur das zählt(e).

Ich danke ihnen für ihr Interesse an meinem Kommentar, meinen Seitenzugriffszahlen, meinem Projekt.

Ich wünsche ihnen noch viel Freude beim lästern und trollen - Danke.

Ciao, Sascha.

Ruslan

Jep, da ist sie wieder, die Pagespeed Erwähnung (die 8te?). Glückwunsch dazu. Muss höllisch schwierig sein, diesen ohne Javascript und Bildern zu erreichen.

grep

Hallo Ruslan,

neidisch ? - Schon interessant immer wieder zu lesen wie sehr Sie meine Beiträge beeindrucken.

Vielen Dank für ihre freundliche Erwähnung.

Ciao, Sascha.

Ruslan

Und wie hoch war der Datensatz vom Thomas, dass er diese Schlussfolgerung wählt?

Hier was Lesenwertes:
http://uxmyths.com/post/654047943/myth-people-dont-scroll

Ruslan

Huch, da kam mir jmd. mit dem selben Artikel zuvor.

grep

Hallo ...,

neue 'Einsichten' bedeuten neue 'Aussichten', denn ich wollte es lange Zeit nicht war haben doch es ist extrem wichtig seine Seiten auf mobile Geräte zu optimieren - ich hab's endlich getan (https://goo.gl/ljr0pM) ... und die Suchmaschinen platzieren mich nun sehr viel besser als zuvor.

Ciao, Sascha.

Optimiert...

... ist im Falle deiner Website ein wenig übertrieben. Semantisch nicht korrekt ausgezeichnet, Nutzerführung und Design eine Katastrophe, die Texthervorhebung auf mobilen Geräten kaum noch zu erkennen und das Farbschema... nennen wir es mal "Geschmackssache".

PS:
Hör auf, Werbung für deine Website jeden Tag hier als Kommentar zu tarnen. Klar, du brauchst Traffic, damit deine dubiosen Werbepartner mehr als nur ein paar Euro monatlich abwerfen, aber dann spiel doch noch ein wenig mit SEO herum und hör auf hier zu spammen.

50% scrollen nicht?

Das ist mal eine gewagte Behauptung, die aktuellen Studien widerspricht. Siehe z. B. uxmyths.com/post/654047943/myth-people-dont-scroll.

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst