Mobile Websites als ein responsives Angebot planen

Ein Dokument statt zweier Wahrheiten

Responsive CSS ordnet Navigation, Spalten und Medien anhand des verfügbaren Platzes neu. Semantisches HTML bleibt dabei unabhängig vom Layout verständlich. Eine getrennte mobile URL erzeugt dagegen zusätzliche Weiterleitungs-, Canonical- und Pflegefragen.

Bilder erhalten passende Abmessungen und Varianten, Texte eine gut lesbare Zeilenlänge. Bedienelemente brauchen Abstand; wichtige Aktionen dürfen nicht nur bei Maus-Hover sichtbar sein.

Mobile-First betrifft den abrufbaren Inhalt

Google verarbeitet für die Indexierung überwiegend die mobile Fassung. Fehlen dort Haupttext, interne Links oder strukturierte Daten, kann die Desktopversion diesen Mangel nicht zuverlässig ausgleichen. Ausklappbare Bereiche sind möglich, solange Inhalt tatsächlich im Dokument vorhanden und zugänglich ist.

Performance beginnt mit wenigen notwendigen Ressourcen, komprimierten Bildern und stabil reserviertem Platz. Eine pauschale Skriptbibliothek für jede Kleinigkeit ist selten die beste erste Maßnahme.

Prüfrunde auf dem kleinen Bildschirm

Diese Abfolge kombiniert Inhalt, Bedienbarkeit und Technik:

• Startseite und zwei tiefe Seiten auf echtem Smartphone ohne WLAN öffnen.
• Navigation, Formulare, Fehlermeldungen und Zurück-Funktion mit Touch bedienen.
• Mit vergrößerter Schrift auf abgeschnittene Texte und überlagerte Elemente prüfen.
• Desktop und Mobil bei Hauptinhalt, Links, Canonical und strukturierten Daten vergleichen.
• Bildgrößen, Layoutsprünge und blockierende Skripte mit Browserwerkzeugen untersuchen.

Breakpoints folgen dem Inhalt

Ein Breakpoint wird dort gesetzt, wo eine Komponente nicht mehr sinnvoll funktioniert, nicht für ein bestimmtes Gerätemodell. Karten, Tabellen und Vergleiche können jeweils eine eigene schmale Darstellung benötigen.

Priorisierung bedeutet Reihenfolge, nicht Löschung. Eine Kaufentscheidung braucht mobil dieselben Einschränkungen wie am Desktop; nur dekorative Elemente und doppelte Wege dürfen entfallen.

Screenshots in mehreren Breiten erkennen sichtbare Brüche, automatisierte Barrierefreiheitstests ergänzen sie. Tastatur, Screenreader und reale Touch-Nutzung bleiben manuelle Prüfpunkte.

Bei jeder neuen Komponente werden lange Überschriften, große Schrift, langsame Verbindung und fehlende Bilder mitgedacht. So wird Mobilfähigkeit nicht zu einer Reparatur kurz vor Veröffentlichung.