So op­ti­mie­ren Sie Ihre Website für Handys

Damit man Ihre Website auch über Smart­phones oder Tablets aufrufen kann, müssen Sie diese auch für mobile Geräte op­ti­mie­ren. Sie können dafür entweder eine eigene mobile Version erstellen oder ein adaptives bzw. re­spon­si­ves Design wählen.

Warum mobile Op­ti­mie­rung Ihrer Website un­ver­zicht­bar ist

Ein Layout, das auf einem 17 Zoll-Bild­schirm funk­tio­niert, lässt sich nicht ohne Weiteres auf ein Tablet- oder Han­dy­dis­play her­un­ter­rech­nen. Es kommen Un­ter­schie­de nicht nur bei der Bild­schirm­auf­lö­sung, sondern auch bei Ein­ga­be­me­tho­den (Touch vs. Maus), Display-Pro­por­tio­nen und Netz­werk­ge­schwin­dig­kei­ten hinzu. Grund genug, sich intensiv mit der Frage zu be­schäf­ti­gen, wie sich Webseiten für Mo­bil­ge­rä­te op­ti­mie­ren lassen, ohne am Desktop-Rechner an Funk­tio­na­li­tät ein­zu­bü­ßen.

Lösungen, die sich bewährt haben, sind:

• Re­spon­si­ves Layout: fluides Design, das sich an ver­schie­de­ne Bild­schirm­grö­ßen anpasst.
• Adaptives Layout: vor­de­fi­nier­te Layout-Versionen (Break­points) je Gerätetyp, server- oder cli­ent­sei­ti­ge Erkennung. So kann man gezielt op­ti­mie­ren, z. B. die auf Mo­bil­ge­rä­te zu­ge­schnit­te­ne Version schlanker machen, Elemente und Na­vi­ga­ti­on speziell anpassen.
• Separate mobile Website / App: für manche Projekte noch eine Option, etwa wenn sehr spe­zi­fi­sche Funk­tio­na­li­tä­ten auf Mo­bil­ge­rä­te oder immersive Er­leb­nis­se gefragt sind. Aber zunehmend seltener, da Aufwand, Wartung und Frag­men­tie­rung stark steigen.

Zudem spielen neue An­for­de­run­gen und Techniken eine Rolle:

• Mobile-First-Design ist in­zwi­schen Standard: Man gestaltet zuerst für kleine Displays und erweitert dann die Funk­tio­na­li­tät für größere.
• Per­for­mance-Op­ti­mie­rung ist nicht mehr optional: La­de­zei­ten, Core Web Vitals und der res­sour­cen­be­wuss­te Umgang mit Bildern und Skripten bestimmen häufig über Nut­zungs­dau­er oder Ab­sprungra­ten.
• Touch-In­ter­ak­ti­on und Usability sind zentral: Größere Buttons, Abstände, intuitive Na­vi­ga­ti­on, Gesten etc.

Wir be­leuch­ten die Vor- und Nachteile der genannten Mög­lich­kei­ten und zeigen Ihnen, welche Al­ter­na­ti­ve Ihrem Web­pro­jekt zur ge­wünsch­ten Mo­bil­fä­hig­keit verhilft.

Warum Sie Ihre Website für Mo­bil­ge­rä­te op­ti­mie­ren sollten

Google legt großen Wert darauf, dass Websites auch auf mobilen Geräten gut aussehen. Im Vor­der­grund steht die Be­nut­zer­freund­lich­keit (UX). Mobile Endgeräte haben kleinere Displays als PCs oder Laptops und werden durch Touch- oder Wisch­be­we­gun­gen bedient.

Hinzu kommt, dass die Band­brei­te der mobilen In­ter­net­ver­bin­dung in der Regel stark ein­ge­schränkt ist. Webseiten, die sich nicht skalieren lassen, wichtige In­for­ma­tio­nen über Hover-Elemente aus­spie­len oder da­ten­in­ten­si­ve Grafiken be­inhal­ten, lassen sich auf Mo­bil­ge­rä­ten weder an­ge­mes­sen dar­stel­len noch kom­for­ta­bel bedienen. Als logische Kon­se­quenz werden diese von Google aus der mobilen Websuche aus­sor­tiert oder als un­ge­eig­net ge­kenn­zeich­net. Für Web­sei­ten­be­trei­ber bedeutet dies massive Traffic-Verluste und somit Um­satz­ein­bu­ßen.

Ist Ihre Website „mobile friendly“?

