Mobile First Webdesign heißt: Deine Webseite wird zuerst für das Smartphone geplant und erst danach für den großen Bildschirm erweitert. Für Handwerksbetriebe ist das keine Stilfrage. Wer nachts einen Rohrbruch hat oder abends auf dem Sofa nach einem Maler sucht, greift zum Handy. Hier erfährst du, woran du eine mobile Schwachstelle erkennst, was Google seit 2024 anders bewertet und welche Elemente auf dem Smartphone wirklich Anfragen bringen.
Letzte Aktualisierung: September 2026
Was ist Mobile First Webdesign?
Mobile First Webdesign ist ein Planungsansatz, bei dem die kleinste Bildschirmgröße den Ausgangspunkt bildet. Du legst zuerst fest, was ein Besucher auf fünf bis sieben Zoll Bildschirm sehen und tun soll. Erst danach kommen zusätzliche Spalten, größere Bilder und Details für Tablet und Desktop dazu.
Der Gedanke dahinter ist einfach. Auf dem Handy ist Platz knapp, also musst du priorisieren. Diese Priorisierung tut der ganzen Seite gut, auch auf dem großen Monitor.
Was ist der Unterschied zu responsivem Design?
Responsives Design beschreibt die Technik: Eine Seite passt ihr Layout automatisch an die Bildschirmbreite an. Mobile First beschreibt die Reihenfolge der Planung. Viele ältere Handwerker-Webseiten sind technisch responsiv, wurden aber am Desktop entworfen. Auf dem Handy wird das Desktop-Layout dann einfach zusammengeschoben. Das Ergebnis sind endlose Textwände, ein Menü mit zwölf Punkten und eine Telefonnummer ganz unten im Footer.
| Ansatz | Wie geplant wird | Typisches Ergebnis auf dem Handy |
|---|---|---|
| Desktop-only | Nur für den großen Bildschirm | Winzige Schrift, seitliches Scrollen, Zoomen nötig |
| Desktop-First, responsiv | Desktop zuerst, danach verkleinert | Lesbar, aber überladen, Kontakt schwer zu finden |
| Mobile First | Smartphone zuerst, danach erweitert | Klare Reihenfolge, Anruf mit einem Tipp, schnelle Ladezeit |
Wenn deine Seite vor 2018 gebaut wurde, liegt sie mit hoher Wahrscheinlichkeit in der mittleren Zeile. Das ist kein Drama. Aber es kostet dich Anfragen, die du gar nicht bemerkst, weil der Besucher einfach zurück zu Google geht.
Warum deine Kunden übers Handy kommen
Das Smartphone ist das Gerät, das jeder immer dabei hat. Die Zahl dazu kommt vom Digitalverband Bitkom.
82 Prozent der Menschen in Deutschland ab 16 Jahren nutzen ein Smartphone, das entspricht rund 56 Millionen Personen. Im Schnitt verbringen sie 155 Minuten pro Tag damit.
Quelle: Bitkom Research, Studie Smartphone-Markt 2025, telefonische Befragung von 1.004 Personen ab 16 Jahren in Deutschland, Erhebung Januar 2025
Für einen Handwerksbetrieb ist aber weniger die Gesamtzahl entscheidend. Wichtiger ist die Situation, in der gesucht wird. Ich sehe bei Betrieben immer wieder dieselben drei Momente:
- Der Notfall: Heizung aus, Wasser im Keller, Schlüssel abgebrochen. Niemand setzt sich dafür an den Laptop.
- Die Abendrecherche: Das Ehepaar plant das neue Bad und scrollt nach Feierabend durch Betriebe in der Region.
- Die Empfehlung: Der Nachbar nennt deinen Namen, und dein Firmenname landet sofort im Suchfeld des Handys.
In allen drei Fällen entscheidet sich in wenigen Sekunden, ob jemand anruft. Deine Webseite muss dann auf dem Smartphone funktionieren, nicht irgendwann am Schreibtisch.
Wie hoch ist der Handy-Anteil bei deiner eigenen Webseite?
Allgemeine Zahlen helfen nur begrenzt. Viel aussagekräftiger ist deine eigene Statistik. In Google Analytics oder einem datenschutzfreundlichen Tool wie Matomo findest du den Bericht "Geräte" oder "Gerätekategorie". Dort steht, wie viele Besuche von Smartphone, Tablet und Desktop kommen. Schau dir zusätzlich an, wie viele Anfragen pro Gerät eingehen. Ist der Handy-Anteil bei den Besuchen hoch, bei den Anfragen aber niedrig, hast du ein mobiles Problem. Welche Werte sonst noch zählen, habe ich im Artikel über Webseite-Kennzahlen zusammengefasst.
Google bewertet nur noch die Handy-Version deiner Webseite
Hier liegt der zweite Grund, warum Mobile First Webdesign heute Pflicht ist. Google crawlt Webseiten seit Jahren bevorzugt mit dem Smartphone-Crawler. Im Juni 2024 hat Google den letzten Schritt angekündigt: Ab dem 5. Juli 2024 werden auch die restlichen Seiten nur noch mit dem mobilen Googlebot erfasst. Inhalte, die auf einem Mobilgerät gar nicht erreichbar sind, können danach nicht mehr indexiert werden. Nachlesen kannst du das im offiziellen Google Search Central Blog.
Was ist Mobile-First-Indexierung?
Mobile-First-Indexierung bedeutet, dass Google die Handy-Version deiner Seite liest und daraus das Ranking ableitet. Die Desktop-Version spielt für die Bewertung praktisch keine Rolle mehr. Fehlt auf dem Handy ein Textabschnitt, eine Leistungsseite oder ein Bild-Alt-Text, dann existiert dieser Inhalt für Google nicht.
Das hat eine unangenehme Folge für ältere Seiten. Manche Themes blenden auf kleinen Bildschirmen ganze Bereiche aus, um Platz zu sparen. Genau dort stehen oft die Leistungsbeschreibungen oder das Einsatzgebiet. Du optimierst dann Texte, die Google gar nicht mehr berücksichtigt.
Ladezeit auf dem Smartphone: jede Sekunde kostet Anfragen
Unterwegs ist die Verbindung selten so gut wie im Büro-WLAN. Große Bilder, drei Slider und ein Video im Kopfbereich bremsen das Handy spürbar aus. Wie empfindlich Besucher darauf reagieren, hat Google schon früh gemessen.
53 Prozent der Besuche auf mobilen Webseiten werden abgebrochen, wenn die Seite länger als drei Sekunden zum Laden braucht.
Quelle: Google/DoubleClick, The Need for Mobile Speed, aggregierte und anonymisierte Google-Analytics-Daten von rund 3.700 mobilen Webseiten, weltweit, Erhebung März 2016
Die Zahl ist zehn Jahre alt, und die Netze sind seitdem schneller geworden. Die Geduld der Nutzer ist aber eher gesunken. Ich verwende die drei Sekunden deshalb als Obergrenze, nicht als Ziel.
Heute misst Google die Nutzererfahrung über die Core Web Vitals. Diese drei Werte solltest du kennen:
- Largest Contentful Paint (LCP): Wie schnell der größte sichtbare Inhalt erscheint. Gut sind 2,5 Sekunden oder weniger.
- Interaction to Next Paint (INP): Wie schnell die Seite auf einen Tipp reagiert. Gut sind 200 Millisekunden oder weniger.
- Cumulative Layout Shift (CLS): Wie stark Elemente beim Laden springen. Gut ist ein Wert von 0,1 oder weniger.
Du prüfst diese Werte kostenlos mit PageSpeed Insights. Wichtig ist der Reiter "Mobil", nicht "Desktop". Läuft deine Seite auf WordPress und ist langsam, findest du die häufigsten Ursachen im Artikel WordPress zu langsam.
Mobile First Webdesign für Handwerker: 9 Elemente, die Anfragen bringen
Theorie hilft dir wenig, wenn morgen früh das Telefon stumm bleibt. Deshalb hier die Elemente, auf die ich bei jeder Handwerker-Seite zuerst achte. Die Reihenfolge entspricht ungefähr ihrer Wirkung.
- Anruf-Button mit einem Tipp: Die Telefonnummer ist als klickbarer Link hinterlegt und bleibt beim Scrollen am unteren Rand sichtbar. Für Notdienst-Betriebe ist das der wichtigste Einzelpunkt.
- Leistung und Ort im ersten Bildschirm: "Sanitär und Heizung in Bielefeld und Umgebung" sagt in einer Zeile, ob der Besucher richtig ist. Ein Slider mit Stimmungsbildern sagt das nicht.
- Wichtige Aktionen in der Daumenzone: Die meisten Menschen bedienen das Handy mit einer Hand. Der untere Bereich des Bildschirms ist bequem erreichbar, die obere Ecke nicht. Dort gehört kein Kontakt-Button hin.
- Große Tippflächen: Buttons und Links brauchen etwa 48 mal 48 Pixel Fläche und etwas Abstand zueinander. Sonst trifft der Daumen den Nachbarlink.
- Kurzes Kontaktformular: Name, Telefon, kurze Beschreibung, optional ein Foto. Jedes zusätzliche Pflichtfeld kostet auf dem Handy mehr als am Desktop, weil das Tippen mühsamer ist.
- Lesbare Schrift: Fließtext mit mindestens 16 Pixeln. Bei kleineren Eingabefeldern zoomt das iPhone automatisch in das Formular, was viele Nutzer irritiert.
- Komprimierte Bilder: Referenzfotos sind dein bestes Verkaufsargument. Sie gehören aber im WebP-Format und in passender Größe auf die Seite, nicht als 6-Megabyte-Original aus der Handykamera.
- Keine Popups beim Laden: Ein Newsletter-Fenster, das den ganzen Handybildschirm verdeckt, vertreibt Besucher mit einem akuten Problem sofort.
- Bewertungen sichtbar: Ein kurzer Block mit Google-Sternen und zwei echten Kundenstimmen direkt unter dem Einstieg. Das schafft Vertrauen, bevor jemand weiterscrollt.
Wie du die Aufforderung zum Anruf oder zur Anfrage formulierst, spielt auf dem kleinen Bildschirm eine noch größere Rolle. Konkrete Formulierungen findest du in meinen Call-to-Action-Beispielen.
Warum das Menü auf dem Handy kurz sein muss
Viele Betriebe übernehmen die komplette Desktop-Navigation ins Hamburger-Menü. Dann klappt eine Liste mit fünfzehn Einträgen auf, inklusive Unterpunkten. Auf dem Smartphone reichen meist fünf Punkte: Leistungen, Referenzen, Über uns, Kontakt und gegebenenfalls Karriere. Alles Weitere erreichst du über Links innerhalb der Seiten.
Beispiel: So baue ich die mobile Startseite eines Heizungsbauers auf
Nehmen wir einen Heizungs- und Sanitärbetrieb mit sechs Mitarbeitern und Notdienst am Wochenende. Auf dem Smartphone plane ich die Startseite in genau dieser Reihenfolge, von oben nach unten:
- Eine Überschrift mit Leistung und Region, darunter ein Satz zum Notdienst mit den Zeiten.
- Zwei Buttons nebeneinander: "Jetzt anrufen" und "Anfrage mit Foto senden".
- Ein kurzer Vertrauensblock mit Google-Sternen, Meisterbetrieb und Anzahl der Jahre am Markt.
- Vier Leistungskacheln: Heizung, Bad, Wartung, Notdienst. Jede führt auf eine eigene Unterseite.
- Drei Referenzfotos mit einem Satz zum jeweiligen Auftrag.
- Das Einsatzgebiet mit den wichtigsten Orten als Text, nicht nur als Karte.
- Ganz unten Kontaktformular, Öffnungszeiten und Adresse.
Der Anruf-Button bleibt dabei die ganze Zeit am unteren Bildschirmrand sichtbar. Auf dem Desktop darf dieselbe Seite breiter werden, Leistungen stehen dann nebeneinander statt untereinander. Die Reihenfolge der Inhalte bleibt aber gleich. Genau das ist der Kern von Mobile First: Der Inhalt wird einmal priorisiert und dann nur noch räumlich verteilt.
Und was ist mit Tablets?
Tablets spielen bei Handwerker-Webseiten meist eine kleine Rolle. Eine sauber aufgebaute mobile Seite funktioniert auf dem Tablet in der Regel ohne Zusatzaufwand. Prüfe trotzdem einmal im Querformat, ob Bilder und Tabellen vernünftig dargestellt werden.
Handy-Check: So testest du deine Webseite in 10 Minuten
Du brauchst dafür kein Fachwissen, nur dein eigenes Smartphone und etwas Ehrlichkeit. Gehe diese Schritte der Reihe nach durch:
- Öffne deine Webseite im mobilen Datennetz, nicht im WLAN. Zähle mit, wie lange es dauert, bis du lesbaren Inhalt siehst.
- Prüfe den ersten Bildschirm ohne zu scrollen: Steht dort, was du machst und in welcher Region?
- Suche die Telefonnummer. Tippe darauf und kontrolliere, ob sich die Telefon-App öffnet.
- Halte das Handy in einer Hand und versuche, mit dem Daumen das Menü und den Kontakt-Button zu erreichen.
- Fülle das Kontaktformular komplett aus und sende es ab. Kommt die Anfrage in deinem Postfach an?
- Scrolle einmal durch jede Leistungsseite. Musst du irgendwo seitlich wischen oder zoomen?
- Lass PageSpeed Insights im Reiter "Mobil" laufen und notiere LCP, INP und CLS.
- Gib deinen Firmennamen bei Google auf dem Handy ein und tippe auf dein eigenes Ergebnis. So sieht es ein Kunde, der eine Empfehlung bekommen hat.
Seit Dezember 2023 gibt es in der Google Search Console keinen eigenen Bericht zur mobilen Nutzerfreundlichkeit mehr, auch der frühere Test auf Optimierung für Mobilgeräte wurde eingestellt. Der Selbsttest mit dem echten Gerät ist deshalb wichtiger geworden. Lighthouse in den Chrome-Entwicklertools liefert zusätzlich Hinweise auf zu kleine Tippflächen oder fehlende Viewport-Angaben.
Typische Fehler auf Handwerker-Webseiten am Smartphone
Die folgenden Fehler begegnen mir bei Erstgesprächen besonders oft. Die meisten sind schnell behoben, sobald man sie einmal gesehen hat.
| Fehler | Folge für den Betrieb | Lösung |
|---|---|---|
| Telefonnummer als Bild oder nur im Footer | Kein Anruf per Tipp, Besucher springt ab | Nummer als tel-Link, zusätzlich fixierter Anruf-Button |
| Großer Bild-Slider im Kopfbereich | Lange Ladezeit, Leistung erst nach dem Scrollen sichtbar | Ein statisches Bild mit klarer Überschrift |
| Texte auf dem Handy ausgeblendet | Google indexiert die Inhalte nicht | Inhalte gekürzt, aber vollständig mobil ausliefern |
| Formular mit zehn Pflichtfeldern | Abbruch mitten in der Anfrage | Drei bis vier Felder, Rest im Telefonat klären |
| Popup direkt beim Laden | Inhalt verdeckt, Nutzer geht zurück zu Google | Popups entfernen oder erst nach längerer Verweildauer |
| PDF-Flyer statt Leistungsseite | Auf dem Handy kaum lesbar, schlecht für SEO | Jede Leistung als eigene HTML-Seite |
Ein Punkt fehlt in der Tabelle, weil er eher eine Haltung ist: Viele Inhaber prüfen ihre eigene Seite nur am Büro-PC. Mach es dir zur Gewohnheit, jede Änderung zuerst auf dem Handy anzuschauen.
Neue Seite oder Umbau: Was kostet Mobile First Webdesign?
Ob sich ein Umbau lohnt, hängt vom Fundament ab. Ist deine Seite mit einem modernen WordPress-Theme gebaut, reichen oft gezielte Korrekturen: Anruf-Button ergänzen, Bilder komprimieren, Formular kürzen, Menü aufräumen. Das ist überschaubare Arbeit.
Anders sieht es bei Seiten aus, die komplett als Desktop-Layout gebaut wurden, mit alten Page-Buildern oder festen Spaltenbreiten. Dort wird jeder Flicken teurer als der nächste. Meine ehrliche Einschätzung: Ab einem gewissen Punkt ist ein Neubau nach dem Mobile-First-Prinzip günstiger als die dritte Reparaturrunde.
Für diesen Fall gibt es bei mir die Webseite zum Festpreis ab 1.990 € netto. Jede Seite plane ich dabei zuerst für das Smartphone, inklusive Anruf-Button, schneller Ladezeit und sauberer Struktur für Google. Branchenspezifische Details, etwa für Notdienst oder Einsatzgebiete, findest du auf der Seite zu Webseiten für Handwerker.
Nach dem Launch bleibt die Seite nur schnell, wenn Updates und Bildgrößen im Blick bleiben. Wer das nicht selbst übernehmen will, kann ein Wartungspaket ab 49 € netto im Monat dazubuchen. Pflicht ist das nicht.
Häufige Fragen zu Mobile First Webdesign
Ist Mobile First Webdesign dasselbe wie eine responsive Webseite?
Nein. Responsiv beschreibt nur, dass sich das Layout an die Bildschirmgröße anpasst. Mobile First beschreibt die Planung, bei der das Smartphone zuerst kommt und die Desktop-Ansicht daraus erweitert wird.
Rankt meine Seite schlechter, wenn sie auf dem Handy schlecht aussieht?
Google bewertet seit Juli 2024 grundsätzlich die mobile Version einer Seite. Fehlende Inhalte, schwache Ladezeiten und schlechte Bedienbarkeit auf dem Handy wirken sich deshalb direkt auf Sichtbarkeit und Anfragen aus.
Wie erkenne ich schnell, ob meine Webseite mobil funktioniert?
Öffne sie im mobilen Datennetz auf deinem Smartphone, suche die Telefonnummer und tippe darauf. Ergänzend lässt du PageSpeed Insights im Reiter "Mobil" laufen und prüfst die Core Web Vitals.
Brauche ich für Mobile First eine komplett neue Webseite?
Nicht immer. Moderne WordPress-Themes lassen sich oft gezielt verbessern. Ist die Seite dagegen fest als Desktop-Layout gebaut, ist ein Neubau meist die wirtschaftlichere Lösung.
Fazit: Mobile First Webdesign entscheidet über den Anruf
Deine Kunden suchen mit dem Smartphone, und Google bewertet deine Seite mit dem Smartphone. Mobile First Webdesign ist deshalb die Grundlage dafür, dass aus Besuchern Anrufe werden. Mach heute den 10-Minuten-Check aus diesem Artikel mit deinem eigenen Handy. Schreib dir auf, an welcher Stelle du selbst als Kunde aufgegeben hättest. Genau dort fängst du an.
Du bist unsicher, ob deine Seite nur ein paar Korrekturen braucht oder einen Neustart? Lass uns in einem kurzen Gespräch klären, ob das zu deinem Betrieb passt. Hier geht es zum kostenlosen Erstgespräch.
