CSS in einfachen Worten: warum die Website auf dem Handy «verrutscht» und wie das den Umsatz trifft
CSS (Cascading Style Sheets) ist die Sprache des Site-Designs: Farben, Schriften, Abstände, Blockanordnung und Anpassung an das Handy-Display. Wenn HTML das «Gerüst» der Seite definiert und JavaScript das Verhalten von Buttons und Formularen steuert, bestimmt CSS, wie alles auf dem Monitor und in der Tasche des Kunden aussieht. Wenn der Inhaber sagt «die Website verrutscht auf dem Handy», sind fast immer Styles schuld: feste Breite, kleiner Text, «Kaufen»-Button außerhalb des Bildschirms, horizontaler Scroll, Formular, das man nicht mit dem Daumen ausfüllen kann. 2026 kommen über die Hälfte der Leads von kommerziellen Sites vom Mobilgerät - schlechtes Layout trifft die Conversion direkt, nicht «irgendwann».
- CSS - Gestaltung: Farben, Schriften, Raster, Anpassung an Bildschirme
- «Verrutscht» - horizontaler Scroll, überlappende Blöcke, abgeschnittener Text, Buttons außerhalb der Tap-Zone
- Warum für den Inhaber - Mobile-Kunden warten nicht auf die «Desktop-Version», sie gehen zum Wettbewerber
- Zusammenspiel - HTML (Struktur) + CSS (Aussehen) + JS (Interaktion); ohne CSS nur nackter Text
- Hauptrisiko - schönes Figma-Mockup am Desktop und kaputter Warenkorb auf dem iPhone
CSS in einfachen Worten
CSS ist ein Regelwerk für den Browser: «Überschrift - 24 Pixel und blau», «Button - volle Breite auf dem Handy», «Seitenmenü - ausblenden unter 768 Pixel». Das ist keine Programmierung im üblichen Sinn - Sie beschreiben Aussehen, nicht Geschäftslogik.
| Schicht | Aufgabe | Analogie |
|---|---|---|
| HTML | Überschriften, Text, Formulare, Links | Gebäudegerüst |
| CSS | Farben, Schriften, Abstände, Raster, Responsive | Innenausbau und Grundriss |
| JavaScript | Warenkorb, Slider, Formularprüfung | Aufzug, Alarm, Licht |
| PHP / Backend | Bestellungen, Zahlung, Datenbank | Technik hinter der Wand |
Wichtig: Der Dienstleister zeigt vielleicht eine perfekte Site auf Ihrem Laptop - 70% der Besucher sehen auf dem Handy etwas anderes, wenn CSS nicht für Mobile eingestellt ist.
Warum die Website auf dem Handy «verrutscht»
«Verrutscht» ist umgangssprachlich für Responsive-Probleme. Typische Symptome und CSS-Ursachen:
Horizontaler Scroll
Scrollbalken links-rechts - der Nutzer sieht die Site «abgeschnitten». Häufig:
- Block mit fester Breite (z. B. 1200 px) ohne
max-width: 100%; - große Preistabelle oder Katalog bricht nicht um auf schmalem Display;
- Banner oder Video breiter als der Handy-Bildschirm.
Überlappende Blöcke
Text überdeckt Button, Preis unter dem Foto, Menü über der Überschrift:
- Elemente mit absoluter Positionierung «wie im 1920-px-Mockup»;
- fehlende Abstände auf kleinen Screens;
- Schrift schrumpft nicht, Container wächst nicht - Inhalt läuft über.
Kleiner Text und Buttons
Auf dem Handy sind Lieferbedingungen unleserlich, «Zur Kasse» nicht treffbar:
- Fließtext unter 14-16 px;
- Buttons unter 44 px Höhe (Tap-Target-Empfehlung);
- Footer-Links dicht gedrängt.
«Desktop»-Version auf dem Handy
Site öffnet, alles winzig - Zoomen nötig:
- kein viewport im HTML;
- m.-Subdomain ohne Weiterleitungen;
- veraltetes Template ohne Media Queries.
5-Minuten-Check ohne Code
- Site auf eigenem Handy öffnen.
- Weg Start - Katalog - Produkt - Warenkorb - Checkout gehen.
- Hoch- und Querformat - nichts darf brechen.
- Kontaktformular einhändig ausfüllen.
- Mit Wettbewerber in derselben Nische vergleichen.
Wie kaputtes Mobile den Umsatz trifft
Nicht Ästhetik - Geld und Leads.
| Mobile-Symptom | Kundenverhalten | Geschäftstreffer |
|---|---|---|
| Horizontaler Scroll | Ärger, Tab zu in 3-5 s | Verlorener Lead |
| «Kaufen» unsichtbar | Sucht «X kaufen in der Nähe» | Verkauf an Wettbewerber |
| Formular passt nicht | Abbruch auf halbem Weg | Weniger Leads aus Ads und SEO |
| Langsame Ladung durch schweres CSS | 4+ s auf 4G | Bis 40% gehen vor dem Laden |
| Unlesbare Preise | Misstrauen | Weniger Conversion bei gleichem Traffic |
Orientierungszahlen:
- 53%+ E-Commerce-Sessions in manchen Nischen sind mobil.
- Google nutzt Mobile-First-Indexierung: schlechtes Mobile schadet Ranking und organischen Leads.
- Kritische CSS-Fixes am Checkout bringen oft +10-30% abgeschlossene Bestellungen ohne mehr Werbebudget.
Praxis: zählen Sie Leads vom Handy. Desktop 4%, Mobile 0,8% - fast sicher Layout, Speed oder UX.
Responsive, separates Mobile, App
Responsives Design
Eine Site, CSS ordnet Blöcke um. Vorteil: eine URL für SEO. Nachteil: sauberes CSS von Anfang an.
Separate Mobile-Version
Zweiter Seitensatz. Nachteile: zwei Codebasen, Preis-Drift, Indexierungschaos.
PWA / «App»
Sinnvoll bei Wiederholungskäufen; für Landing oft Overkill.
| Ansatz | Wann | Budget |
|---|---|---|
| Responsives CSS | Neue Site, WordPress | In gutem Layout enthalten |
| CSS-Nachbesserung | Traffic da, Mobile-Conversion gefallen | $500 - $3 000 |
| Komplett-Redesign | Marke alt, Mobile-Bounce > 60% | $3 000 - $15 000+ |
| Native App | Hunderttausende MAU | Ab $15 000 |
Regel: Für die meisten KMU 2026 reicht eine responsive Site mit getestetem CSS auf Schlüsselseiten.
Fragen bei der Abnahme
- Welche Seiten mobil getestet?
- PageSpeed / Core Web Vitals mobil?
- Eine URL für alle Geräte?
- Wer pflegt CSS danach?
- Garantie Mobile-Layout im Abnahmeprotokoll.
Eine SEO-Prüfung mit Mobile-Usability findet oft CSS-Probleme, die Conversion kosten.
Typische Fehler des Inhabers
- Nur Desktop bei Abnahme prüfen.
- Pixel-perfect auf dem Handy verlangen, obwohl Vereinfachung Conversion hebt.
- Widgets ohne Mobile-Test.
- Am Layout sparen, Werbung bezahlen.
- WordPress-Theme wechseln ohne Mobile-Checkout-Test.
Fazit
CSS ist, wie Ihre Site aussieht und ob sie auf dem Handy nutzbar ist. «Verrutscht» heißt fast immer Styles und Responsive - nicht Viren oder Hosting. Im Mobile-First-Zeitalter ist schlechtes Layout direkter Umsatzverlust.
Sinnvoll:
- Kaufweg auf echtem Handy vor Zahlung testen;
- Desktop vs. Mobile Conversion vergleichen;
- responsives CSS auf einer URL verlangen;
- keine Trend-Effekte, die 4G ausbremsen.
Gutes CSS ist unsichtbar - der Kunde bestellt. Schlechtes CSS: Sie zahlen Ads und SEO, die Hälfte sieht einen kaputten Schaufenster-Eindruck.
Häufig gestellte Fragen
Sind CSS und HTML dasselbe?
Nein. HTML ist Struktur; CSS ist Gestaltung. Ohne HTML nichts zu stylen; ohne CSS wirkt die Seite wie aus den 90ern.
Warum am PC gut und am Handy «verrutscht»?
Großer Monitor verträgt feste Breite; auf 390 px passen die gleichen Styles nicht. Fehlende Media Queries, breite Tabellen, alter Viewport.
Mobile ohne Komplettumbau fixen?
Oft ja - punktuelles CSS für Start, Katalog, Checkout. Bei sehr alten Sites Patch vs. neues Template vergleichen.
Schadet es dem Google-Ranking?
Ja. Mobile-friendly, Core Web Vitals, Verhaltenssignale. Yandex bewertet Mobile ebenfalls.
Was kostet ordentliches Responsive?
Landing $800 - $2 500; Corporate $2 500 - $8 000; Shop custom $5 000 - $20 000+; Mobile-Warenkorb auf WordPress $500 - $2 000. 10-15% für Tests auf echten Geräten einplanen.