Mobile First im Mittelstand: Websites, die auf dem Smartphone überzeugen

Ein Interessent hat Ihre Firma über Google gefunden. Er steht vor Ihrem Betrieb oder wartet auf den Zug und hat nur sein Smartphone in der Hand. Ob daraus eine Anfrage wird, entscheidet sich auf einem Bildschirm, der kaum breiter ist als eine Handfläche.

Auch Google liest Ihre Website heute zuerst so, wie ein Smartphone sie sieht. Hier ordnen wir die Begriffe ein, zeigen, wie Sie mobil zuerst planen, und geben Ihnen einen Prüfablauf mit Checkliste an die Hand.

Drei Begriffe, die oft verwechselt werden

• Responsive Webdesign ist die Technik: eine Website mit einer Adresse und einem Code, deren Layout sich an die verfügbare Breite anpasst. Die Grundlage ist das Viewport-Meta-Tag im Seitenkopf mit „width=device-width, initial-scale=1“. Fehlt es, zeigen mobile Browser die Seite in Desktop-Breite an und verkleinern sie.
• Mobile First ist eine Arbeitsweise: Sie planen Inhalte und Gestaltung zuerst für den kleinsten Bildschirm und erweitern dann für Tablet und Desktop. Das zwingt zur Frage, was wirklich wichtig ist.
• Mobile-First-Indexierung beschreibt, wie Google arbeitet: Google erfasst Websites für die Suche mit einem Crawler, der sich wie ein Smartphone verhält. Die Umstellung hat Google im Oktober 2023 für abgeschlossen erklärt, die letzten Websites folgten nach dem 5. Juli 2024. Inhalte, die mobil gar nicht zugänglich sind, indexiert Google seither nicht mehr.

Was Google von der Smartphone-Version erwartet

Für die Indexierung zählt, was auf dem Smartphone ankommt. Aus Googles Empfehlungen zur Mobile-First-Indexierung ergeben sich drei praktische Regeln:

• Gleiche Inhalte: Texte, Bilder und Videos, die Sie am Desktop zeigen, gehören auch in die mobile Ansicht. Wer mobil Abschnitte weglässt, enthält sie auch Google vor.
• Gleiche Angaben im Hintergrund: Seitentitel, Meta-Beschreibung, strukturierte Daten und Robots-Angaben sollen mobil und am Desktop übereinstimmen.
• Nichts erst auf Fingertipp nachladen: Inhalte, die erst nach einem Wischen, Klicken oder Tippen erscheinen, lädt Google laut seiner Dokumentation nicht.

Als Bauweise empfiehlt Google responsives Webdesign, da es sich am leichtesten umsetzen und pflegen lasse. Bessere Platzierungen garantiert die Technik allein aber nicht: Entscheidend ist, dass Ihre Inhalte mobil vollständig und gut nutzbar sind. Den früheren Mobile-Friendly-Test gibt es übrigens nicht mehr: Google hat ihn Ende 2023 abgeschaltet.

Mobil zuerst planen: fünf Schritte

Mobile First beginnt nicht beim Programmieren, sondern bei den Inhalten:

1. Aufgaben festlegen: Notieren Sie die drei häufigsten Gründe, aus denen jemand Ihre Website unterwegs aufruft. Bei einem Handwerksbetrieb sind das vielleicht Leistungen, Einzugsgebiet und Telefonnummer, bei einer Ferienwohnung Lage, Preise und freie Termine.
2. Den ersten Bildschirm planen: Was muss sichtbar sein, ohne zu scrollen? Meist ein Satz, der sagt, was Sie anbieten und für wen, und der wichtigste nächste Schritt. Ein bildschirmfüllendes Stimmungsfoto ohne Aussage gehört nicht dazu.
3. Navigation kurz halten: Wenige, klar benannte Menüpunkte statt verschachtelter Untermenüs. Wichtige Aktionen wie „Anrufen“ stehen sichtbar auf der Seite. In einer Studie der Nielsen Norman Group schnitt Navigation hinter einem Menü-Symbol schlechter ab als sichtbare Navigation, am Desktop wie auf dem Smartphone.
4. Erweitern statt kürzen: Größere Bildschirme bekommen eine großzügigere Anordnung, aber keine Inhalte, die mobil fehlen.
5. Umbrüche nach Inhalt setzen: Setzen Sie die Umbruchpunkte des Layouts dort, wo die Gestaltung nicht mehr funktioniert, nicht nach Gerätemodellen. So bleibt die Seite auch auf künftigen Geräten brauchbar.

Bedienung mit dem Finger

• Ausreichend große Tippflächen: Die WCAG 2.2 verlangen auf Stufe AA mindestens 24 × 24 CSS-Pixel oder genügend Abstand zu benachbarten Elementen, mit Ausnahmen etwa für Links im Fließtext. Das ist eine Untergrenze: Planen Sie Hauptbuttons und Menüpunkte großzügiger, damit sie sich auch unterwegs sicher mit dem Daumen treffen lassen.
• Kein Hover: Was nur beim Darüberfahren mit der Maus erscheint, funktioniert auf Mobilgeräten schlecht oder gar nicht.
• Antippbare Kontaktdaten: Telefonnummer und E-Mail-Adresse sind verlinkt, die Anschrift führt per Link direkt zum Kartendienst.
• Formulare mit passender Tastatur: Mit dem richtigen Feldtyp erscheint beim E-Mail-Feld die Tastatur mit @, beim Telefonfeld der Ziffernblock. Autocomplete-Angaben lassen den Browser Name und Adresse vorschlagen.
• Platz für den Inhalt: Fixierter Kopfbereich, Cookie-Banner und Chat-Fenster lassen zusammen wenig Raum. Google rät in seinen Hinweisen zur Page Experience von aufdringlichen Einblendungen ab.

