So optimieren Sie Ihre Website für Handys

Damit man Ihre Website auch über Smartphones oder Tablets aufrufen kann, müssen Sie diese auch für mobile Geräte optimieren. Sie können dafür entweder eine eigene mobile Version erstellen oder ein adaptives bzw. responsives Design wählen.

Warum mobile Optimierung Ihrer Website unverzichtbar ist

Ein Layout, das auf einem 17 Zoll-Bildschirm funktioniert, lässt sich nicht ohne Weiteres auf ein Tablet- oder Handydisplay herunterrechnen. Es kommen Unterschiede nicht nur bei der Bildschirmauflösung, sondern auch bei Eingabemethoden (Touch vs. Maus), Display-Proportionen und Netzwerkgeschwindigkeiten hinzu. Grund genug, sich intensiv mit der Frage zu beschäftigen, wie sich Webseiten für Mobilgeräte optimieren lassen, ohne am Desktop-Rechner an Funktionalität einzubüßen.

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

• Responsives Layout: fluides Design, das sich an verschiedene Bildschirmgrößen anpasst.
• Adaptives Layout: vordefinierte Layout-Versionen (Breakpoints) je Gerätetyp, server- oder clientseitige Erkennung. So kann man gezielt optimieren, z. B. die auf Mobilgeräte zugeschnittene Version schlanker machen, Elemente und Navigation speziell anpassen.
• Separate mobile Website / App: für manche Projekte noch eine Option, etwa wenn sehr spezifische Funktionalitäten auf Mobilgeräte oder immersive Erlebnisse gefragt sind. Aber zunehmend seltener, da Aufwand, Wartung und Fragmentierung stark steigen.

Zudem spielen neue Anforderungen und Techniken eine Rolle:

• Mobile-First-Design ist inzwischen Standard: Man gestaltet zuerst für kleine Displays und erweitert dann die Funktionalität für größere.
• Performance-Optimierung ist nicht mehr optional: Ladezeiten, First Input Delay, Core Web Vitals und der ressourcenbewusste Umgang mit Bildern und Skripten bestimmen häufig über Nutzungsdauer oder Absprungraten.
• Touch-Interaktion und Usability sind zentral: Größere Buttons, Abstände, intuitive Navigation, Gesten etc.

Wir beleuchten die Vor- und Nachteile der genannten Möglichkeiten und zeigen Ihnen, welche Alternative Ihrem Webprojekt zur gewünschten Mobilfähigkeit verhilft.

Warum Sie Ihre Website für Mobilgeräte optimieren sollten

Google legt großen Wert darauf, dass Websites auch auf mobilen Geräten gut aussehen. Im Vordergrund steht die Benutzerfreundlichkeit (UX). Mobile Endgeräte haben kleinere Displays als PCs oder Laptops und werden durch Touch- oder Wischbewegungen bedient.

Hinzu kommt, dass die Bandbreite der mobilen Internetverbindung in der Regel stark eingeschränkt ist. Webseiten, die sich nicht skalieren lassen, wichtige Informationen über Hover-Elemente ausspielen oder datenintensive Grafiken beinhalten, lassen sich auf Mobilgeräten weder angemessen darstellen noch komfortabel bedienen. Als logische Konsequenz werden diese von Google aus der mobilen Websuche aussortiert oder als ungeeignet gekennzeichnet. Für Webseitenbetreiber bedeutet dies massive Traffic-Verluste und somit Umsatzeinbußen.

Ist Ihre Website „mobile friendly“?

Ob Ihre Webseite mobile-gerecht gestaltet ist, lässt sich schnell und einfach online feststellen. Entsprechende Analysetools werden von zahlreichen Anbietern kostenlos zur Verfügung gestellt. Wir empfehlen folgende Tools, mit denen Sie Ihre Website einem Mobile-Test unterziehen können:

• Googles Mobile Friendly Test: Das Open-Source-Tool zur Analyse der Websitequalität Lighthouse, das auch die mobile Nutzbarkeit bewertet.

• IONOS Website-Checker: Auch IONOS bietet mit dem Website-Checker ein kostenloses Tool, mit dem sich die Mobilfreundlichkeit einer Website überprüfen lässt. Um den Quellcode auszulesen, benötigt auch der Website-Checker lediglich die URL der Internetpräsenz. Neben der Darstellbarkeit der Webseite auf verschiedenen Geräten erfasst die Analyse zudem drei weitere Aspekte erfolgreicher Online-Projekte: die Auffindbarkeit in der Suchmaschine, die Sicherheit der Website sowie die Dauer des Seitenaufbaus. Der Service richtet sich an deutschsprachige Kunden.

Ansätze der Website-Optimierung

Je nach Projekt bieten sich verschiede Möglichkeiten an, eine Website geräteunabhängig zu gestalten: Separate mobile Webseiten, Mobile Website-Templates im adaptiven oder responsiven Layout sowie Plugin-Lösungen für Content-Management-Systeme.

Mobile Webseiten

Bei mobilen Webseiten handelt es sich um unabhängig von der Hauptseite erstellte HTML-Dokumente, die ausschließ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 Standardseite als Webservice unter „www“ abrufen lässt (www.example.com).

Im Idealfall gibt es von jeder relevanten Desktop-Seite auch eine mobile Version. Mobile Webseiten müssen jedoch nicht zwangsläufig 1:1-Entsprechnungen ihrer Desktop-Pendants sein. Eine mobile Webseite als Alternative neben der Desktop-Seite anzubieten, ist vor allem dann sinnvoll, wenn die Seitenbesucher von unterwegs auf andere Inhalte zugreifen als vom Heim-PC.