Ob Ihre Webseite mobile-gerecht gestaltet ist, lässt sich schnell und einfach online fest­stel­len. Ent­spre­chen­de Ana­ly­se­tools werden von zahl­rei­chen Anbietern kostenlos zur Verfügung gestellt. Wir empfehlen folgende Tools, mit denen Sie Ihre Website einem Mobile-Test un­ter­zie­hen können:

• Light­house: Das Open-Source-Tool zur Analyse der Web­site­qua­li­tät Light­house, das auch die mobile Nutz­bar­keit bewertet.

• IONOS Website-Checker: Auch IONOS bietet mit dem Website-Checker ein kos­ten­lo­ses Tool, mit dem sich die Mo­bil­freund­lich­keit einer Website über­prü­fen lässt. Um den Quellcode aus­zu­le­sen, benötigt auch der Website-Checker lediglich die URL der In­ter­net­prä­senz. Neben der Dar­stell­bar­keit der Webseite auf ver­schie­de­nen Geräten erfasst die Analyse zudem drei weitere Aspekte er­folg­rei­cher Online-Projekte: die Auf­find­bar­keit in der Such­ma­schi­ne, die Si­cher­heit der Website sowie die Dauer des Sei­ten­auf­baus. Der Service richtet sich an deutsch­spra­chi­ge Kunden.

Ansätze der Website-Op­ti­mie­rung

Je nach Projekt bieten sich ver­schie­de­ne Mög­lich­kei­ten an, eine Website ge­rä­te­un­ab­hän­gig zu gestalten: Separate mobile Webseiten, Mobile Website-Templates im adaptiven oder re­spon­si­ven Layout sowie Plugin-Lösungen für Content-Ma­nage­ment-Systeme.

Mobile Webseiten

Bei mobilen Webseiten handelt es sich um un­ab­hän­gig von der Haupt­sei­te erstellte HTML-Dokumente, die aus­schließ­lich der mobilen Nutzung unter einer separaten URL dienen. Mobile Angebote werden oft unter dem Hostname „m“ ins Netz gestellt (m.example.com), während sich die Stan­dard­sei­te als Web­ser­vice unter „www“ abrufen lässt (www.example.com).

Im Idealfall gibt es von jeder re­le­van­ten Desktop-Seite auch eine mobile Version. Mobile Webseiten müssen jedoch nicht zwangs­läu­fig 1:1-Ent­spre­chun­gen ihrer Desktop-Pendants sein. Eine mobile Webseite als Al­ter­na­ti­ve neben der Desktop-Seite an­zu­bie­ten, ist vor allem dann sinnvoll, wenn die Sei­ten­be­su­cher von unterwegs auf andere Inhalte zugreifen als vom Heim-PC.

Mobile Webseiten sind in der Regel auf Smart­phones aus­ge­rich­tet. Das äußert sich in einer Anpassung auf die geringe Bild­schirm­grö­ße, große Schalt­flä­chen und den Verzicht auf da­ten­in­ten­si­ve Grafiken. Auf anderen Mo­bil­ge­rä­ten wie Tablets werden mobile Webseiten, die für Smart­phone-Displays kon­zi­piert wurden, nicht optimal angezeigt. Dennoch gibt es gute Gründe, separate mobile Webseiten zu erstellen.

Adaptives Layout

Eine Al­ter­na­ti­ve zur separaten Website für den mobilen Gebrauch ist ein Layout, das sich au­to­ma­tisch an das jeweilige Endgerät anpasst. Dabei ori­en­tiert sich die Dar­stel­lung einer In­ter­net­sei­te am sicht­ba­ren Bereich (dem Viewport) des ver­wen­de­ten Displays. Adaptive Layouts richten sich nach fest de­fi­nier­ten Break­points – ein relativ starres Ge­stal­tungs­ras­ter, das ver­schie­de­ne Ansichten für exakt be­schrie­be­ne Viewports bietet. Üblich sind Layout-Versionen für eine Desktop-Ansicht, eine Tablet-Ansicht und eine Smart­phone-Ansicht. Eine fließende Anpassung an die jeweilige Bild­schirm­grö­ße wie beim weiter unten be­schrie­be­nen re­spon­si­ven Layout lässt sich mit adaptiven Webseiten nicht umsetzen.

Als tech­ni­sche Grundlage adaptiver Layouts kommen so­ge­nann­te Media Queries (Me­di­en­ab­fra­gen) zum Einsatz. Dabei handelt es sich um ein CSS3-Konzept, das die Zuordnung eines Style­sheets zu einem Aus­ga­be­me­di­um ent­spre­chend seiner Ei­gen­schaf­ten regelt. Üb­li­cher­wei­se werden Websites im adaptiven Layout auf bestimmte Ge­rä­te­ty­pen optimiert. Web­ent­wick­le­rin­nen und -ent­wick­ler ori­en­tie­ren sich hier an beliebten Pro­dukt­rei­hen wie dem iPhone oder dem iPad. Ent­spre­chen­de Webseiten sind daher nicht immer optimal auf das dar­stel­len­de Gerät ab­ge­stimmt.

