Über 60 Prozent des gesamten Web-Traffics kommen heute von Mobilgeräten. Eine Website, die nicht mobilfreundlich ist, enttäuscht die meisten ihrer Besucher, das ist kein seltener Randfall. Mobil richtig hinzubekommen ist kein Bonus. Es ist die Grundlage, die man von einer Unternehmenswebsite erwartet.
Eine Website mobilfreundlich zu machen heißt, mobilen Besuchern dieselbe Qualität zu bieten wie Desktop-Besuchern. Keine abgespeckte Version, die zwar irgendwie lädt, sondern eine Seite, auf der der Text lesbar ist, die Navigation funktioniert, die Bilder richtig angezeigt werden und sich Formulare vom Handy aus ohne Ärger abschicken lassen.
Dieser Artikel zeigt die praktischen Änderungen, die eine Website wirklich mobilfreundlich machen, von Navigation und Text über Bilder und Formulare bis zum Tempo.
Was heißt mobilfreundlich in der Praxis?
Eine mobilfreundliche Website ist eine, bei der jede Funktion auf dem Handy richtig funktioniert, ohne dass du Umwege brauchst. Text ist bei Standard-Zoom lesbar. Navigation öffnet und schließt sich sauber. Buttons sind groß genug, um sie zu treffen, ohne das falsche Element zu erwischen. Bilder laden und werden richtig angezeigt. Formulare lassen sich ohne Frust ausfüllen und abschicken.
Der Unterschied zwischen technisch mobilkompatibel und wirklich mobilfreundlich ist wichtig. Technisch kompatibel ist eine Seite, wenn sie auf dem Handy nicht kaputtgeht. Wirklich freundlich ist sie, wenn sich die Nutzung auf dem Handy so natürlich anfühlt wie am Desktop. Der Unterschied steckt im Detail. Abstände, Schriftgröße, Größe der Tippflächen und Ladezeit entscheiden, ob sich das Erlebnis richtig anfühlt oder gerade so funktioniert.
Die Grundlage einer mobilfreundlichen Website ist Responsive Design, bei dem sich das Layout automatisch an verschiedene Bildschirmgrößen anpasst. Der Artikel was Responsive Design ist erklärt, wie das technisch funktioniert.
Wie testest du, ob deine Website mobilfreundlich ist?
Am zuverlässigsten gehst du deine eigene Seite auf einem echten Handy durch. Nicht in der mobilen Vorschau eines Browsers. Nicht in einem auf eine schmale Spalte verkleinerten Desktop-Fenster. Auf einem echten Handy, mit deinen Daumen, so wie ein Besucher es nutzen würde.
Geh jede Seite durch. Öffne die Navigation und prüfe, ob jeder Link erreichbar ist. Lies den Text und prüfe, ob er ohne Zoomen lesbar ist. Tippe jeden Button an und prüfe, ob er richtig reagiert. Fülle Formulare aus und schicke sie ab. Prüfe, ob Bilder laden und richtig angezeigt werden. Prüfe, ob nichts seitliches Scrollen erfordert.
Suchmaschinen bieten außerdem kostenlose Tools für Mobiltests. Du gibst deine URL ein, und das Tool zeigt konkrete Probleme an, etwa zu kleinen Text, anklickbare Elemente, die zu dicht beieinander liegen, oder Inhalte, die breiter sind als der Bildschirm. Was du vor dem Launch noch prüfen solltest, steht in was du vor dem Launch deiner Website wissen solltest. Dort ist der Mobiltest Teil des gesamten Prozesses vor dem Start.
Wie bekommst du die Navigation mobil zum Laufen?
Bei der Navigation scheitert das mobile Erlebnis am häufigsten. Ein waagerechtes Menü, das sich über einen ganzen Desktop-Monitor erstreckt, hat auf einem Handy-Bildschirm keinen Platz. Die übliche Lösung ist ein einklappbares Menü, das ein Button auslöst, meist in der oberen Ecke.
Der Menü-Button muss sofort erkennbar sein. Das Symbol mit den drei Strichen ist zu einer weithin verstandenen Konvention für eingeklappte Navigationsmenüs geworden. Öffnet sich das Menü, sollte es genug vom Bildschirm einnehmen, um gut lesbar und leicht antippbar zu sein. Die Einträge brauchen genug Abstand nach oben und unten, damit ein Finger einen trifft, ohne den darüber oder darunter zu erwischen.
Halte das mobile Menü kurz. Hat deine Desktop-Navigation viele Einträge, überlege, welche mobile Besucher am ehesten brauchen und ob sich Nebenpunkte bündeln oder von der obersten Ebene entfernen lassen. Ein aufgeräumteres mobiles Menü ist einfacher zu bedienen. Der Artikel was Website-Navigation ist behandelt Navigationsstruktur und Usability auf allen Geräten.
Wie sollten Text und Schriften mobil aussehen?
Text, der am Desktop gut lesbar ist, kann auf dem Handy unangenehm klein werden, wenn die Schriftgröße zu niedrig eingestellt ist. Eine Mindestgröße von 16 Pixeln für den Fließtext gilt als verbreiteter Standard für mobile Lesbarkeit. Darunter musst du zoomen, und das tun die meisten Besucher nicht.
Auch die Zeilenlänge spielt eine Rolle. Am Desktop kann eine Textzeile 600 bis 700 Pixel breit sein. Mobil bricht derselbe Text in deutlich kürzere Zeilen um. Ist der Zeilenabstand zu eng oder sind Absätze zu lang, wird Lesen auf einem kleinen Bildschirm unbequem. Kurze Absätze, großzügiger Zeilenabstand und klare Abstände zwischen Abschnitten verbessern die Lesbarkeit.
Überschriften sollten proportional kleiner werden. Eine H1 mit 48 Pixeln am Desktop passt mobil vielleicht mit 28 bis 32 Pixeln. Bleiben Überschriften auf dem Handy in Desktop-Größe, dominieren sie den Bildschirm und schieben den eigentlichen Inhalt unter den sichtbaren Bereich.
Wie gehst du mit Bildern auf dem Handy um?
Bilder sind eines der größten Performance-Risiken mobil. Ein Bild in voller Auflösung, gemacht für einen Desktop-Monitor mit 1440 Pixeln, ist auf einem Handy-Bildschirm mit 375 Pixeln viel größer als nötig. Dieses Bild an mobile Besucher auszuliefern verschwendet Bandbreite und bremst die Seite deutlich.
Die Lösung: Jedem Gerät passend große Bilder ausliefern. Die meisten modernen Website-Builder machen das automatisch, indem sie mehrere Größen erzeugen und je nach Bildschirm die richtige ausliefern. Verwaltest du Bilder von Hand, verkleinere sie auf die größte Größe, in der sie angezeigt werden, nicht auf die größte, die deine Kamera liefert.
Achte darauf, wie Bilder mobil zugeschnitten werden. Ein breites Querformat, das am Desktop ausgewogen wirkt, kann auf einem hohen Handy-Bildschirm unglücklich beschnitten werden. Hero-Bilder und Banner-Bereiche sind die häufigsten Stellen, an denen Desktop- und Mobil-Ausschnitt sichtbar auseinandergehen. Der Artikel was Website-Geschwindigkeit ist erklärt, wie sich Bildoptimierung auf die gesamte Seitenleistung auswirkt.
Was macht Formulare mobil gut bedienbar?
Formulare sind mobil ein Reibungspunkt. Felder mit einer kleinen Touch-Tastatur auszufüllen ist anstrengender als Tippen auf einer vollen Tastatur. Je weniger Felder, desto besser. Jedes zusätzliche Feld ist eine Gelegenheit für Frust und ein Grund abzubrechen.
Die Größe der Eingabefelder zählt. Felder müssen groß genug sein, um sie genau zu treffen, und breit genug, damit der Text darin lesbar ist. Beschriftungen gehören über jedes Feld, nicht nur als Platzhaltertext hinein, denn Platzhaltertext verschwindet, sobald jemand zu tippen beginnt.
Setze die Eingabetypen richtig. Ein E-Mail-Feld sollte die E-Mail-Tastatur auslösen. Ein Telefonnummernfeld sollte das Zahlenfeld öffnen. Ein Datumsfeld sollte eine Datumsauswahl öffnen. Das sind kleine technische Einstellungen, die das Erlebnis spürbar flüssiger machen.
Teste jedes Formular auf deinem Handy: Fülle es komplett aus und schicke es ab. Prüfe, ob das Absenden klappt und die Bestätigung richtig erscheint. Ein Kontaktformular, das am Desktop funktioniert, mobil aber scheitert, kostet dich unbemerkt Anfragen.
Wie beeinflusst Mobilfreundlichkeit die Suchrankings?
Suchmaschinen indexieren zuerst die mobile Version deiner Website. Das heißt: Das mobile Erlebnis ist nicht nur für mobile Besucher wichtig. Es ist die Version, die darüber entscheidet, wie deine Seite auf allen Geräten verstanden und eingestuft wird.
Eine Seite, die mobil schlecht abschneidet, sei es wegen langer Ladezeiten, kaputter Layouts oder unlesbarem Text, rankt hinter vergleichbaren Seiten, die mobil gut funktionieren. Besucher, die auf einer mobilen Seite landen und sofort gehen, weil sie nicht funktioniert, zeigen deutlich, dass die Seite ihre Bedürfnisse nicht erfüllt hat. Hohe Absprungraten mobiler Besucher wirken sich mit der Zeit auf das Ranking aus.
Die Seitengeschwindigkeit mobil ist ein eigener Faktor. Eine Seite, die über schnelles Breitband in zwei Sekunden lädt, braucht über eine typische Mobilfunkverbindung vielleicht sechs Sekunden oder mehr. Optimierte Bilder, wenige blockierende Skripte und eine saubere Template-Struktur tragen zu schnelleren mobilen Ladezeiten bei. Einen Überblick über Suchmaschinenoptimierung samt technischer Faktoren gibt was SEO ist.
So geht WEMASY mit mobilen Geräten um
Der Website-Builder von WEMASY nutzt responsive Templates, die sich automatisch an Desktop, Tablet und Handy anpassen. Der visuelle Editor enthält eine mobile Vorschau, damit du beim Bauen prüfen kannst, wie jeder Bereich auf einem kleinen Bildschirm aussieht. Bildoptimierung und mobile Performance übernimmt die Plattform, du musst nichts von Hand einstellen.
Was enthalten ist, siehst du beim Website-Builder von WEMASY, und die Tarife findest du auf der Preisseite.
Häufige Fragen
Woher weiß ich, ob meine Website mobilfreundlich ist?
Geh deine Seite auf einem echten Handy durch. Teste jede Seite, jeden Navigationspunkt, jedes Formular und jeden Button. Suchmaschinen bieten außerdem kostenlose Tools für Mobiltests, in die du deine URL eingibst und die konkrete Probleme anzeigen. Mit einem Rundgang von Hand und einer Prüfung per Tool findest du die Probleme, auf die es am meisten ankommt. Mobile Vorschauen im Browser helfen bei der Entwicklung, bilden das Erlebnis auf einem echten Gerät aber nicht vollständig nach. Mit dem Website-Builder von WEMASY richtest du das direkt auf deiner Website ein.
Kann ich eine bestehende Website mobilfreundlich machen, ohne sie neu zu bauen?
Das hängt davon ab, wie die Seite gebaut wurde. Bei Seiten, die mit modernen Website-Buildern entstanden sind, lässt sich das mobile Erlebnis oft verbessern, indem du Template-Einstellungen anpasst, Bilder verkleinerst oder zu einem besseren Template wechselst. Seiten mit eigenem Code oder auf älteren Plattformen brauchen eventuell mehr Arbeit. Manchmal geht ein Neubau auf einer aktuellen Plattform schneller und liefert ein besseres Ergebnis, als eine ältere Seite zurechtzuflicken.
Rankt eine mobilfreundliche Website höher in den Suchergebnissen?
Suchmaschinen nutzen die mobile Version deiner Seite als Hauptversion für Indexierung und Ranking. Eine Seite, die mobil gut funktioniert und auf dem Handy schnell lädt, schneidet in der Regel besser ab als eine, die vor allem für den Desktop gebaut ist. Über das Ranking hinaus hält eine mobilfreundliche Seite Besucher länger, senkt die Absprungrate und konvertiert besser. Auch diese Verhaltenssignale wirken sich langfristig auf die Suchleistung aus.
Was ist die Mindestschriftgröße für eine mobile Website?
Eine Schriftgröße von 16 Pixeln für den Fließtext gilt weithin als empfohlenes Minimum für mobile Lesbarkeit. Darunter ist Text ohne Zoomen schwer zu lesen. Überschriften sollten proportional skalieren, damit sie den Bildschirm nicht erdrücken. Ein Zeilenabstand von mindestens dem 1,5-Fachen der Schriftgröße verbessert die Lesbarkeit auf kleinen Bildschirmen, besonders bei längeren Absätzen.
Wie groß sollten Buttons auf einer mobilen Website sein?
Für mobile Buttons wird weithin eine Mindestgröße der Tippfläche von 44 mal 44 Pixeln empfohlen. Das gibt dem Finger ein klares Ziel und verringert versehentliches Antippen benachbarter Elemente. Zwischen den Buttons sollte außerdem genug Platz sein, damit ein Tipp nicht als Tipp auf etwas Benachbartes zählt. Call-to-Action-Buttons sollten groß, optisch klar abgesetzt und mit dem Daumen gut erreichbar sein, ohne das Handy umgreifen zu müssen.