Mobile Web: Das sind die häu­figs­ten Fehler

„Mobile First“ heißt das Stichwort im modernen Webdesign. Immer häufiger nutzen User neben klas­si­schen Desktop-Rechnern ihre Smart­phones oder Tablets, um von unterwegs oder bequem von der Couch aus durch das mobile Web zu surfen. Dem­entspre­chend wichtig ist eine mobile Seite für den Erfolg Ihres Web­pro­jekts. Doch eine mobil-op­ti­mier­te Seite allein muss noch lange nicht gleich­be­deu­tend mit einer guten User-Ex­pe­ri­ence und einer ge­lun­ge­nen Such­ma­schi­nen­op­ti­mie­rung sein. Wir stellen häufige Fehler vor und erklären Ihnen, wie es besser geht.

Hier können Sie In­fo­gra­fik zum welt­wei­ten mobile-Traffic Verkehr her­un­ter­la­den.

In An­be­tracht der deut­li­chen Mehrheit mobiler In­ter­net­nut­zer wird schnell klar, dass der Trend zum mobilen Web von Ent­wick­lern kei­nes­falls ignoriert werden sollte – soweit die Her­aus­for­de­rung.

Die Chance besteht darin, neue Ziel­grup­pen an­zu­spre­chen und Besucher auch mobil an das eigene Web­an­ge­bot zu binden. Das Ziel muss daher lauten, die Usability zu ver­bes­sern und die Webseiten für die steigende Anzahl in­ter­net­fä­hi­ger Mobile-Devices zu op­ti­mie­ren. Der Mobile-First-Ansatz trägt diesem Trend Rechnung. Dem­entspre­chend wichtig sind mobile Seiten, re­spon­si­ve Designs und Apps – mehr zu den Un­ter­schie­den in unserem Artikel: "Re­spon­si­ve Webdesign, App oder mobile Website?". Zudem ist die Mobile-Op­ti­mie­rung ein wichtiger Ran­king­fak­tor bei Such­ma­schi­nen wie Google. Bei der Um­ge­stal­tung von Websites zwecks Mobile-Op­ti­mie­rung lauern jedoch viele Fallen und Feh­ler­quel­len, die man unbedingt meiden sollte.

Der erste und grund­le­gends­te Fehler kann schon bei der Wahl der Kon­fi­gu­ra­ti­ons­va­ri­an­te passieren. Denn es gibt meh­re­reMög­lich­kei­ten eine Website mo­bil­op­ti­miert zu gestalten: So bei­spiel­wei­se über ein Re­spon­si­ve Design, über eine separate mobile Website oder durch ein adaptives Layout. Eine der ele­gan­tes­ten Lösungen ist si­cher­lich das Re­spon­si­ve Design. Gegenüber separaten mobilen Seiten und adaptiven Layouts werden Websites mit re­spon­si­vem Design von Google im Ranking bevorzugt. Ein weiterer Vorteil: Sie legen den Fokus nicht auf einzelne Geräte oder Be­triebs­sys­te­me, sondern passen sich au­to­ma­tisch der Bild­schirm­grö­ße an. So pro­fi­tie­ren Web­sei­ten­be­trei­ber von einem ge­rin­ge­ren Pfle­ge­auf­wand und die Besucher Ihrer Website von einer gleich­blei­ben­den Usability.

Dem­entspre­chend steht an erster Stelle ein Blick auf Ihre Ziel­grup­pe und die Fragen: Welche Geräte und Bild­schirm­grö­ßen sind für Ihre Besucher und somit für Ihre Website relevant? Und: Mit welcher Dar­stel­lungs­va­ri­an­te können Sie diesen Besuchern das best­mög­li­che Erlebnis bieten? Wird von Beginn an die richtige Kon­fi­gu­ra­ti­ons­mög­lich­keit gewählt, kann man viele der später noch er­läu­ter­ten Fehler um­schif­fen.

Das gilt ins­be­son­de­re für die kom­ple­xe­re aber aus SEO- und Usability-Ge­sichts­punk­ten zu be­vor­zu­gen­de Variante eines re­spon­si­ven Designs: Denn eine spätere Um­stel­lung auf diese Variante ist in vielen Fällen sehr aufwendig und der Relaunch zudem sehr kos­ten­in­ten­siv. Darüber hinaus ist zu beachten, dass ein re­spon­si­ves Design nicht immer und nicht für jedes Projekt glei­cher­ma­ßen geeignet ist: Sehr komplexe Seiten, für die große Da­ten­men­gen geladen werden müssen, können bei­spiels­wei­se auf mobilen Geräten mit schlech­ter Ver­bin­dung und schwä­che­rer Hardware deutlich langsamer aus­ge­führt werden.