Mobile Webseiten sind in der Regel auf Smartphones ausgerichtet. Das äußert sich in einer Anpassung auf die geringe Bildschirmgröße, große Schaltflächen und den Verzicht datenintensiver Grafiken. Auf anderen Mobilgeräten wie Tablets werden mobile Webseiten, die für Smartphone-Displays konzipiert wurden, nicht optimal angezeigt. Dennoch gibt es gute Gründe, separate mobile Webseiten zu erstellen.

Adaptives Layout

Eine Alternative zur separaten Website für den mobilen Gebrauch ist ein Layout, das sich automatisch an das jeweilige Endgerät anpasst. Dabei orientiert sich die Darstellung einer Internetseite am sichtbaren Bereich (dem Viewport) des verwendeten Displays. Adaptive Layouts richten sich nach fest definierten Breakpoints – ein relativ starres Gestaltungsraster, dass verschiedene Ansichten für exakt beschriebene Viewports bietet. Üblich sind Layout-Versionen für eine Desktop-Ansicht, eine Tablet-Ansicht und eine Smartphone-Ansicht. Eine fließende Anpassung an die jeweilige Bildschirmgröße wie beim weiter unten beschriebenen responsiven Layout lässt sich mit adaptiven Webseiten nicht umsetzen.

Als technische Grundlage adaptiver Layouts kommen sogenannte Media Queries (Medienabfragen) zum Einsatz. Dabei handelt es sich um ein CSS3-Konzept, das die Zuordnung eines Stylesheets zu einem Ausgabemedium entsprechend seiner Eigenschaften regelt. Üblicherweise werden Websites im adaptiven Layout auf bestimmte Gerätetypen optimiert. Webentwicklerinnen und -entwickler orientieren sich hier an beliebten Produktreihen wie dem iPhone oder dem iPad. Entsprechende Webseiten sind daher nicht immer optimal auf das darstellende Gerät abgestimmt.

Responsives Layout

Adaptive Webseiten stellen nur eine begrenzte Anzahl an Anzeigevarianten zur Verfügung. Die Vielzahl mobiler Endgeräte verlangt jedoch zunehmend nach flexibleren Darstellungsformen. Viele Webseitenbetreiber ziehen einer adaptiven Webseitengestaltung daher sogenannte responsive 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 Darstellungsvariante unter derselben URL verfügbar. Im Gegensatz zum adaptiven Layout erfolgt die Anpassung an die jeweilige Displaygröße des Endgeräts jedoch fließend, ohne dass ein starres Raster fest definierter Viewports zugrunde gelegt wird. So lässt sich der verfügbare Platz auf dem Display eines beliebigen Ausgebegeräts immer optimal ausnutzen. Lediglich eine Obergrenze verhindert, dass Webseiten auf großen Bildschirmen durch zu breite Spalten an Lesbarkeit einbüßen.

Aufgrund der Komplexität responsiver Layouts ist der Relaunch einer Website nach diesem Gestaltungsprinzip jedoch zeit- und kostenintensiv. Hinzu kommt, dass neben dem Layout auch die Inhalte flexibel gestaltet werden müssen. Textabschnitte, Bilder, Videos und Tabellen müssen im besten Fall sowohl auf dem Smart-TV als auch auf dem Mobiltelefon funktionieren. Statt eigene Layouts zu entwickeln, setzen viele Webseitenbetreiber daher auf Content-Management-Systeme wie WordPress, Joomla, Drupal oder Typo3. Diese Open-Source-Projekte stützen sich auf große Nutzer- und Entwickler-Communities und bieten eine breite Auswahl vorgefertigter Design-Templates im responsiven Layout, die mitunter kostenlos zur Verfügung stehen.

Mobile Plugins für CMS

Für bereits bestehende Webauftritte auf Basis eines Content-Management-Systems bieten Plugins eine kostengünstige Möglichkeit, Online-Angebote für Mobilgeräte in kurzer Zeit zu optimieren. Diese Option empfiehlt sich vor allem dann, wenn Webseitenbetreiberinnen und -betreiber am ursprünglichen Desktop-Theme festhalten und dieses lediglich um Funktionen für Mobilgeräte erweitern möchten. Eine beliebte Drittanbieterlösung ist WPTouch für das weltweit meistgenutzte Content-Management-System WordPress. Das Plugin ermöglicht es, eine eigenständige, mobilfähige Version des Projekts zu erstellen. Diese entspricht im Grunde der separaten mobilen Webseite. Die zusätzliche Version wird ausschließlich für Mobile-Geräte und unabhängig von der Hauptseite ausgespielt.

Google bevorzugt responsive Websites

In weiten Teilen des Internets ist es üblich, sich bei der Webentwicklung am Suchmaschinen-Marktführer Google zu orientieren. Eigenen Angaben zufolge bevorzugt Google eine responsive Webseitengestaltung. Die Entscheidung begründet das Unternehmen folgendermaßen:

• Inhalte stehen bei responsiven 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 responsiven Layouts problemlos präzise Indexierungseigenschaften zuordnen. Somit ist es nicht mehr erforderlich, das Vorhandensein entsprechender Desktop- bzw. mobiler Seiten zu signalisieren.
• Responsive Webprojekte verursachen einen geringeren Pflegeaufwand als Internetauftritte mit mehreren inhaltsgleichen Seiten.
• Da responsive Layouts ohne Weiterleitungen auskommen, werden typische Fehler, die bei der Zuordnung separater mobiler Webseiten auftreten können, grundsätzlich vermieden.

Der wichtigste Punkt für Google ist jedoch vermutlich, dass bei responsiven Websites ein einmaliges Crawlen genügt, während separate mobile Webseiten vom Google-Bot jeweils einzeln erfasst werden müssen. Der Suchmaschinenanbieter spart durch eine responsive Webseitengestaltung somit deutlich an Ressourcen.