Website · 10 Min. Lesezeit

Was ist eine mobilfreundliche Website? Responsive Design und Mobiltest

Die meisten Ihrer Kunden öffnen Ihre Website auf dem Handy. Eine Seite, deren Text man nicht lesen, deren Buttons man nicht antippen kann oder die auf dem Handy langsam lädt, verliert Kunden, so schön sie auch gestaltet ist.

Kurz gesagt

• Eine mobilfreundliche Website zeigt auf Handy, Tablet und Computer denselben Inhalt, passend zur Bildschirmgröße angeordnet, damit er leicht lesbar und bedienbar ist.
• Am häufigsten wird heute Responsive Design eingesetzt: eine Website, eine Adresse und ein Layout, das sich mit der Bildschirmbreite ändert.
• Google nutzt für Indexierung und Ranking in erster Linie die mobile Version einer Seite; was mobil fehlt, fehlt auch in der Suche.
• Ein guter Einstieg in den Mobiltest: auf einem echten Handy surfen, den Gerätemodus des Browsers nutzen und das Mobil-Ergebnis von PageSpeed Insights prüfen.
• Heyşirket-Themes sind responsiv; im Bildschirm „Anpassen“ sehen Sie Ihre Website in der Handy- und Tablet-Ansicht, und im Professional-Tarif verfolgen Sie unter SEO › Geschwindigkeit Ihren Handy-Speed-Wert.

Wenn Sie Ihre Website am Computer öffnen, sitzt alles an seinem Platz. Ein Kunde öffnet dieselbe Seite aber auf dem Handy: Das Menü passt nicht auf den Bildschirm, der Text ist winzig, und ein Tipp auf die Telefonnummer bewirkt nichts. Zwei Sekunden später geht er zurück und wählt das nächste Suchergebnis.

In diesem Artikel erklären wir, was eine mobilfreundliche Website ist, welche Grundregeln für Responsive Design gelten, wie ein Mobiltest Schritt für Schritt abläuft und wie Sie die häufigsten Probleme auf dem Handy beheben. Im letzten Teil zeigen wir, wie Mobilfreundlichkeit bei Websites umgesetzt ist, die mit Heyşirket gebaut wurden.

Die gute Nachricht: Sie müssen Ihre Website selten neu bauen, um sie mobilfreundlich zu machen. Die meisten Probleme entstehen, weil ein paar Regeln übersehen wurden, und lassen sich mit einem halbstündigen Test finden. Wenn Sie die Checkliste in diesem Artikel einmal durchgehen, sehen Sie klar, wie sich Ihre Website auf dem Handy wirklich verhält.

Teil 1 · Definition Was ist eine mobilfreundliche Website?

Eine mobilfreundliche Website zeigt auf Handy, Tablet und Computer denselben Inhalt, passend zur Bildschirmgröße angeordnet. Auf dem Handy lässt sich der Text ohne Zoomen lesen, Buttons sind mit dem Finger leicht zu treffen, die Seite scrollt nicht seitwärts und Bilder passen auf den Bildschirm.

Dafür gibt es drei Wege. Fast alle neuen Websites nutzen heute den ersten:

Beim Responsive Design wird der Inhalt nur einmal geschrieben. Eine Leistungsliste in drei Spalten am Computer wird auf dem Tablet zu zwei und auf dem Handy zu einer Spalte. Auf schmalen Bildschirmen klappt das Menü hinter einen Button. So pflegen Sie an einer Stelle, und auf keinem Gerät fehlt etwas.

Teil 2 · Warum Warum ist Mobilfreundlichkeit so wichtig?

Der erste Grund ist der Kunde. Wer nach einem Geschäft in der Nähe sucht, ist oft unterwegs und hat das Handy in der Hand: Er sucht eine Adresse, Öffnungszeiten, eine Telefonnummer oder einen Termin. Wenn er das auf dem Handy nicht mit zwei Tipps erreicht, wechselt er zu einer anderen Website.