Re­spon­si­ves Layout

Adaptive Webseiten stellen nur eine begrenzte Anzahl an An­zei­ge­va­ri­an­ten zur Verfügung. Die Vielzahl mobiler Endgeräte verlangt jedoch zunehmend nach fle­xi­ble­ren Dar­stel­lungs­for­men. Viele Web­sei­ten­be­trei­ber ziehen einer adaptiven Web­sei­ten­ge­stal­tung daher so­ge­nann­te re­spon­si­ve Layouts vor. Auch diese basieren auf CSS3 Media Queries. Wie beim adaptiven Layout liefert der Server an alle Endgeräte denselben HTML-Code aus. Die Webseite ist somit in jeder Dar­stel­lungs­va­ri­an­te unter derselben URL verfügbar. Im Gegensatz zum adaptiven Layout erfolgt die Anpassung an die jeweilige Dis­play­grö­ße des Endgeräts jedoch fließend, ohne dass ein starres Raster fest de­fi­nier­ter Viewports zugrunde gelegt wird. So lässt sich der ver­füg­ba­re Platz auf dem Display eines be­lie­bi­gen Aus­ga­be­ge­räts immer optimal ausnutzen. Lediglich eine Ober­gren­ze ver­hin­dert, dass Webseiten auf großen Bild­schir­men durch zu breite Spalten an Les­bar­keit einbüßen.

Aufgrund der Kom­ple­xi­tät re­spon­si­ver Layouts ist der Relaunch einer Website nach diesem Ge­stal­tungs­prin­zip jedoch zeit- und kos­ten­in­ten­siv. Hinzu kommt, dass neben dem Layout auch die Inhalte flexibel gestaltet werden müssen. Text­ab­schnit­te, Bilder, Videos und Tabellen müssen im besten Fall sowohl auf dem Smart-TV als auch auf dem Mo­bil­te­le­fon funk­tio­nie­ren. Statt eigene Layouts zu ent­wi­ckeln, setzen viele Web­sei­ten­be­trei­ber daher auf Content-Ma­nage­ment-Systeme wie WordPress, Joomla, Drupal oder Typo3. Diese Open-Source-Projekte stützen sich auf große Nutzer- und Ent­wick­ler-Com­mu­ni­ties und bieten eine breite Auswahl vor­ge­fer­tig­ter Design-Templates im re­spon­si­ven Layout, die mitunter kostenlos zur Verfügung stehen.

Mobile Plugins für CMS

Für bereits be­stehen­de Web­auf­trit­te auf Basis eines Content-Ma­nage­ment-Systems bieten Plugins eine kos­ten­güns­ti­ge Mög­lich­keit, Online-Angebote für Mo­bil­ge­rä­te in kurzer Zeit zu op­ti­mie­ren. Diese Option empfiehlt sich vor allem dann, wenn Web­sei­ten­be­trei­be­rin­nen und -betreiber am ur­sprüng­li­chen Desktop-Theme fest­hal­ten und dieses lediglich um Funk­tio­nen für Mo­bil­ge­rä­te erweitern möchten. Eine beliebte Dritt­an­biet­erlö­sung ist WPTouch für das weltweit meist­ge­nutz­te Content-Ma­nage­ment-System WordPress. Das Plugin er­mög­licht es, eine ei­gen­stän­di­ge, mo­bil­fä­hi­ge Version des Projekts zu erstellen. Diese ent­spricht im Grunde der separaten mobilen Webseite. Die zu­sätz­li­che Version wird aus­schließ­lich für Mobile-Geräte und un­ab­hän­gig von der Haupt­sei­te aus­ge­spielt.

Google bevorzugt re­spon­si­ve Websites

In weiten Teilen des Internets ist es üblich, sich bei der Web­ent­wick­lung am Such­ma­schi­nen-Markt­füh­rer Google zu ori­en­tie­ren. Eigenen Angaben zufolge bevorzugt Google eine re­spon­si­ve Web­sei­ten­ge­stal­tung. Die Ent­schei­dung begründet das Un­ter­neh­men fol­gen­der­ma­ßen:

• Inhalte stehen bei re­spon­si­ven Layouts nur unter einer URL zur Verfügung und können so leichter geteilt und verlinkt werden.
• Anders als beim Betrieb mobiler Webseiten parallel zur Desktop-Version kann Google re­spon­si­ven Layouts pro­blem­los präzise In­de­xie­rungs­ei­gen­schaf­ten zuordnen. Somit ist es nicht mehr er­for­der­lich, das Vor­han­den­sein ent­spre­chen­der Desktop- bzw. mobiler Seiten zu si­gna­li­sie­ren.
• Re­spon­si­ve Web­pro­jek­te ver­ur­sa­chen einen ge­rin­ge­ren Pfle­ge­auf­wand als In­ter­net­auf­trit­te mit mehreren in­halts­glei­chen Seiten.
• Da re­spon­si­ve Layouts ohne Wei­ter­lei­tun­gen auskommen, werden typische Fehler, die bei der Zuordnung separater mobiler Webseiten auftreten können, grund­sätz­lich vermieden.

Der wich­tigs­te Punkt für Google ist jedoch ver­mut­lich, dass bei re­spon­si­ven Websites ein ein­ma­li­ges Crawlen genügt, während separate mobile Webseiten vom Google-Bot jeweils einzeln erfasst werden müssen. Der Such­ma­schi­nen­an­bie­ter spart durch eine re­spon­si­ve Web­sei­ten­ge­stal­tung somit deutlich an Res­sour­cen.

Häufige Fehler bei mobilen Webseiten

Bei der mobilen Op­ti­mie­rung von Websites gibt es einige typische Stol­per­fal­len, die die Nut­zer­er­fah­rung erheblich be­ein­träch­ti­gen können. Viele Be­trei­be­rin­nen und Betreiber un­ter­schät­zen, wie stark sich La­de­zei­ten, Na­vi­ga­ti­on und Co. auf kleinen Bild­schir­men auswirken. Im Folgenden finden Sie die häu­figs­ten Feh­ler­quel­len:

• Wahl der Kon­fi­gu­ra­ti­ons­va­ri­an­te: Bereits die Ent­schei­dung für Re­spon­si­ve Design, eine separate mobile Website oder ein adaptives Layout ist ent­schei­dend. Re­spon­si­ve Design wird von Google bevorzugt, die Wahl sollte sich jedoch an der Ziel­grup­pe, den re­le­van­ten Geräten und der Kom­ple­xi­tät der Website ori­en­tie­ren, da eine spätere Um­stel­lung oft aufwendig und teuer ist.
• Wenig intuitive GUI: Eine schlechte Ge­stal­tung der Be­nut­zer­ober­flä­che kann die mobile Nutzung erheblich er­schwe­ren. Un­voll­stän­di­ge Websites, eine geringe Textgröße, zu kleine oder schlecht be­dien­ba­re Elemente, Mouseover-Effekte und ver­steck­te Funk­tio­nen oder eine nicht user­freund­li­che Such­funk­ti­on sollten vermieden werden, da Touch­screens andere In­ter­ak­ti­ons­prin­zi­pi­en erfordern.
• Per­for­mance: Lange La­de­zei­ten wirken als re­gel­rech­te „Con­ver­si­on-Killer“: Bereits ab 3 Sekunden springen viele Nut­ze­rin­nen und Nutzer ab, besonders auf mobilen Geräten mit teils schwacher Ver­bin­dung. Häufige Fehler sind un­kom­pri­mier­te Bilder oder zu große Bild­for­ma­te, zu viel Ja­va­Script, zu viele HTTP-Anfragen, un­op­ti­mier­ter Code und fehlendes Caching.
• Zu große In­ters­ti­ti­als und auf­dring­li­che Wer­be­ban­ner: Bild­schirm­fül­len­de Overlays, etwa für App-Werbung oder News­let­ter-An­mel­dun­gen, stören die mobile User-Ex­pe­ri­ence erheblich und er­schwe­ren den Zugriff auf den ei­gent­li­chen Content. Besser sind dezente Ein­blen­dun­gen, die den Content nicht voll­stän­dig verdecken. Auf­dring­li­che Werbung sollte mobil unbedingt vermieden werden.
• Ein­schrän­kun­gen in der robots.txt: Wird der Googlebot durch die robots.txt am Zugriff auf CSS-, Ja­va­Script- oder Bild­da­tei­en gehindert, kann die Seite nicht korrekt gerendert werden, was das Ranking ver­schlech­tert.
• Funk­tio­na­le Un­ter­schie­de auf der mobilen Seite: Separate mobile Websites bergen die Gefahr von ab­ge­speck­tem Content, feh­ler­haf­ten Wei­ter­lei­tun­gen oder 404-Fehlern, die Desktop-User nicht betreffen. Alle wichtigen Inhalte und Funk­tio­nen sollten auch mobil verfügbar sein, um Frust zu vermeiden.