/

Mobile First: Damit eure Website auch unterwegs überzeugt

Da auch Entscheider am Smartphone über Aufträge entscheiden

Im B2B hält sich noch oft der Irrglaube: «Unsere Kunden sitzen im Büro an grossen Bildschirmen – Mobile First ist nur etwas für Online-Shops.» Die Realität sieht heute anders aus. Auch B2B-Entscheider, Einkäufer und Projektleiter recherchieren im Zug zwischen zwei Terminen oder abends auf dem Sofa.

Das Smartphone ist heute das bevorzugte Gerät für die Vorauswahl. Wenn Websites auf dem Smartphone langsam laden, Schriften schlecht lesbar sind oder Buttons zu dicht beieinanderliegen, fliegen diese aus dem Rennen. Niemand öffnet eine auf dem Smartphone schlecht bedienbare Seite am nächsten Morgen nochmals am PC. Wer mobil scheitert, verliert nur allzu oft Interessenten und Aufträge.

Ein KMU-Beispiel aus der Praxis

Ein Schweizer Zulieferer für Bautechnik und Befestigungssysteme:

Der oft gesehene Weg (Desktop-Denken): Die Website wurde für grosse Bildschirme gestaltet und für die Anwendung auf dem Smartphone lediglich zusammengeschoben. Da sucht zum Beispiel ein Bauleiter auf der Baustelle nach technischen Daten. Dann lädt eine PDF-Tabelle ewig, das Menü verdeckt den Bildschirm und die Telefonnummer ist nicht verlinkt – man kann sie weder anklicken noch kopieren. Das Resultat: Er ruft lieber einen Mitbewerber an.

Der Mobile-First-Weg (Smartphone-ready): Die Seite erkennt mobile Nutzer sofort. Die wichtigsten Produkte sind mit grossen Klickflächen dargestellt. Die Spezifikationen lassen sich in aufklappbaren Akkordeons ohne Zoom lesen. Ganz unten fixiert: ein Klick-Button «Technischen Berater anrufen» – ein Fingertipp genügt, und der Bauleiter ist mit dem Vertrieb verbunden.

Zuerst für den kleinen Bildschirm, dann für den grossen

Mobile First für Entscheider

Der Grossteil eurer Kunden betrachtet eure Website heute zuerst auf dem Smartphone. Wenn die Bedienung dort klemmt oder Texte unlesbar sind, verliert ihr diesen Kontakt sofort an den nächsten Anbieter.

Mobile First fachlich

Ein Design- und Entwicklungsansatz, der das Layout und die Inhaltshierarchie primär für kleine Bildschirme konzipiert und erst im zweiten Schritt (Progressive Enhancement) für Desktops erweitert. Er sichert die Usability unter eingeschränkten Bedienungsbedingungen (Touch-Ziele, Viewport, also den sichtbaren Bildschirmausschnitt).

Warum ich jede Website zuerst auf dem Telefon öffne

Websites werden fast immer am grossen Bildschirm entworfen, präsentiert und abgenommen. Die Mobilansicht prüft man zum Schluss, auf einem schnellen Telefon im Büro-WLAN. So entsteht eine Website, die in der Sitzung überzeugt und im Zug versagt.

Ich drehe die Reihenfolge um: erst das Telefon, im Mobilnetz, mit einer Hand. Nicht weil der Desktop unwichtig wäre, sondern weil der kleine Bildschirm zu Entscheidungen zwingt. Was dort keinen Platz hat, war meistens auch am grossen Bildschirm verzichtbar. Wer für das Telefon ordnet, bekommt die klarere Website für beide Geräte.

Wirtschaftlich zählt, dass eine unterwegs verlorene Anfrage nicht am nächsten Morgen am Desktop zurückkommt. Viele Korrekturen sind klein: eine Telefonnummer, die sich antippen lässt, ein Formular mit der passenden Tastatur, technische Daten, die nicht als schweres PDF laden. Kleine Eingriffe mit grosser Wirkung auf genau die Besucher, die zwischen zwei Terminen entscheiden.

Was ich euch nicht verspreche: dass eure Kunden mobil bestellen. Im B2B wird ein Angebot oft am Arbeitsplatz verglichen und unterschrieben. Mobile First heisst nicht, den Desktop zu vernachlässigen, sondern dafür zu sorgen, dass ihr es überhaupt auf die Liste schafft, die dort verglichen wird.

«Mobile First» ist kein rein gestalterischer Trend, sondern ein Paradigmenwechsel im Software- und Interface-Design: Statt eine komplexe Desktop-Oberfläche nachträglich durch Media Queries mühsam zu verkleinern (Graceful Degradation), wird das Kernsystem ausgehend vom kleinsten Bildschirm und den restriktivsten Bedingungen (Bandbreite, Prozessorleistung, Touch-Eingabe) aufgebaut (Progressive Enhancement).

Progressive Enhancement, Ergonomie und Mobile-First-Indexing

Hinzu kommt die technische Notwendigkeit durch Suchmaschinen: Google bewertet und indexiert Webseiten anhand der mobilen Fassung (Mobile-First-Indexing). Inhalte, die in der mobilen Ansicht versteckt oder technisch unzureichend aufbereitet sind, verlieren an Sichtbarkeit im Ranking.

