Mobile Webseiten

Stand: 20.09.2022

Heutzutage müssen Webseiten immer für mobile Geräte wie Tablets oder Smartphones angepasst werden, da die Internetnutzung hauptsächlich über diese Geräte erfolgt. Es gibt viele Möglichkeiten, eine Webseite für mobile Geräte zu optimieren, wobei Responsive Webdesign sicherlich am weitesten verbreitet ist.

Was bedeutet Mobile First?

Heute gilt die Devise Mobile First, d. h. Google nutzt den Mobile First Index und bevorzugt somit mobile Webseiten, da die meisten Nutzeranfragen auf mobiler Ebene stattfinden.

Unter dem Aspekt Mobile First ist es daher wichtig, eine Webseite bereitzustellen, die auf den unterschiedlichen Bildschirmen der verschiedenen mobilen Endgeräte optimal funktioniert. Eine kurze Ladezeit ist in diesem Zusammenhang ein besonders wichtiger Faktor.

Bei der Optimierung von mobilen Webseiten spielt die User Experience (UX), immer eine wichtige Rolle, denn nur zufriedene User bleiben lange auf der Seite. So wird die Absprungrate minimiert, der Traffic erhöht und die Gesamtperformance einer Webseite gesteigert.

Merkmale guter mobiler Webseiten

Eine gute mobile Webseite lässt sich an verschiedenen Merkmalen erkennen: Sie sollte immer den gleichen Inhalt wie die Desktop-Version haben und auf keinen Fall eine abgespeckte Version der Desktop-Seite sein. Oberste Priorität genießt die korrekte Darstellung des Inhalts und die Benutzerfreundlichkeit, d. h. die mobile Webseite sollte eine attraktive, einfach zu bedienende Seite mit einer kurzen Ladezeit sein.

Die vier Arten von mobilen Webseiten

Es gibt vier Arten von mobilen Webseiten:

Responsive Webdesign

Beim Responsive Webdesign wird die Webseite in HTML und CSS so geschrieben, dass sie sich automatisch an die Bildschirmgröße des jeweiligen Gerätes anpasst. Dies ist die empfohlene Lösung, auch von Google, da sie kostengünstig umgesetzt werden kann und für eine breite Palette von Anwendungen geeignet ist. Ein Problem von Responsive Design liegt bei komplexen, größeren Webseiten: Hier kann es zu Darstellungsfehlern kommen, wenn hochauflösende Bilder oder viel Text verwendet werden. Ältere Browser verstehen nicht immer die Responsive-Design-Befehle für die Darstellung. Daher sollte Responsive Design am besten für Blogs oder einfache Firmenpräsenzen genutzt werden, nicht unbedingt für große Webpräsenzen mit Shops.

Responsive Design wird mit flexiblen Grids und CSS3 Media Queries erstellt, sodass das Layout immer zum jeweiligen Ausgabemedium der Webseite passt. Es bietet daher eine gute Möglichkeit, die Webseite nachträglich für die mobile Nutzung zu optimieren, wenn die Webseite nicht von Anfang an nach dem Mobile-First-Prinzip erstellt wurde.

Dynamic Serving

Dynamic Serving wird auch Adaptive Design genannt und stellt eine weitere Möglichkeit zur Optimierung von Webseiten dar.

Für unterschiedliche User Agents, also Desktop-PCs oder mobile Geräte, werden unterschiedliche Quellcode-Varianten angezeigt. Es wird nur eine URL verwendet. Dies ist eine etwas kompliziertere Variante des Responsive Webdesigns, da verschiedene Versionen der Webseite auf dem Server gespeichert werden und je nach Art des angeforderten Geräts die entsprechende Version geladen wird. Dynamic Serving eignet sich im Gegensatz zum Responsive Design für sehr komplizierte und komplexe Webseiten. Das einzige Problem besteht darin, dass es manchmal zu Fehlern bei der Erkennung des Benutzergeräts kommen kann, insbesondere wenn Geräte verwendet werden, die gerade neu auf dem Markt sind.

Separate Webseite

Eine weitere Möglichkeit für mobile Webseiten ist die Erstellung einer separaten Webseite für mobile Endgeräte: Hier besteht jedoch die Gefahr von Duplicate Content, der durch Canonical Tags vermieden werden kann.

Apps

Die vierte Variante ist die ebenfalls sehr beliebte Bereitstellung der Inhalte per App. Die Texte und die gesamte Webseite lassen sich dann speziell für die App anpassen. Ein großer Vorteil von Apps liegt natürlich darin, dass das Nutzerverhalten nach der Installation sehr einfach nachverfolgt werden kann. Eine App ist immer dann zu empfehlen, wenn es sich um eine komplexe Webseite mit Preisvergleichen, Buchungen oder vielen Nutzerinteraktionen handelt.