Ladezeit: drei Messwerte, auf die es ankommt

Für Laden und Bedienung hat Google drei Kennzahlen definiert, die Core Web Vitals. Gut ist eine Seite, wenn mindestens 75 Prozent der Aufrufe diese Werte erreichen:

• Largest Contentful Paint (LCP), höchstens 2,5 Sekunden: Wie schnell erscheint das größte sichtbare Element?
• Interaction to Next Paint (INP), höchstens 200 Millisekunden: Wie schnell reagiert die Seite auf ein Tippen? INP hat im März 2024 den Messwert FID abgelöst.
• Cumulative Layout Shift (CLS), höchstens 0,1: Wie stark verschiebt sich der Inhalt beim Laden?

PageSpeed Insights zeigt die Werte für Mobilgeräte und Desktop getrennt. Bei genug Besuchen stammen sie aus echten Chrome-Nutzungsdaten der letzten 28 Tage. Typische Ansatzpunkte:

• Bilder in passenden Größen ausliefern (srcset) und moderne Formate wie WebP oder AVIF nutzen.
• Lazy Loading nur für Bilder weiter unten verwenden, nie für das große Bild im ersten Bildschirm: Das würde den LCP bremsen.
• Für Bilder, Videos und Banner Platz reservieren, damit beim Laden nichts springt.
• Externe Skripte wie Tracking, Chat-Widgets oder eingebettete Feeds kritisch prüfen.

Mobil und barrierefrei gehören zusammen

Viele Anforderungen an eine gute mobile Website stehen auch in den Richtlinien für barrierefreie Webinhalte (WCAG), und die sind in Deutschland keine reine Stilfrage: Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG) für bestimmte Produkte und Dienstleistungen für Verbraucherinnen und Verbraucher, darunter viele Angebote im elektronischen Geschäftsverkehr wie Online-Shops oder Buchungsstrecken. Kleinstunternehmen, die Dienstleistungen erbringen, sind ausgenommen. In der Praxis dient die europäische Norm EN 301 549 als Maßstab, die für Websites die WCAG 2.1 auf Stufe AA übernimmt. Für öffentliche Stellen des Bundes gilt die BITV 2.0.

Für die mobile Ansicht besonders relevant:

• Umbruch statt Querscrollen: Inhalte bleiben bei 320 CSS-Pixeln Breite ohne seitliches Scrollen nutzbar.
• Vergrößerbarer Text: Text lässt sich auf 200 Prozent vergrößern, ohne dass Inhalte oder Funktionen verloren gehen. Sperren Sie deshalb das Zoomen mit zwei Fingern nicht.
• Tippflächen: Die Mindestgröße von 24 × 24 Pixeln stammt aus den WCAG 2.2. Auf diese stützt sich die neue Fassung 4.1.1 der EN 301 549; eine Vermutungswirkung hat sie aber erst, wenn sie im Amtsblatt der EU genannt ist.
• Fokus nicht verdeckt: Ein fixierter Kopfbereich darf das gerade ausgewählte Element nicht vollständig verdecken (WCAG 2.2).

Allgemeine Information, keine Rechtsberatung.

Prüfen in fünf Durchgängen

1. So, wie Google die Seite sieht: Die URL-Prüfung in der Google Search Console zeigt, wie der Googlebot für Smartphones eine Seite erfasst, im Live-Test mit Screenshot.
2. Messwerte: PageSpeed Insights für die Startseite und die wichtigsten Unterseiten aufrufen, Werte für Mobilgeräte prüfen.
3. Erster Eindruck am Rechner: Die Geräteansicht in den Entwicklertools von Chrome ist praktisch, laut Google aber nur eine Annäherung. Den Prozessor eines Smartphones bildet sie zum Beispiel nicht nach.
4. Echte Geräte: Testen Sie mindestens auf einem Android-Smartphone und einem iPhone, wenn möglich auch auf einem älteren Modell, über das Mobilnetz statt im Büro-WLAN.
5. Mit einer Testperson: Geben Sie jemandem, der Ihre Website nicht kennt, eine Aufgabe, etwa „Finden Sie heraus, ob der Betrieb samstags geöffnet hat“, und schauen Sie zu, ohne zu helfen.

Checkliste: Ist Ihre Website bereit für unterwegs?

• Das Viewport-Meta-Tag ist gesetzt, nichts muss seitlich gescrollt werden.
• Alle wichtigen Inhalte stehen auch in der mobilen Ansicht.
• Mobil und am Desktop stimmen Seitentitel, Beschreibungen und strukturierte Daten überein.
• Der erste Bildschirm sagt, was Sie anbieten, und zeigt den wichtigsten nächsten Schritt.
• Telefon, E-Mail und Anschrift sind antippbar, Schaltflächen ausreichend groß und mit Abstand gesetzt.
• Menüs und Informationen sind auch ohne Hover erreichbar.
• Formularfelder rufen die passende Bildschirmtastatur auf, abgefragt wird nur das Nötige.
• Banner und Leisten verdecken weder Inhalt noch Fokus, Zoomen ist erlaubt.
• Die Core Web Vitals für Mobilgeräte liegen im grünen Bereich.
• Die Website ist auf Android und iPhone über das Mobilnetz getestet.

Ihre Website für das Smartphone

Sie möchten wissen, wie Ihre Website auf dem Smartphone abschneidet, oder planen eine neue? Wir planen Websites vom kleinen Bildschirm aus und setzen sie barrierefrei nach WCAG um. Wie wir dabei vorgehen, lesen Sie auf der Seite Webdesign, mehr zu den gesetzlichen Anforderungen unter Barrierefreiheit. Oder Sie rufen uns an und besprechen Ihr Vorhaben direkt: 07551 839 91 30.