Die 4 Kernkriterien professioneller B2B-Mobile-Usability

DimensionWas technisch gefordert istTypischer Fehler im B2BMassnahme im Audit
Touch-Ziele (Ergonomie)Interaktive Elemente müssen eine Mindestgrösse aufweisen und ausreichend Abstand halten (empfohlen 48 × 48 CSS-Pixel; die WCAG 2.2 verlangen auf Stufe AA mindestens 24 × 24).Winzige Textlinks in Fliesstexten oder eng gestaffelte Untermenüs führen zu Fehlklicks (Fat-Finger-Syndrom).Vergrösserung der Klickflächen (Padding), Mindestabstände von 8 px zwischen klickbaren Elementen.
Viewport & TypografieVerzicht auf horizontales Scrollen; Schriftgrössen für Fliesstexte dürfen 16 px nicht unterschreiten.Tabellen und Infografiken brechen über den Displayrand aus; Texte wirken wie mikroskopische Fussnoten.Responsives Reflow-Design, horizontales Scrollen nur in isolierten Daten-Containern, Basis-Schriftgrösse 16–18 px.
Formular-UXFormulare müssen für mobile Tastaturen optimiert sein (semantische HTML5-Input-Typen).Standard-Textfelder für Zahlenfolgen zwingen den Nutzer zum mühsamen Umschalten auf die Zifferntastatur.Einsatz von Attributen wie type="tel", type="email", inputmode="numeric" und Verzicht auf Dropdowns mit 30 Optionen.
Asset-AuslieferungBilder und Videos dürfen mobile Datenleitungen und Rendering-Engines nicht überlasten.Vollaufgelöste Desktop-Banner (3 MB+) werden auf dem Smartphone geladen und nur per CSS skaliert.Responsive Images via <picture>-Tag oder srcset mit WebP/AVIF-Formaten und Lazy-Loading.

Fazit: Euer messbarer Gewinn durch kompromissloses Mobile First

  • Sicherung der Lead-Pipeline: Ihr fangt Entscheider genau in jenen Momenten ab, in denen der konkrete Bedarf entsteht (unterwegs, auf der Baustelle oder im Meeting).
  • Höhere Sichtbarkeit bei Google: Mobile-First-konforme Seiten ohne Layout-Verschiebungen (Cumulative Layout Shift) und mit schnellen Ladezeiten ranken stabiler.
  • Geringere Absprungrate bei Erstkontakten: Ein barrierefreies, flüssiges Interface auf dem Telefon schafft sofortigen Vertrauensvorschuss in die digitale Reife eures Unternehmens.

Häufige Fragen

Meine Kunden sind Firmen. Brauche ich wirklich eine mobile Website?

Ja. Auch im B2B wird ein Teil der Recherche unterwegs erledigt – im Zug, zwischen zwei Terminen, auf der Baustelle –, und Google bewertet eure Website ohnehin anhand der mobilen Fassung. Statt zu schätzen, schaut nach: Eure Webanalyse zeigt, welcher Anteil eurer Besucher mit dem Smartphone kommt und ob diese Besucher seltener anfragen als jene am Computer. Ein deutlicher Unterschied ist das klarste Zeichen, dass die mobile Fassung bremst.

Meine Website ist responsive. Ist sie damit Mobile First?

Nicht automatisch. Responsive heisst nur, dass sich das Layout der Bildschirmgrösse anpasst. Mobile First heisst, dass Inhalte und Bedienung bewusst für das Smartphone priorisiert wurden: das Wichtigste zuerst, gut antippbare Buttons, kurze Formulare. Eine responsive Seite kann mobil trotzdem langsam laden oder schwer bedienbar sein.

Wie teste ich meine Website mobil am besten?

Auf einem echten Smartphone, im Mobilnetz und mit einer Hand. Erledigt drei typische Aufgaben: eine bestimmte Leistung finden, die Telefonnummer antippen, das Kontaktformular abschicken. Achtet darauf, ob ihr zoomen müsst, ob die passende Tastatur erscheint und ob ihr Buttons verfehlt. Die Simulation im Desktop-Browser ersetzt diesen Test nicht.

Was frage ich meinen Webdesigner?

Fragt: «Wurde die Website zuerst für das Smartphone entworfen oder für den Desktop – und auf welchen echten Geräten wurde sie getestet?» Lasst euch ausserdem zeigen, wie gross die Bilder sind, die auf dem Smartphone geladen werden. Werden dort die vollen Desktop-Bilder ausgeliefert, ist das eine typische, gut behebbare Bremse.

Muss ich dafür die ganze Website neu bauen?

Meist nicht. Viele mobile Hürden lassen sich gezielt beheben: Telefonnummer klickbar machen, Formularfelder mit passenden Tastaturen versehen, Bilder verkleinern, Klickflächen vergrössern. Ein Neubau lohnt sich erst, wenn die Seite grundsätzlich für den Desktop gedacht ist und mobil nur zusammengeschoben wird. Beginnt mit dem Weg zur Kontaktaufnahme – dort wirkt jede Korrektur am direktesten.

Quellen

Verwandte Beiträge