Das führt direkt zu der nächsten Feh­ler­quel­le: dem Graphical User Interface (GUI). Da die Bedienung auf mobilen End­ge­rä­ten in der Regel über Touch­screens abläuft, können schlechte GUI-Ent­schei­dun­gen zu einer er­heb­li­chen Be­ein­träch­ti­gung führen. Dazu gehören etwa eine zu kleine Schrift, ein nicht de­fi­nier­ter Dar­stel­lungs­be­reich, zu eng an­ge­ord­ne­te Links und Buttons oder eine schlechte Na­vi­ga­ti­on.

Damit eine Seite mobil korrekt dar­ge­stellt wird, ist es es­sen­zi­ell, dass Sie einen Dar­stel­lungs­be­reich de­fi­nie­ren. Tun Sie dies nicht, wird au­to­ma­tisch auch auf kleineren Bild­schir­men die stan­dard­mä­ßi­ge Desktop-Bild­schirm­brei­te verwendet. Damit sind die Benutzer Ihrer Website gezwungen, mit Zei­ge­fin­ger und Daumen zu zoomen und ho­ri­zon­tal zu scrollen – vor allem Letzteres ist ein No-Go im mobilen Web. Die Lösung dieses Problems: Tragen Sie im Head-Bereich Ihres Dokuments einen Viewport-Meta-Tag ein, der dem mobilen Browser Abmessung und Ska­lie­rung der Seite mitteilt. Google empfiehlt dafür folgende Zeile:

Die Angabe „width=device-width“ si­gna­li­siert, dass die Display-Breite dem Device (dt. „Gerät“) angepasst werden soll. Das Attribut „initial-scale=1“ weist eine 1:1-Beziehung zwischen CSS- und ge­rä­te­un­ab­hän­gi­gen Pixeln an und sorgt dafür, dass sich die Ska­lie­rung nicht ändert, wenn das Gerät gekippt wird.

Für Ihre User ist es frus­trie­rend, wenn sie die Texte auf Ihrer Seite nicht oder nur mit Mühe lesen können. Damit die Schrift auf jedem Gerät gut lesbar ist, sollten Sie relative Schrift­grö­ßen verwenden, die sich mit CSS skalieren lassen. Damit die Ska­lie­rung auf jedem Gerät korrekt ist, muss zuvor – wie oben be­schrie­ben – der Dar­stel­lungs­be­reich definiert werden. Als Ba­sis­schrift­grö­ße empfiehlt Google 16 CSS-Pixel. Die übrigen Größen skalieren Sie relativ zur Ba­sis­grö­ße. Das geschieht bei­spiels­wei­se über die folgende CSS-Klasse:

Die 75 Prozent der Ba­sis­schrift­grö­ße ent­spre­chen demnach 12 CSS-Pixel. Die CSS-Klasse „Large“ ent­spricht 125 Prozent der Ba­sis­schrift­grö­ße – also somit 20 CSS-Pixeln

Trotz der De­fi­ni­ti­on von relativen Schrift­grö­ßen sollten Sie das Layout Ihrer Website nicht mit unnötig vielen Schrift­ar­ten und zu vielen ver­schie­de­nen Schrift­grö­ßen überladen. Das wirkt zum einen schnell über­frach­tet und zum anderen unnötig komplex. So schwer sollten Sie es Usern im mobilen Web nicht machen.

Wenn Sie sich schon einmal mit Tipp- und Wisch­be­we­gun­gen auf Touch­screens über eine mobile Seite bewegt haben, wissen Sie aus eigener Erfahrung, wie wichtig eine sinnvolle In­te­grie­rung der Be­dien­ele­men­te ist. Als absolute Webdesign-Todsünde ist an dieser Stelle die zu enge Anordnung von Links und Buttons zu nennen. Die Fin­ger­spit­ze eines Er­wach­se­nen ist na­tur­ge­mäß breiter als ein Standard-Maus­zei­ger bei Desktop-Rechnern: Durch­schnitt­lich sind es 10 mm. Daher müssen klickbare Elemente auf mobil-op­ti­mier­ten Seiten mit aus­rei­chen­dem Abstand zu­ein­an­der platziert werden und über eine an­ge­mes­se­ne Größe verfügen. Liegen sie zu dicht bei­ein­an­der, besteht die Gefahr, einen falschen Link zu klicken – das frus­triert und führt zu einer schlech­ten Usability. Für Schalt­flä­chen empfiehlt Google eine Min­dest­brei­te von 7 mm bzw. 48 CSS-Pixeln.