Der zweite Grund ist die Suche. Google nutzt für Indexierung und Ranking in erster Linie die mobile Version einer Seite. Text oder ein Abschnitt, der am Desktop erscheint, mobil aber ausgeblendet ist, wird von Google möglicherweise weitgehend ignoriert. Mobilfreundlichkeit ist kein separater Ranking-Trick mehr, sondern eine Grundvoraussetzung jeder Website.

Der dritte Grund ist die Geschwindigkeit. Handys arbeiten oft mit einer langsameren Verbindung als Computer. Eine Seite, die am Desktop schnell aufgeht, kann auf dem Handy wegen großer Bilder sekundenlang warten lassen. Wie man die Geschwindigkeit misst, haben wir ausführlich erklärt in So messen Sie die Geschwindigkeit Ihrer Website.

Teil 3 · Regeln Welche Grundregeln gelten für Responsive Design?

Sie müssen keinen Code schreiben, um eine responsive Website zu bauen, aber auch bei einem fertigen Theme lohnt es sich zu prüfen, ob es die folgenden Regeln einhält.

Checkliste Responsive Design

• Die Seite hat ein Viewport-Tag, das die Bildschirmbreite an das Gerät anpasst.
• Das Layout basiert auf einem flexiblen Raster statt auf festen Pixelbreiten; die Seite scrollt nicht seitwärts.
• Der Fließtext ist auf dem Handy ohne Zoomen lesbar; etwa 16 px sind ein guter Anfang.
• Buttons und Links sind groß genug, um bequem mit dem Finger getippt zu werden, und stehen nicht gedrängt beieinander.
• Bilder werden je nach Bildschirmbreite in verschiedenen Größen geladen; aufs Handy wird kein riesiges Foto geschickt.
• Breite und Höhe der Bilder sind festgelegt; der Inhalt springt beim Laden der Seite nicht herum.
• Ein Tipp auf die Telefonnummer ruft an; ein Tipp auf die E-Mail-Adresse öffnet die Mail-App.
• Formulare öffnen die passende Tastatur (Zahlen für ein Telefonfeld, eine Tastatur mit @ für E-Mail).
• Es gibt keine Pop-ups, die beim Laden den Bildschirm verdecken und schwer zu schließen sind.

Kontakt und Formulare auf dem Handy

Wer auf dem Handy ist, will meist etwas tun: anrufen, den Weg finden, einen Termin oder ein Angebot anfragen. Deshalb sollten Kontaktdaten nicht als einfacher Text am Seitenende stehen, sondern als antippbare Links. Wenn die Telefonnummer als tel:-Link und die E-Mail als mailto:-Link angegeben ist, startet ein einziger Tipp einen Anruf oder eine E-Mail.

Bei Formularen geben Handy-Besucher am häufigsten auf. Halten Sie die Felder auf ein Minimum: Name, Telefon und eine kurze Nachricht reichen den meisten Unternehmen. Entfernen Sie optionale Felder, zeigen Sie Fehlermeldungen direkt unter dem Feld an und lassen Sie den Absenden-Button sichtbar, solange die Tastatur offen ist. Die Zahlentastatur für ein Telefonfeld wirkt wie ein kleines Detail, macht das Ausfüllen aber spürbar leichter.

Teil 4 · Test Wie testet man eine Website mobil?

Das alte Google-Tool „Test auf Optimierung für Mobilgeräte“ und der Bericht „Nutzerfreundlichkeit auf Mobilgeräten“ in der Search Console wurden im Dezember 2023 eingestellt. Heute gibt es keinen einzelnen Button „freundlich / nicht freundlich“ für den Mobiltest; Sie kombinieren ein paar einfache Methoden.

Mobiltest in fünf Schritten

1. Auf einem echten Handy surfen

   Öffnen Sie Ihre Website auf Ihrem eigenen Handy und gehen Sie die Startseite, eine Leistungsseite, die Kontaktseite und die Formularseite durch. Öffnen Sie das Menü, tippen Sie auf die Telefonnummer und füllen Sie das Formular einmal aus und senden Sie es ab.

2. Auf einem anderen Gerät wiederholen

   Prüfen Sie, wenn möglich, auch auf einem Handy mit kleinem Bildschirm und auf einem Tablet. Die meisten Probleme zeigen sich auf dem kleinsten Bildschirm.

