Website mobil optimieren

Die meisten Besucher kommen heute übers Handy, oft unterwegs und mit halber Aufmerksamkeit. Wenn die Seite dort hakt, ist der Rest fast egal, weil die Leute gar nicht erst bis zu Ihrem Angebot kommen. Dieser Ratgeber erklärt, worauf es mobil ankommt, und am Ende prüfen Sie Ihre eigene Seite mit acht konkreten Punkten.

Warum Mobiloptimierung zählt

Was Google mit mobil-first meint

Google schaut sich zum Bewerten und Einsortieren einer Seite vor allem die mobile Version an, nicht die Desktop-Fassung. Das nennt sich Mobile-First-Index und ist seit Jahren der Normalfall. Praktisch heißt das: Lässt Ihre Seite auf dem Handy Inhalte weg, lädt sie langsam oder ist sie schwer bedienbar, wirkt sich das direkt darauf aus, wie gut Sie gefunden werden. Eine Seite, die nur am Schreibtisch überzeugt, mobil aber schwächelt, verschenkt Sichtbarkeit, obwohl die Inhalte da wären.

Reicht es, die Seite einfach kleiner zu machen?

Nein, und das ist der häufigste Irrtum. Eine geschrumpfte Desktop-Seite ist nicht mobil optimiert, sie ist nur kleiner. Die Schrift wird unlesbar, Buttons rücken zusammen, und der Inhalt, der am Monitor nebeneinander stand, quetscht sich untereinander. Mobiloptimierung heißt, die Seite für den kleinen Bildschirm neu zu ordnen: das Wichtigste nach oben, klare Abstände, große Ziele für den Finger. Es geht um Reihenfolge und Bedienung, nicht nur um die Größe.

Responsive oder adaptiv: der Unterschied

Zwei Wege führen zur mobilen Seite. Responsives Design nutzt ein einziges, flexibles Layout, das sich stufenlos an jede Bildschirmbreite anpasst; adaptives Design hält mehrere feste Layouts bereit und wählt je nach Gerät eines aus. Für die meisten Unternehmensseiten ist responsiv der ruhigere Weg: eine Seite, ein Pflegestand, saubere Darstellung vom kleinen Handy bis zum großen Monitor.

Responsiv ist die Grundlage, aber nicht schon die ganze Miete. Eine Seite kann sich technisch anpassen und trotzdem mobil unangenehm sein, wenn die Schrift zu klein ist oder Bilder das Netz ausbremsen.

Was auf dem Handy wirklich anders sein muss

Am Smartphone zählen andere Dinge als am Schreibtisch. Diese vier machen den größten Unterschied:

• Lesbare Schrift ohne Zoomen, damit niemand die Finger auseinanderziehen muss, um einen Satz zu lesen.
• Buttons und Links, die der Daumen sicher trifft, mit genug Abstand zum Nachbarn.
• Das Wichtigste zuerst: Kernaussage und ein Kontaktweg stehen im Bild, noch vor dem ersten Scrollen.
• Kurze Ladezeit im Mobilfunknetz, also schlanke Bilder und wenig unnötiger Code.

Klingt selbstverständlich, wird aber oft übersehen, weil die Seite am großen Bildschirm gebaut und geprüft wird, wo all das leicht passt.

Die immer gleichen Stolpersteine

Quer durch Branchen wiederholen sich dieselben Fehler. Schrift, die am großen Monitor gut aussah, zwingt mobil zum Zoomen. Buttons liegen so dicht, dass der Daumen den falschen trifft. Eine Preistabelle läuft rechts aus dem Bild, und man muss quer scrollen. Ein Popup legt sich über die halbe Seite und lässt sich mit dicken Fingern kaum wegtippen. Und die Telefonnummer steht bloß als Text da, statt beim Antippen den Anruf zu starten. Am Schreibtisch fällt nichts davon auf, weil dort alles genug Platz hat; auf dem Handy kostet jeder dieser Punkte Besucher.

Ladezeit: warum sie mobil besonders zählt

Am Schreibtisch hängt der Rechner meist an einer schnellen Leitung. Unterwegs sieht das anders aus: schwankendes Netz, ältere Geräte, ein Tarif mit Grenze. Lädt eine Seite dort zu langsam, sind viele Besucher wieder weg, bevor überhaupt etwas zu sehen ist. Der größte Hebel sind fast immer die Bilder: zu groß gespeichert, im falschen Format, alle auf einmal geladen. Dazu kommt Code, der im Hintergrund arbeitet, ohne dass der Besucher etwas davon hat. Schlanke Bilder, moderne Formate und wenig Ballast entscheiden, ob die Seite sofort da ist oder ob man sie wegklickt.

Lesbar für alle, nicht nur für gute Augen

Mobil optimiert heißt auch barrierearm. Auf dem kleinen Bildschirm lesen Menschen mit Brille, bei Sonnenlicht draußen oder mit nur einer freien Hand am Kinderwagen. Genug Kontrast zwischen Text und Hintergrund, ausreichend große Schrift und Bedienelemente, die man sicher trifft, helfen dann allen, nicht nur einer Randgruppe. Die aktuellen Web-Richtlinien, die WCAG 2.2, nennen dafür konkrete Mindestmaße, etwa für die Größe von Tippzielen und für den Farbkontrast. Wir halten uns daran, weil eine Seite, die auch unter schwierigen Bedingungen funktioniert, unter guten erst recht überzeugt. Nebenbei bewertet Google eine sauber bedienbare Seite besser, sodass Barrierefreiheit und Sichtbarkeit in dieselbe Richtung ziehen. Google bewertet Seiten inzwischen zuerst in ihrer Handy-Fassung (Mobile-First-Index), weshalb eine mobil kaputte Darstellung sogar dahinterstecken kann, wenn eine Website bei Google nicht gefunden wird.

Selbsttest: Ist Ihre Seite mobil fit?

Nehmen Sie Ihr Handy und gehen Sie die acht Punkte durch. Jeder Haken steht für etwas, das Besucher sofort merken.

Für eine technische Zweitmeinung nutzen Sie den PageSpeed-Test von Google. Er misst Ladezeit und mobile Nutzbarkeit und benennt konkret, was bremst.

So bauen wir mobil-first

Wir bauen jede Seite vom kleinen Bildschirm aus. Erst wenn sie auf dem Handy sauber funktioniert, kommt der große Monitor dazu, nicht umgekehrt. Geprüft wird auf echten Geräten, nicht nur im verkleinerten Browserfenster, weil sich manche Probleme erst am Handy in der Hand zeigen. In der kostenlosen Vorschau sehen Sie das Ergebnis innerhalb von 24 Stunden und vergleichen es direkt mit Ihrer jetzigen Seite. Damit die mobile Darstellung dauerhaft stimmt, halten wir sie über die Website-Wartung ab 29 €/Monat aktuell. Bricht die Seite mobil so grundlegend, dass Nachbessern nicht mehr reicht, ist der ehrlichere Weg, die Website neu zu machen; wie das preislich aussieht, steht bei den Festpreis-Paketen.