Im mobilen Web erfolgen viele Sei­ten­auf­ru­fe auf die Schnelle, es wird nur „kurz etwas nach­ge­schla­gen“. Die Adjektive „schnell“ und „kurz“ sollten Sie bei der Ge­stal­tung Ihrer mobilen Seite ernst nehmen. Dem­entspre­chend sollte eine mobil-op­ti­mier­te Seite über eine in­tel­li­gen­te und leicht auf­find­ba­re Such­funk­ti­on verfügen. Sie sollte zentral auf der Start­sei­te und mit einem Blick zu finden sein. Such­an­fra­gen sollten zudem per Auto-Complete-Funktion ver­voll­stän­digt werden, um Nutzern das mühselige Bedienen einer Touch­screen-Tastatur zu er­leich­tern. Entdecken Sie in unserem Digital Guide noch weitere Tipps für eine user­freund­li­che Such­funk­ti­on.

Beim In­ter­net­sur­fen ist kaum etwas so ärgerlich, wie wartend auf eine leere Seite und den La­de­bal­ken des Browsers starren zu müssen. La­de­zei­ten gelten daher als re­gel­rech­te „Con­ver­si­on-Killer“: Laut t3n-Magazin hat eine Studie aus dem Jahr 2015 ergeben, dass in Deutsch­land bereits bei einer La­de­zei­ten von über 3 Sekunden ein Drittel der Besucher abspringt. Ein weiteres Drittel verliert nach 5 Sekunden die Geduld und wechselt zu einer anderen Seite. Zudem haben Sta­tis­ti­ken in den ver­gan­ge­nen Jahren gezeigt, dass Web-Nutzer ten­den­zi­ell immer un­ge­dul­di­ger geworden sind. Nicht nur für On­line­shops sind lange La­de­zei­ten daher gleich­be­deu­tend mit ver­ge­be­nen Chancen. Im Mobile Web kommen er­schwe­rend noch po­ten­zi­el­le Ver­bin­dungs­ab­brü­che in U-Bahnen oder ent­le­ge­nen länd­li­chen Regionen hinzu. Häufige Fehler hin­sicht­lich der Per­for­mance sind:

• Un­kom­pri­mier­te Bilder und/oder zu große Bild­for­ma­te

• Zu viele Bilder und andere Mul­ti­me­dia-Elemente

• Un­sau­be­rer HTML- und CSS-Code

• Zu viel Ja­va­Script

• Un­kom­pri­mier­ter Quellcode

• Zu viele HTTP-Anfragen

• Redirects

• Fehlendes Browser-Caching

• Langsame Server

Die meisten dieser Fehler lassen sich mit einigen Ein­grif­fen beheben: Nutzen Sie dafür bei­spiels­wei­se das Google-Tool PageSpeed Insights. Mit diesem können Sie Ihre Seite ge­rä­te­über­grei­fend auf ihre Ge­schwin­dig­keit über­prü­fen und erhalten wichtige An­halts­punk­te für Ihre Op­ti­mie­run­gen. An­schlie­ßend können Sie gezielte Maßnahmen treffen. So zum Beispiel:

• Bilder kom­pri­mie­ren: In unserem Ratgeber haben wir bereits die Bedeutung und Mög­lich­kei­ten der Kom­pri­mie­rung mithilfe kos­ten­lo­ser Tools erläutert. Sie können diese bei­spiels­wei­se mit Freeware-Tools oder über spezielle brow­ser­ba­sier­te An­wen­dun­gen vornehmen. Die passende Bildgröße steuern Sie adaptiv mit dem „picture“-Tag und @media. Als Da­tei­for­ma­te empfehlen sich: JPEG, GIF und PNG. Al­ter­na­tiv können Sie auch auf pures CSS, Iconfonts oder SVG anstelle von Bildern setzen.