3. Den Gerätemodus des Browsers nutzen

   Öffnen Sie am Computer in Chrome per Rechtsklick › Untersuchen die Entwicklertools und klicken Sie auf das Gerätesymbol. So testen Sie auf einem Bildschirm verschiedene Handybreiten.

4. Das Mobil-Ergebnis in PageSpeed Insights prüfen

   Testen Sie Ihre Seite auf pagespeed.web.dev und schauen Sie zuerst auf den Tab „Mobil“. Neben dem Leistungswert nennen auch die Bereiche Barrierefreiheit und Best Practices Probleme wie kleine Schrift oder zu eng gesetzte Buttons.

5. Die Search Console beobachten

   Der Bericht „Core Web Vitals“ in der Search Console zeigt nach Seiten gruppiert die Probleme bei Geschwindigkeit und Layoutverschiebung, die echte Nutzer auf dem Handy erleben.

Details zur Messung und zum Lesen der Werte finden Sie in den Erklärungen zu Core Web Vitals auf web.dev und in unserem Artikel So messen Sie die Geschwindigkeit Ihrer Website.

Teil 5 · Probleme Die häufigsten Probleme auf dem Handy und ihre Lösung

Teil 6 · In der Praxis Ist eine mit Heyşirket gebaute Website mobilfreundlich?

Ja. Heyşirket-Themes sind responsiv, und der technische Teil der obigen Regeln ist fest im Theme eingebaut: Seiten werden mit einem Viewport-Tag veröffentlicht, Raster fallen auf schmalen Bildschirmen auf eine Spalte zurück, und das Menü klappt hinter einen Menü-Button von mindestens 44 Pixeln Größe. Bilder werden je nach Bildschirmbreite in verschiedenen Größen ausgeliefert, ihre Breite und Höhe sind immer angegeben; das erste Bild der Seite lädt mit Priorität, die übrigen laden, wenn sie sich dem Bildschirm nähern.

• Handy-Vorschau: Unter Design › Anpassen wechseln Sie über der Vorschau zwischen den Ansichten Desktop, Tablet und Telefon. So sehen Sie vor der Veröffentlichung, wie jede Änderung auf dem Handy aussieht.
• Bildgröße: Wir empfehlen, keine Fotos über 2000 Pixel in die Medienbibliothek hochzuladen; für ältere Bilder erzeugt Größen für vorhandene Bilder erstellen kleinere Versionen.
• Einstellungen je Gerät (Professional): Sie können Abschnitte der Startseite auf einem bestimmten Gerät ausblenden und im Seiteneditor die Komponenteneinstellungen für das in der Vorschau gezeigte Gerät ändern.
• Geschwindigkeitsbericht (Professional): Unter SEO › Geschwindigkeit sehen Sie für Handy und Computer die Werte für Leistung, Barrierefreiheit, Best Practices und SEO, die Core-Web-Vitals-Werte, den Verlauf der Werte und die Verbesserungen mit dem größten Effekt.

Schritt-für-Schritt-Anleitung im Panel: Hilfe › Geschwindigkeitsbericht und Core Web Vitals. Zur Nutzung des Bildschirms „Anpassen“ lesen Sie Ihre Website mit dem Customizer gestalten, und alle SEO-Tools der einzelnen Tarife finden Sie auf der Seite SEO-Tools.

Das Theme sorgt für die Mobilfreundlichkeit; der Inhalt ist Ihre Sache. Lange Absätze, die auf dem Handy schwer lesbar sind, viel zu groß hochgeladene Fotos oder ein Pop-up, das den Bildschirm verdeckt, verderben das mobile Erlebnis auch bei einem guten Theme. Nehmen Sie eine regelmäßige Handyprüfung Ihrer Website in Ihre Website-Wartung auf.

Ihre Website in der Handy-Ansicht öffnen Wechseln Sie im Bildschirm „Anpassen“ zur Smartphone-Ansicht und prüfen Sie Menü, Text und Buttons, bevor Sie veröffentlichen. Anpassen öffnen

Autor: Heyşirket-Redaktionsteam