Hast du deine Website auf dem Smartphone geöffnet und etwas gesehen, das mit dem, was du gebaut hast, nichts zu tun hat? Eine mobil kaputte Website gehört zu den häufigsten Beschwerden von Markeninhabern, die ihre Seite am Desktop gestaltet und nie geprüft haben, wie sie auf einem kleineren Bildschirm läuft. Dieser Artikel erklärt, was das Problem verursacht, wie du herausfindest, welche Ursache bei deiner Seite vorliegt, und wie du es behebst.
Mehr als die Hälfte des gesamten Webtraffics kommt inzwischen von mobilen Geräten. Dieser Anteil steigt seit Jahren und wächst weiter. Landet ein Besucher mit dem Smartphone auf deiner Seite und findet zu kleinen Text, Bilder, die über den Bildschirm hinausragen, oder ein Navigationsmenü, das auf Tippen nicht reagiert, bleibt er mit geringer Wahrscheinlichkeit. Eine hohe Absprungrate auf dem Smartphone ist oft das erste messbare Zeichen, dass etwas nicht stimmt. Viele Markeninhaber bringen beides erst in Verbindung, wenn sie ihre Analytics prüfen.
Das Frustrierende: Darstellungsprobleme auf dem Smartphone fallen in der Desktop-Ansicht, in der du deine Seite verwaltest, nicht immer auf. Sie zeigen sich oft erst auf dem echten Smartphone-Bildschirm. Deshalb bleiben sie womöglich Wochen oder Monate unbemerkt, während Besucher leise abspringen.
Warum sieht eine Website mobil kaputt aus?
Für eine mobil kaputte Website gibt es nicht die eine Ursache. Meist steckt eines von fünf grundlegenden Problemen dahinter, manchmal auch eine Kombination. Welche Lösung passt, hängt davon ab, welche Ursache deine Seite betrifft.
Die Seite wurde nicht responsiv gebaut
Eine responsive Website passt ihr Layout automatisch an die Breite des Bildschirms an. Am Desktop erscheinen Inhalte vielleicht in drei Spalten, am Tablet in zwei, am Smartphone in einer einzigen scrollbaren Spalte. Diese Anpassung geschieht über CSS-Regeln, sogenannte Media Queries, die dem Browser sagen, wie er Inhalte bei verschiedenen Bildschirmgrössen anordnet.
Wurde eine Seite ohne responsives Design gebaut, zeigt sie unabhängig von der Bildschirmgrösse immer dasselbe feste Layout. Eine Seite, die für einen Desktop-Monitor mit 1.440 Pixeln Breite gestaltet wurde, versucht, sich auf einem Smartphone-Bildschirm mit rund 390 Pixeln Breite in dieser Breite darzustellen. Das Ergebnis ist eine verkleinerte, herausgezoomte Seite, auf der der Text unlesbar ist und Buttons zu klein zum Antippen sind. Der Inhalt ist technisch da, aber nicht nutzbar.
Ältere Seiten, vor allem solche, die mit Drag-and-drop-Editoren gebaut wurden, die die mobile Ausgabe nicht priorisierten, haben dieses Problem oft. Auch Seiten, die individuell programmiert wurden, ohne an Mobile-first zu denken, können dazugehören.
Bilder sind nicht für mobile Bildschirme dimensioniert
Ein Bild, das mit 3.000 Pixeln Breite hochgeladen und ohne Begrenzung angezeigt wird, versucht, in voller Grösse darzustellen, egal wo es betrachtet wird. Am Desktop kann der Browser es verkleinern. Auf einem Mobilgerät ohne responsive Grössenregeln kann das Bild über den Bildschirmrand hinausragen und horizontales Scrollen oder ein zusammenbrechendes Layout verursachen.
Auch wenn Bilder nicht überlaufen, beeinflussen grosse, nicht optimierte Bilder warum die Website-Geschwindigkeit wichtig ist auf dem Smartphone. Ein langsam ladendes Bild, das den Rest der Seite am Erscheinen hindert, ist eine Form von kaputtem Verhalten, auch wenn das Layout technisch hält. Besucher mit mobiler Verbindung reagieren darauf besonders empfindlich.
Elemente mit fester Breite laufen über den Bildschirm
Elemente mit fester Breite sind Container, Divs, Tabellen oder andere HTML-Elemente, denen im Stylesheet eine bestimmte Pixelbreite statt eines Prozentwerts oder einer flexiblen Einheit zugewiesen wurde. Ein Container mit 900 Pixeln Breite wird am Desktop richtig angezeigt, ragt aber auf dem Smartphone über den Bildschirmrand hinaus, sodass Nutzer horizontal scrollen müssen, um den ganzen Inhalt zu sehen. Horizontales Scrollen auf einer Website ist fast immer ein Zeichen für ein Überlaufproblem durch feste Breiten.
Tabellen sind ein häufiger Übeltäter. Eine Preistabelle oder Vergleichstabelle, die in HTML mit festen Spalten gebaut wurde, kann mobil dramatisch zusammenbrechen, sodass sich der Text unlesbar stapelt. Dasselbe gilt für Seitenleisten, eingebettete Widgets und jedes Element mit einer festen Pixelbreite, die den verfügbaren Platz auf dem Smartphone übersteigt.
Schriftgrössen sind zu klein, um ohne Zoomen lesbar zu sein
Text, der am Desktop mit 14 Pixeln gut lesbar ist, kann auf dem Smartphone unlesbar werden, besonders auf Displays mit hoher Pixeldichte, bei denen die physische Pixelzahl viel höher ist als die logische Anzeigegrösse. Muss ein Besucher zoomen, um deine Inhalte zu lesen, ist das Erlebnis kaputt, auch wenn das Layout technisch intakt ist.
Als Mindestschriftgrösse für Fliesstext auf dem Smartphone werden 16 Pixel empfohlen. Alles darunter ist auf einem grossen Teil der Geräte womöglich nicht gut lesbar. Kleinerer Text signalisiert Suchmaschinen ausserdem, dass die Seite nicht für mobile Geräte optimiert ist, was sich auf Ranking und Indexierung auswirken kann.
Die Navigation bricht schlecht zusammen oder funktioniert per Touch nicht
Navigationsmenüs für den Desktop sind oft als horizontale Leisten mit Dropdown-Einträgen gebaut, die beim Darüberfahren erscheinen. Auf einem Touchscreen gibt es kein Darüberfahren. Ein Menü, das davon abhängt, funktioniert auf dem Smartphone schlicht nicht. Besucher tippen auf den Menüpunkt, und nichts passiert, oder sie landen auf der falschen Seite, weil der Hover-Zustand, der ein Untermenü zeigen sollte, nie aktiviert wird.
Auch eine Navigation, die technisch per Touch funktioniert, kann in der Praxis kaputt sein, wenn die Tippflächen zu klein sind oder zu nah beieinanderliegen. Als Richtwert für mobile Tippflächen gelten mindestens 44 mal 44 Pixel. Kleinere Flächen führen zu Fehltipps, versehentlicher Navigation und frustrierten Besuchern, die lieber gehen, als zu finden, wofür sie gekommen sind.
So prüfst du, ob deine Website mobilfreundlich ist
Am schnellsten prüfst du das, indem du deine Seite auf einem echten Smartphone öffnest. Nutze dein eigenes Gerät und wenn möglich auch eine andere Marke und ein anderes Modell. Was auf einem Smartphone gut aussieht, kann auf einem anderen anders dargestellt werden, wegen Unterschieden bei Bildschirmauflösung, Rendering-Engine des Browsers und Betriebssystemversion.
Die Entwicklertools des Browsers bieten eine integrierte Mobilsimulation. In den meisten Desktop-Browsern öffnet F12 das Entwicklerpanel. Über ein Geräte-Symbol in der Werkzeugleiste kannst du verschiedene Bildschirmgrössen und Gerätetypen simulieren. Das ist praktisch für schnelle Checks, ersetzt aber keinen Test auf echter Hardware, weil simulierte Umgebungen das tatsächliche Touch-Verhalten, die Schriftdarstellung und die Netzwerkbedingungen nicht nachbilden.
Der Test auf Mobilfreundlichkeit von Google, verfügbar über die Google Search Console, prüft deine Seiten und meldet konkrete Probleme bei der mobilen Bedienbarkeit. Er erkennt Probleme wie zu kleinen Text, zu eng beieinanderliegende klickbare Elemente und Inhalte, die nicht in den Viewport passen. Der Bericht liefert Details pro Seite, sodass du siehst, welche Seiten durchfallen und welche bestehen.
Ein Blick in deine Analytics-Daten ergänzt das technische Bild um eine Verhaltensebene. Liegt deine Absprungrate auf dem Smartphone deutlich über der am Desktop, weist dieser Abstand oft auf ein Darstellungs- oder Bedienungsproblem auf dem Smartphone hin. Der Artikel über hohe Absprungrate auf dem Smartphone erklärt, wie du diese Signale liest und warum Besucher auf kleineren Bildschirmen sofort gehen.
So reparierst du eine Website, die mobil kaputt aussieht
Die richtige Lösung hängt davon ab, welche Ursache das Problem auslöst. Für jede der fünf Ursachen oben gibt es eine passende Lösung.
Wechsle zu einem responsiven Layout
Ist die Seite gar nicht responsiv, besteht die Lösung darin, sie auf einem responsiven Framework neu zu bauen oder zu einer Plattform zu wechseln, die standardmässig responsives HTML ausgibt. Responsives Verhalten nachträglich in eine nicht responsive Seite einzubauen ist möglich, aber oft aufwendiger, als von einer responsiven Basis neu zu starten. Läuft die Seite auf einer modernen Plattform, die responsive Themes oder Vorlagen unterstützt, ist der Wechsel zu einer responsiven Vorlage meist der schnellere Weg.
Passe Bilder an und begrenze sie
Bilder solltest du in der tatsächlich benötigten Anzeigegrösse hochladen, nicht in der ursprünglichen Exportauflösung. Für die meisten Website-Bilder reicht eine maximale Breite von 1.200 Pixeln für Displays mit hoher Pixeldichte, und die Dateigrössen bleiben handhabbar. CSS-Regeln, die max-width: 100% für Bilder setzen, stellen sicher, dass sie unabhängig von der Bildschirmbreite nie aus ihrem Container herausragen. Diese eine Regel löst die meisten Probleme mit überlaufenden Bildern, ohne dass du einzelne Bilder anpassen musst.
Ersetze feste Breiten durch flexible Einheiten
Feste Pixelbreiten bei Containern, Tabellen und anderen Layout-Elementen solltest du durch prozentuale Breiten oder flexible CSS-Einheiten wie em, remoder vwersetzen. Ein Container mit width: 90% statt width: 900px skaliert bei jeder Bildschirmgrösse passend. Bei Tabellen verhindert eine CSS-Regel, die Tabellen innerhalb ihres Containers horizontal scrollbar macht, dass sie auf schmalen Bildschirmen das gesamte Layout sprengen.
Vergrössere Schriftgrössen für mobile Geräte
Fliesstext sollte auf dem Smartphone mindestens 16 Pixel gross sein. Definiert das Desktop-Stylesheet eine kleinere Grösse, kann eine Media Query für mobile Bildschirmbreiten sie überschreiben. Prüfe auch die Grösse der Überschriften: Viele Überschriftenstile, die am Desktop stimmig wirken, werden auf dem Smartphone viel zu gross und schieben andere Inhalte unter den sichtbaren Bereich, bevor der Besucher etwas gelesen hat.
Ersetze Hover-Navigation durch ein mobiles Menü
Die Standardlösung für mobile Navigation ist ein einklappbares Menü, oft Hamburger-Menü genannt, das per Tippen statt per Hover geöffnet wird. Die meisten responsiven Frameworks und Website-Builder bringen dieses Muster von Haus aus mit. Hat die Navigation deiner Seite keine mobile Entsprechung, musst du dafür das Stylesheet und JavaScript anpassen oder zu einem Theme wechseln, das mobile Navigation von Haus aus enthält. Prüfe auch die Grösse der Tippflächen, damit alle Menüpunkte den Richtwert von mindestens 44 Pixeln erfüllen.
Wenn deine Seite neben Darstellungsproblemen auch defekte Seiten hat, ist es oft einfacher, zuerst das visuelle Layout zu reparieren, damit du beim Audit leichter zu jeder Seite navigieren und sie testen kannst.
So geht WEMASY mit mobilen Geräten um
Der Website-Builder von WEMASY erzeugt auf jeder Seite responsives HTML, ohne dass du etwas konfigurieren musst. Layouts ordnen sich auf mobilen Bildschirmgrössen automatisch neu an, Bilder bleiben in ihren Containern, und die Navigation wechselt auf Smartphones und Tablets zu einem touchfreundlichen Menü. Schriftgrössen, Tippflächen und Abstände sind im Designsystem der Plattform so gesetzt, dass sie die Standards für mobile Bedienbarkeit erfüllen. Wer mit WEMASY startet, hat also von Anfang an eine mobilfähige Seite und muss sie nicht nachträglich umbauen.
Sieh dir an, was enthalten ist, beim WEMASY Website-Builder oder wirf einen Blick auf die verfügbaren Tarife auf der Preisseite.
Häufig gestellte Fragen
Warum sieht meine Website am Desktop gut aus, aber auf dem Smartphone kaputt?
Meist liegt es daran, dass die Seite hauptsächlich für die Desktop-Ansicht gebaut oder gestaltet wurde, ohne responsive CSS-Regeln, die das Layout an kleinere Bildschirme anpassen. Der Desktop-Browser hat genug Breite, um das feste Layout wie gedacht darzustellen. Ein Smartphone-Bildschirm nicht, also laufen Elemente über, überlappen sich oder werden so klein, dass sie unlesbar sind. Am schnellsten siehst du, was mobile Besucher erleben, wenn du die Seite im Mobilsimulationsmodus eines Browsers oder auf einem echten Gerät prüfst. Mit dem Website-Builder von WEMASY richtest du das direkt auf deiner Website ein.
Beeinflusst ein kaputtes mobiles Layout mein Google-Ranking?
Ja. Google nutzt Mobile-first-Indexierung, das heisst, die mobile Version einer Seite ist das, was Google hauptsächlich für das Ranking bewertet. Eine Seite mit Darstellungsproblemen auf dem Smartphone, kleinem Text oder Inhalten, die über den Viewport hinausragen, bekommt schlechtere Bewertungen bei der Bedienbarkeit, was in die gesamte Suchleistung einfliesst. Mobile Probleme zu beheben verbessert die Nutzererfahrung und hilft zugleich dem SEO.
Was verursacht horizontales Scrollen auf einer mobilen Website?
Horizontales Scrollen auf dem Smartphone deutet fast immer auf ein Element mit fester Pixelbreite hin, das breiter ist als der Smartphone-Bildschirm. Häufige Übeltäter sind Tabellen, Seitenleisten, eingebettete Inhalte, Bilder ohne Breitenbegrenzung und Container mit einer festen Pixelbreite statt einem Prozentwert. Du findest das überlaufende Element in den Entwicklertools des Browsers und ersetzt dann die feste Breite durch einen Prozentwert oder fügst dem übergeordneten Container Overflow-Regeln hinzu. Meist ist das Problem damit gelöst.
Wie teste ich, ob meine Website mobilfreundlich ist?
Öffne die Seite auf einem echten Smartphone und scrolle durch jede wichtige Seite. Öffne sie dann in den Entwicklertools eines Desktop-Browsers und nutze den Gerätesimulationsmodus, um sie in mehreren Bildschirmbreiten anzusehen. Für ein strukturiertes Audit lässt du die Seiten durch den Bericht zur mobilen Bedienbarkeit der Google Search Console laufen. Er meldet konkrete Probleme wie zu kleinen Text, zu eng beieinanderliegende klickbare Elemente und Probleme bei der Viewport-Konfiguration. Beide Wege zusammen ergeben das vollständigste Bild.
Kann ich eine mobil kaputte Website reparieren, ohne alles neu zu bauen?
Das hängt davon ab, wie die Seite ursprünglich gebaut wurde. Läuft sie auf einer Plattform, die responsive Themes unterstützt, ist der Wechsel zu einem responsiven Theme oft die schnellste Lösung und erfordert keinen kompletten Neuaufbau der Inhalte. Ist die Seite individuell programmiert und hat ein nicht responsives Layout, können gezielte CSS-Änderungen mit Media Queries einzelne Probleme lösen, ohne alles neu zu bauen. Basiert das Layout aber auf Tabellen oder verlässt sich durchgehend auf feste Breiten, ist ein kompletter Neuaufbau auf responsiver Grundlage meist effizienter, als einzelne Probleme zu flicken.
Warum verlassen Besucher meine Website auf dem Smartphone nach wenigen Sekunden?
Landen Besucher auf einer Seite mit Darstellungsproblemen, unlesbarem Text, kaputter Navigation oder langsam ladenden Bildern, gehen sie schnell, weil die Seite ihre grundlegenden Erwartungen an die Bedienbarkeit nicht erfüllt. Mobile Besucher haben weniger Geduld mit Hürden als Besucher am Desktop. Ist das Layout kaputt oder langsam, kehren sie zu den Suchergebnissen zurück und klicken stattdessen auf ein anderes Ergebnis. Der Artikel über Besucher, die deine Website verlassen behandelt alle Gründe, warum Menschen schnell gehen, und wie du herausfindest, welcher deine Seite betrifft.