• Code von HTML, CSS und Ja­va­Script ent­schla­cken und kom­pri­mie­ren. Auch dafür gibt es spezielle Tools. Doch auch das Löschen unnötiger Leer­zei­chen, das Ver­schie­ben der Ja­va­Script-Dateien an das Ende des Bodys kann bereits Wunder bewirken. Lesen Sie in unserem Artikel, wie Sie CSS kom­pri­mie­ren.

• Caching nutzen, um Webserver zu entlasten: Durch das lokale Speichern häufiger genutzter Dateien kann die Ladezeit für wie­der­keh­ren­de Benutzer erheblich ver­bes­sert werden. Bei Pro­gres­si­ve Web Apps sorgt auch Offline-Caching für eine bessere Per­for­mance.

• Anzahl der http-Requests durch Bündelung der Res­sour­cen re­du­zie­ren.

• Per­for­mance des Content-Ma­nage­ment-Systems (CMS) ver­bes­sern.

• Wenn Ihre Seite sehr viele Zugriffe aus dem Ausland erhält, ist eventuell auch ein Content Delivery Network (CDN) sinnvoll.

• Auch Ac­ce­le­ra­ted Mobile Pages (AMP) können für eine bessere Per­for­mance sorgen.

• Sollten diese Maßnahmen nicht aus­rei­chen, hilft mitunter eine Ver­bes­se­rung der Hosting-Umgebung. Vor allem reich­wei­ten­star­ke Websites sollten über un­ein­ge­schränk­ten Webspace und Traffic verfügen. Auch ein Hardware-Upgrade – etwa der Umstieg auf schnel­le­ren SSD-Speicher – steigert die Per­for­mance deutlich.

Ziel von Google ist es, den Content mobiler Seiten leichter zu­gäng­lich zu machen. Bild­schirm­fül­len­de In­ters­ti­ti­als – wie in dem obigen Bild­bei­spiel – ver­sper­ren hingegen in vielen Fällen den Inhalt komplett und sollten daher nicht genutzt werden. Aus­ge­nom­men sind rechtlich ver­bind­li­che Ein­blen­dun­gen von Cookie-Richt­li­ni­en sowie dezent plat­zier­te Banner oder Login-Dialoge für nicht öf­fent­li­che und nicht in­de­xier­ba­re Inhalte. Gegen einen dezent plat­zier­ten Hinweis auf die App spricht ebenfalls nichts.

Da der Googlebot die Inhalte einer Website sowohl indexiert wie auch rendert, sollte der Bot nicht via robots.txt „aus­ge­sperrt“ werden. Das heißt: Er sollte – wie ein normaler Nutzer auch – Zugriff auf alle CSS-, Ja­va­Script- und Bild­da­tei­en haben. Werden statt­des­sen Ein­schrän­kun­gen in der robots.txt definiert, können unter Umständen wichtige Inhalte nicht gerendert werden, was in letzter Kon­se­quenz auch ein schlech­te­res Ranking zur Folge hat.

Sie können mithilfe der Google Search Console über die Funktion „Abruf wie durch Google“ Ihre Website un­ter­su­chen und sie so sehen, wie sie von dem Googlebot gecrawlt und gerendert wird. Zudem können Sie mit diesem Tool die robots.txt un­ter­su­chen und einsehen, welche Elemente unter Umständen blockiert werden.

Wenn Sie sich für eine separate mobile Seite anstatt für ein Re­spon­si­ve-Design ent­schei­den, gibt es einige weitere po­ten­zi­el­le Fall­stri­cke für Ihre mobil-op­ti­mier­te Website. Dazu zählen vor allem falsche Wei­ter­lei­tun­gen und 404-Fehler, die nur bei mobilen Seiten, nicht aber Desk­top­nut­zern angezeigt werden.

