Mobile First seit 2018 —
warum B2B-Websites am Smartphone verlieren
Mobile First ist seit Jahren Anspruch in jeder Briefing-Mappe. In der Praxis bleibt die Mobil-Realität vieler B2B-Websites hinter diesem Anspruch zurück — nicht wegen fehlender Absicht, sondern wegen einer Designreihenfolge, die das Smartphone als Nachgedanken behandelt.
Der Begriff Mobile First steht seit über sieben Jahren in den Briefing-Mappen mittelständischer Website-Projekte. Er ist akzeptiert, niemand widerspricht ihm, und in fast jeder Konzeptphase wird er bestätigt. In der Umsetzung entsteht trotzdem oft eine Website, die am Desktop wirkt, wie sie gemeint war — und am Smartphone wie ein verkleinerter Kompromiss.
Der Grund ist selten Nachlässigkeit. Er liegt in der Designreihenfolge. Wer einen Entwurf am Desktop beginnt und ihn später für Mobile anpasst, hat in den ersten Stunden alle Entscheidungen für 1440 Pixel getroffen — Hierarchie, Bildwirkung, Spaltenstruktur, Schriftgröße, Navigations-Tiefe. Der Mobile-Workaround kann diese Entscheidungen anschließend nicht mehr revidieren; er muss sie verkleinern. Das Ergebnis funktioniert technisch, wirkt aber wie ein Nachgedanke. Und Nachgedanke ist im Vertrauensaufbau die falsche Botschaft.
Wo Mobile-First-Anspruch und Mobile-Realität auseinandergehen
Im Konzept wird Mobile First fast immer eingelöst. Es steht in der Anforderungsliste, im Pflichtenheft, im Workshop-Protokoll. Bis dahin ist alles in Ordnung. Die Diskrepanz beginnt in dem Moment, in dem das visuelle Design entsteht und der erste Mockup auf einer Desktop-Leinwand gezeichnet wird — weil das Werkzeug dort breit ist, weil die Vorlagen dort bestehen, weil die Argumentation in der Abnahme dort am besten funktioniert. Niemand sagt ausdrücklich „wir machen jetzt Desktop First", aber die Reihenfolge der Entwürfe zeigt es.
Das wirkt sich in einem konkreten Muster aus. Auf 375 Pixel passen typische B2B-Startseiten ihre Layouts zwar an, aber die Hierarchie bleibt erkennbar am Desktop orientiert: ein großes Bild, das auf 1440 Pixel beeindruckt, wirkt auf 375 Pixel wie ein Bandscheiben-Bild zwischen zwei Texten. Ein Drei-Spalten-Block mit Leistungen, der am Desktop nebeneinander liest, wird am Smartphone zu einer langen, ermüdenden Untereinander-Liste. Eine dichte Navigationsleiste wird zu einem Hamburger-Menü, das die Hauptpunkte hinter einem Tap versteckt — und damit ihre Sichtbarkeit halbiert.
Wer Mobile First wörtlich nimmt, beginnt seine Entwürfe am kleinsten Viewport und baut nach oben aus. Wer Mobile First nur im Briefing nennt und trotzdem am Desktop entwirft, erbt die Desktop-Hierarchie auf das Smartphone — und kann sie dort nicht mehr loswerden, ohne die Arbeit zu wiederholen.
Was Mobile First eigentlich heißt — und was es nicht ist
Mobile First ist keine Aussage über das Endgerät der Hauptnutzer. Es ist eine Aussage über die Designreihenfolge. Sie beginnt am kleinsten Viewport, weil dort die strengsten Constraints gelten — wenig Platz, langsamere Verbindungen, Touch statt Maus, ein Daumen statt zweier Hände, Sonnenlicht statt Schreibtischlampe. Was unter diesen Bedingungen funktioniert, funktioniert anschließend auch in der komfortableren Desktop-Umgebung. Andersherum gilt das nicht — Desktop-Komfort lässt sich nicht zu Smartphone-Klarheit zurückrechnen.
Aus dieser Reihenfolge ergeben sich konkrete inhaltliche Konsequenzen. Wer am Smartphone beginnt, muss zuerst entscheiden, was die wichtigste Information ist — welcher Satz in den ersten Sekunden gelesen werden soll, welche eine Aktion priorisiert wird, welche Inhalte verzichtbar sind. Diese Entscheidungen sind am Smartphone unausweichlich, am Desktop dagegen lassen sie sich aufschieben, weil dort Platz für mehrere parallele Botschaften ist. Genau das macht Mobile First wertvoll: Es zwingt zur inhaltlichen Klarheit, die später auch dem Desktop zugutekommt.
Was Mobile First nicht ist: eine technische Frage. Mit einem responsive Framework und ein paar Media Queries ist ein Layout zwar irgendwie mobiltauglich, aber nicht mobile-first gestaltet. Die Technik ist Standard-Werkzeug; die Mobile-First-Haltung ist eine redaktionelle und gestalterische Entscheidung. Wer das verwechselt, hat ein responsive Layout, aber keine Mobile-First-Website.
Die fünf Stellen, an denen B2B-Websites am Smartphone scheitern
Wer eine durchschnittliche mittelständische B2B-Website am Smartphone öffnet, trifft erfahrungsgemäß auf dieselben fünf Stellen, an denen es klemmt. Die Reihenfolge ihrer Häufigkeit variiert, das Muster ist robust.
Erstens: die Navigation. Das Hamburger-Menü ist die Standard-Lösung, aber selten gut umgesetzt — die Hauptpunkte sind hinter einem Tap versteckt, die Unterpunkte erfordern eine zweite Geste, die Hierarchie ist auf einer Mobil-Ansicht schwer überschaubar. Zweitens: die Hero-Sektion. Was am Desktop als großes Stimmungsbild mit Headline und Sub-Headline wirkt, schrumpft am Smartphone zu einem Bild, das den halben Bildschirm füllt, ohne inhaltlich beizutragen. Drittens: die Tabellen. Vergleichstabellen, Leistungslisten, Preisübersichten — alle drei sehen am Desktop strukturiert aus und werden am Smartphone zur Geduldsprobe. Viertens: die Formulare. Felder zu klein, Eingaben zu mühsam, Validierung zu spät. Fünftens: die Performance. Bilder in Desktop-Auflösung, Skripte für Desktop-Animationen, Web-Schriften ohne Mobil-Optimierung — alles zusammen ergibt am Smartphone in einem 4G-Netz Ladezeiten, die die Geduld des Interessenten übersteigen. Was im Detail an den Tempo-Kennzahlen messbar wird, ist in Drei Tempo-Kennzahlen, an denen Suchmaschinen heute messen ausgeführt — am Smartphone werden alle drei Werte schlechter.
Tap-Targets, Daumen-Reichweite und Eingabe-Hürden
Ein Smartphone wird in der überwiegenden Mehrheit der Sitzungen mit einer Hand bedient. Der Daumen ist die einzige verfügbare Geste, und sein erreichbarer Bildschirmbereich ist kleiner als der Bildschirm selbst — das obere Drittel ist mit einer Hand kaum ohne Greifen-Umlagerung erreichbar. Wer wichtige Tap-Targets im oberen Bildschirmdrittel platziert, akzeptiert, dass der Nutzer das Gerät umgreifen oder zu beiden Händen wechseln muss — eine Reibung, die in der Recherchephase oft mit Wegscrollen endet.
Die Größe der Tap-Targets ist ein zweiter Faktor. Die etablierte Empfehlung von mindestens 44×44 Pixeln (in der Praxis besser 48×48) ist seit Jahren in den Accessibility-Guidelines verankert und nicht verhandelbar. Was darunter liegt, wird unzuverlässig getroffen — und Nachbar-Treffer sind im B2B-Kontakt die schlechtere Form von Frustration, weil sie zu Fehlklicks führen, die wieder rückgängig gemacht werden müssen.
Daumen-Zone als Designprinzip
Eine Mobile-First-Gestaltung legt die wichtigsten Aktionen ins untere Drittel des Bildschirms. Ein Kontakt-Button gehört eher unten als oben. Eine Bestätigungsschaltfläche gehört in den Daumen-Bereich, nicht in den Daumen-Stretch-Bereich. Diese Reihenfolge ist am Desktop unwichtig, weil die Maus jeden Bildschirmbereich gleich gut erreicht; am Smartphone ist sie der Unterschied zwischen flüssigem Klick und mühsamem Umgreifen.
Halten Sie das Smartphone in einer Hand und versuchen Sie, jede wichtige Aktion auf Ihrer Website mit dem Daumen zu erreichen — ohne Umgreifen, ohne die zweite Hand. Wo Sie stocken oder umgreifen müssen, stockt auch ein Interessent. Die Aktionen, die sich nicht in einem Daumen-Schwung erreichen lassen, sind Reibungspunkte.
Lesbarkeit, Zeilenlänge und der Mythos vom „shrinkt sich schon"
Lesbarkeit am Smartphone hat drei Stellschrauben: Schriftgröße, Zeilenlänge, Kontrast. Alle drei werden in der Mobil-Realität von B2B-Websites häufig unterschätzt — meistens, weil das Layout am Desktop entworfen und am Smartphone nur skaliert wurde.
Die Schriftgröße sollte im Fließtext nicht unter 16 Pixel liegen. Was am Desktop noch funktioniert (etwa 14 Pixel in einer Sidebar), wird am Smartphone schwer lesbar, weil der Betrachtungsabstand kürzer und die Pixeldichte höher ist. Der häufige Reflex, die Schriftgröße auf Mobile zu verkleinern, um „mehr Inhalt auf den Bildschirm zu bekommen", ist ein Anti-Pattern — er produziert das Gegenteil von Lesbarkeit und führt zu schnellerem Wegscrollen.
Die Zeilenlänge ist die zweite Stellschraube. Am Desktop sind 60–75 Zeichen pro Zeile lesefreundlich; am Smartphone reichen 40–55 Zeichen, weil der Betrachtungswinkel enger ist und das Auge weniger horizontal scannt. Eine 320-Pixel-Spalte mit voller Bildschirmbreite, in der jede Zeile 80 Zeichen enthält, ist am Smartphone anstrengender als auf einer Buchseite — und die meisten Smartphone-Nutzer reagieren auf Anstrengung mit Wegscrollen, nicht mit Konzentration.
Kontrast schließlich ist eine Frage der Außenbedingungen. Eine elegant zurückgenommene Graustufen-Palette, die im abgedunkelten Büro wirkt, ist im Sonnenlicht oder auf einem älteren Display schlicht nicht lesbar. Die WCAG-Empfehlung von 4,5:1 Kontrastverhältnis im Fließtext ist auch hier nicht verhandelbar. Eine kurze Verschränkung zur Barrierefreiheit: Was das BFSG seit 2025 für Ihr Unternehmen bedeutet behandelt die rechtliche Seite — die hier beschriebene Mobil-Lesbarkeit ist die praktische Konsequenz derselben Prinzipien.
Kontaktformular am Smartphone: wo die meisten Leads verloren gehen
Das Kontaktformular ist die Stelle, an der eine Mobile-First-Schwäche am direktesten in Lead-Verlust umschlägt. Das liegt daran, dass jede Reibung an dieser Stelle eine messbare Auswirkung hat: Wer ein Formular nicht reibungslos ausfüllen kann, schickt es seltener ab. Die Differenz zwischen einer Mobil-Conversion-Rate von 60 % und einer von 40 % entscheidet sich häufig an fünf konkreten Stellen.
Fünf konkrete Reibungspunkte
Erstens: die Feldgröße. Eingabefelder, die zu klein sind, werden mit dem Daumen schwer getroffen. Zweitens: die Input-Typen. Ein Telefonnummern-Feld als reines Textfeld öffnet die normale Tastatur; mit dem richtigen Input-Typ öffnet sich die Ziffern-Tastatur automatisch und der Nutzer spart sich die Hälfte der Tastendrücke. Drittens: Autofill. Ein Browser kann gespeicherte Adressen, Telefonnummern und E-Mail-Adressen vorschlagen — aber nur, wenn das Formular die richtigen autocomplete-Attribute setzt. Viertens: Datepicker, die auf Maus optimiert sind. Fünftens: Validierung erst nach dem Absenden statt schon während der Eingabe.
Welche Felder ein B2B-Kontaktformular überhaupt enthalten sollte, ist in Kontaktformular-Felder: weniger ist mehr detailliert behandelt — die hier genannten fünf Reibungspunkte gelten zusätzlich für jede beibehaltene Spalte. Reduktion und mobile Bedienbarkeit ergänzen sich; sie ersetzen einander nicht.
Performance auf 4G/5G — wenn das Office-WLAN als Referenz täuscht
Performance ist die unsichtbare Mobile-First-Frage. Eine Website, die im Office-WLAN in zwei Sekunden lädt, kann auf einem 4G-Netz unterwegs sechs bis acht Sekunden brauchen — und sechs Sekunden sind die Schwelle, ab der ein Interessent mit hoher Wahrscheinlichkeit das Tab schließt. Die Diskrepanz zwischen Entwicklungs-Umgebung und Echtnutzung ist eine der häufigsten Quellen für Mobil-Performance-Probleme, die in der Konzeptphase nie auffallen.
Drei Stellschrauben tragen den größten Anteil. Erstens: Bilder. Eine Bilddatei in Desktop-Auflösung von 2400 Pixeln Breite, die am Smartphone auf 375 Pixel dargestellt wird, lädt die volle Datenmenge — und damit das Mehrfache des Notwendigen. Verantwortliches Markup (srcset, sizes, picture) lädt die für den Viewport passende Größe und reduziert das Datenvolumen um den Faktor, in dem der Viewport kleiner ist. Zweitens: Skripte. JavaScript für Desktop-Animationen, das auf dem Smartphone gar nicht abgespielt werden müsste, kostet Rechenzeit auf einem oft schwächeren Prozessor. Drittens: Web-Schriften. Drei Schrift-Familien in vier Schnitten ergeben am Smartphone leicht eine halbe Sekunde zusätzliche Ladezeit, die sich durch Auswahlbeschränkung und font-display-Strategien minimieren lässt.
Was hier konkret messbar wird, ist nicht die Theorie, sondern die tatsächliche Ladezeit, die Interactive Time und der Layout-Shift unter Smartphone-Bedingungen. Die Entwicklertools jedes modernen Browsers bieten Netzwerk-Drosselung als Standard-Feature an — eine Sitzung bei „Slow 4G" zeigt die Realität, die im Office-WLAN unsichtbar bleibt. Wie B2B-Anfragen außerhalb der Bürozeiten — typischerweise vom Smartphone, oft im Mobilnetz — behandelt werden, ist in B2B-Anfragen nach Feierabend ausgeführt; die Mobil-Performance ist die erste Voraussetzung dafür, dass diese Anfragen überhaupt entstehen.
Die Reihenfolge, in der etablierte Unternehmen Mobile nachziehen
Ein vollständiger Mobile-First-Relaunch ist nicht immer nötig und in den meisten Fällen weder sinnvoll noch finanzierbar. Sinnvoller ist eine klare Reihenfolge, in der die Mobil-Schwächen einer bestehenden Website der Reihe nach geschlossen werden. Vier Schritte ergeben in der Praxis das beste Wirkungs-Aufwands-Verhältnis.
Erster Schritt: ein ehrlicher Mobil-Audit auf einem älteren Smartphone in der eigenen Zielgruppe und mit gedrosselter Netzwerk-Verbindung. Dieser Audit liefert die Liste der Reibungspunkte — nicht aus dem Bauchgefühl der Geschäftsleitung, sondern aus der tatsächlichen Bedienung. Ohne diesen Schritt fließt das Budget oft in falsche Stellen.
Zweiter Schritt: das Kontaktformular. Diese Stelle hat den direktesten Effekt auf die Lead-Quote und lässt sich isoliert verbessern, ohne den Rest der Website anzutasten — größere Felder, korrekte Input-Typen, richtige autocomplete-Attribute, sinnvolle Validierung während der Eingabe. Die Verbesserung an dieser Stelle wirkt sich unmittelbar in der Abschluss-Quote zwischen Formular-Aufruf und Formular-Absenden aus.
Dritter Schritt: die Performance. Bildgrößen prüfen, srcset und sizes ergänzen, nicht benötigte Skripte für Mobile abschalten, Web-Schriften reduzieren. Diese Maßnahmen zahlen sich an mehreren Stellen gleichzeitig aus — bessere Ladezeit, bessere Tempo-Kennzahlen, besseres Mobile-SEO-Signal.
Vierter Schritt: das Layout. Hier wird die teuerste Arbeit fällig — die Hero-Sektion, die Navigationsstruktur, die Tabellen, die Hierarchie. Diese Eingriffe gehören meistens in einen geplanten Relaunch oder in einen gezielten Mobil-Teil-Relaunch. Wer die ersten drei Schritte vorzieht, gewinnt häufig schon so viel Mobil-Qualität, dass der vierte zeitlich entkoppelt werden kann — was die Gesamtbelastung deutlich senkt.
Häufig gestellte Fragen
Beide Begriffe werden im Alltag oft synonym verwendet, meinen aber unterschiedliche Dinge. Responsive Design heißt: Eine Website passt sich an unterschiedliche Bildschirmgrößen an — typischerweise indem ein Desktop-Layout für kleinere Viewports verkleinert, umsortiert oder reduziert wird. Mobile First heißt: Der Entwurf beginnt am kleinsten Viewport und wird nach oben hin ausgebaut. Der Unterschied klingt akademisch, ist aber im Ergebnis groß. Mobile First entscheidet zuerst, was auf 375 Pixel Platz hat — und damit, was inhaltlich wirklich wichtig ist. Responsive Design erbt die Desktop-Hierarchie und versucht, sie kleinzubekommen, was am Smartphone oft in einer überfrachteten, schwer scrollbaren Mobilansicht endet.
Technisch ja, inhaltlich meistens nicht. Eine reine Verkleinerung des Desktop-Layouts erzeugt am Smartphone typische Probleme: zu kleine Schrift, zu kleine Tap-Targets, überlange Scroll-Strecken, Tabellen mit horizontaler Scrollbar, Formulare mit nebeneinander angeordneten Feldern, die übereinander purzeln. Diese Probleme entstehen nicht aus Nachlässigkeit, sondern aus der Reihenfolge: Wer Desktop zuerst entwirft, hat alle Entscheidungen bereits für 1440 Pixel getroffen — und der Mobil-Workaround muss sich anpassen, statt selbst gestaltet zu sein. Das Ergebnis funktioniert, wirkt aber nicht gestaltet, und wirkt-nicht-gestaltet ist im B2B-Vertrauensaufbau ein konkreter Nachteil.
Aus mehreren parallel wirkenden Gründen. Erstens: Eingabefelder, die am Desktop ein angenehmes Tippen erlauben, sind am Smartphone schwer zu treffen, wenn sie nicht groß genug sind oder zu eng aneinanderliegen. Zweitens: Falsche Input-Typen — ein Telefonnummern-Feld als reines Textfeld öffnet auf dem Smartphone die normale Tastatur statt der Ziffern-Tastatur und kostet damit unnötig Tastendrücke. Drittens: Autofill funktioniert nur, wenn die Felder die richtigen autocomplete-Attribute haben; ohne sie tippt der Nutzer am Smartphone mühsam, was er am Desktop in Sekunden ausgefüllt hätte. Viertens: Datepicker, die für Maus und Tastatur entworfen wurden und am Smartphone schlecht bedienbar sind. Diese vier Faktoren zusammen erzeugen eine messbar höhere Abbruchquote zwischen Formular-Aufruf und Formular-Absenden — der Lead-Verlust ist real, auch wenn er still passiert.
Die etablierte Empfehlung lautet mindestens 44×44 Pixel, mit ausreichendem Abstand zwischen benachbarten Tap-Targets, damit auf Touch keine Nachbar-Treffer entstehen. Diese Größe ist seit Jahren der Maßstab in den Mobile-Accessibility-Guidelines beider großen Mobilbetriebssysteme und auch in den Web Content Accessibility Guidelines verankert. In der Praxis sind 48×48 Pixel mit 8 Pixel Abstand robuster, weil sie nicht nur den durchschnittlichen Fingerballen abdecken, sondern auch Nutzer mit eingeschränkter Feinmotorik einschließen. Wichtig ist nicht nur die Größe selbst, sondern auch ihre Position — Tap-Targets in der Daumen-Reichweite (unteres Drittel des Bildschirms) sind erreichbarer als solche am oberen Rand.
Drei Stufen sind sinnvoll. Erste Stufe: die Browser-Entwicklertools im Mobil-Emulationsmodus mit verschiedenen Viewports und Netzwerk-Drosselung auf 4G — sie reichen für die meisten Layout- und Performance-Prüfungen und sind kostenlos. Zweite Stufe: ein einziges echtes Smartphone aus der mittleren Preisklasse mit drei bis vier Jahren auf dem Buckel, weil das ungefähr den durchschnittlichen Bestand der eigenen Zielgruppe abbildet. Aktuelle Hochleistungs-Smartphones beschönigen die Performance; ein älteres Gerät zeigt die Realität, in der die Zielgruppe sich tatsächlich befindet. Dritte Stufe: regelmäßige Stichproben in der Echtnutzungs-Statistik der Webanalyse — welcher Anteil der Besucher kommt aus welchen Viewport-Größen, welche Absprung-Quote zeigen die Mobil-Sitzungen. Diese drei Stufen zusammen liefern ein robustes Bild, ohne dass ein eigenes Testgeräte-Labor nötig wäre.
Ja, und der Grund ist meistens nicht der Hauptarbeitsplatz, sondern die Recherchephase. B2B-Entscheider sitzen tagsüber tatsächlich oft am Desktop, recherchieren aber abends, am Wochenende und auf Geschäftsreisen am Smartphone — und genau in dieser Phase fällt die Vorauswahl über Anbieter, lange bevor das eigentliche Erstgespräch stattfindet. Eine B2B-Website, die in der Recherchephase am Smartphone schlecht funktioniert, fällt aus der Vorauswahl, ohne dass das Unternehmen es jemals erfährt. Die Annahme, der Hauptarbeitsplatz sei Desktop und Mobile damit nachrangig, übersieht systematisch, in welcher Phase die Anbahnung heute beginnt. Eine saubere Mobil-Ansicht ist deshalb auch im klassischen B2B-Geschäft nicht Kür, sondern Pflicht.
Mobile First ist kein Trend, sondern eine Reihenfolge
Mobile First ist seit Jahren keine technische Innovation mehr und auch kein Designtrend, der gerechtfertigt werden muss. Es ist eine schlichte Reihenfolge — am kleinsten Viewport beginnen und nach oben ausbauen. Wer diese Reihenfolge einhält, gewinnt redaktionelle Klarheit, gestalterische Robustheit und eine Website, die auf jedem Endgerät gleich überzeugend wirkt. Wer die Reihenfolge umdreht, bekommt auf dem Smartphone einen Kompromiss, der wie ein Kompromiss aussieht — und im B2B-Vertrauensaufbau ist das die teure Variante.
Was sich für ein etabliertes Unternehmen konkret ändert, ist nicht der Rebuild der gesamten Website, sondern eine klare Reihenfolge der Eingriffe: ein ehrlicher Audit, das Kontaktformular zuerst, die Performance als zweiter Schritt, das Layout als dritter. Diese drei Schritte schließen die größten Lead-Verluste, ohne den Auftritt komplett zu erneuern — und sie zahlen sich an einer Stelle aus, an der die Recherchephase der Self-Service-Generation tatsächlich stattfindet.
Wir prüfen Ihre Website in 2 Werktagen am Smartphone aus Sicht eines B2B-Entscheiders — und nennen die 3 Stellen, an denen Anfragen verloren gehen, bevor sie überhaupt entstehen.