In An­be­tracht der Nut­zer­zah­len des mobilen Webs wäre es ver­hee­rend, eine spe­zi­fi­sche mobile Seite zu erstellen, diese gegenüber der Desktop-Version zu ver­nach­läs­si­gen und nur „ab­ge­speck­ten“ Content an­zu­bie­ten. Denn es ist ein Irrglaube, dass mobile Geräte aus­schließ­lich unterwegs für kurze Such­an­fra­gen und schnelle In­for­ma­tio­nen genutzt werden: Doch 61 Prozent der Nutzer des mobilen Webs verwenden ihr Smart­phone oder ihr Tablet während sie auf der Couch liegen und fernsehen. Das ergab eine Studie von inMobi. Ein Desktop-PC ist damit in der Regel in Reich­wei­te. Trotzdem werden die mobilen Endgeräte bevorzugt genutzt. Findet ein Nutzer beim mobilen Surfen auf einer ihm ver­trau­ten Website nicht die gleichen Inhalte und In­for­ma­tio­nen wie auf der Desk­top­sei­te, ist das frus­trie­rend und führt zu zu­sätz­li­chem Aufwand für den Nutzer: Dieser ist gezwungen, sich die Desktop-Version der Seite anzeigen zu lassen, und muss mit der er­schwer­ten Bedienung leben (Zoomen, Vertippen aufgrund zu kleiner Links, Hover-Menüs etc.). Noch schlimmer: Er findet auf der spe­zi­fi­schen mobilen Seite gar keinen Link zur Desktop-Version oder springt ab und sucht sich die gesuchten Inhalte an anderer Stelle, die besser für mobile Geräte optimiert ist. Daher sollte eine mobile Seite über alle wichtigen Inhalte und Funk­tio­nen verfügen, die auch auf der Desk­top­sei­te zu finden sind.

Die Seite wechoo­se­the­moon.org ist wirklich spannend und bietet in­ter­es­sier­ten Besuchern massig Mehrwert: Sie erinnert an die Mond­lan­dung im Rahmen der Apollo-11-Mission und er­mög­licht, sie digital nach­zu­er­le­ben. Die Seite wurde im Jahr 2009 zum 40-jährigen Jubiläum der Mission gestartet und basiert daher – wenig ver­wun­der­lich – noch voll­stän­dig auf Flash. Wer die Seite über einen mobilen Browser besucht oder keinen Flash-Player in­stal­liert hat, sieht hingegen nur die oben ab­ge­bil­de­te Seite mit der Bitte, Flash Player 10 zu in­stal­lie­ren. Das ist na­tur­ge­mäß min­des­tens mit einem Mehr­auf­wand, womöglich sogar mit einem gänz­li­chen Aus­schluss des Nutzers verbunden – der Frust ist vor­pro­gram­miert.

Nutzen Sie daher HTML5-Standards, um Videos und Ani­ma­tio­nen ein­zu­bin­den. Selbst Her­stel­ler Adobe erkennt die Vorteile an und rät Content-Er­stel­lern daher zu dem neueren HTML5-Standard. Nicht zuletzt aufgrund der Si­cher­heits­lü­cken des Flash-Formats ist es ratsam, neuere Al­ter­na­ti­ven zu verwenden. So könnten Besucher über jedes Endgerät und ohne zu­sätz­li­che In­stal­la­ti­on die gesuchten Inhalte abrufen. Alles weitere zum Einbinden von Videos via HTML erklären wir Ihnen in unserem Tutorial "HTML Videos auf Website einbinden - so funk­tio­nier­t's".

Pro­ble­ma­tisch sind auch Wei­ter­lei­tun­gen, die nur für bestimmte Geräte oder aus­ge­wähl­te mobile Be­triebs­sys­te­me funk­tio­nie­ren: Über­prü­fen Sie daher, ob Ihre Wei­ter­lei­tun­gen für alle gängigen Systeme (Android, iOS, Windows) glei­cher­ma­ßen funk­tio­nie­ren und passen Sie die Kon­fi­gu­ra­ti­on Ihres Servers ge­ge­be­nen­falls an. Weiterhin erhalten Sie über die Google Search Console Hinweise auf feh­ler­haf­te Wei­ter­lei­tun­gen.

Korrekte Wei­ter­lei­tun­gen sind auch wichtig, falls Sie fest­stel­len, dass Smart­phone- oder Ta­blet­nut­zer auf ihren mobilen Geräten eine 404-Feh­ler­mel­dung erhalten, Desk­top­nut­zer hingegen auf der iden­ti­schen Seite nicht. Auch hier sollte – sofern eine mobile Version der Seite vorhanden ist – stets korrekt auf diese wei­ter­ge­lei­tet werden. Natürlich darf die mobile Version der Seite ebenfalls keinen Fehler vermelden. Immer noch besser, als gar keinen Inhalt an­zu­zei­gen, ist, den Nutzer auf die un­an­ge­pass­te Seite zu verweisen – wobei diese Notlösung mit deut­li­chen Ein­schrän­kun­gen in der Usability verbunden ist.