Bei der Erstellung einer offiziellen Website ist eine responsive Gestaltung für kleine und mittlere Unternehmen inzwischen die gängige Wahl. Sie ermöglicht es, dass sich dasselbe Layout automatisch an verschiedene Bildschirmgrößen anpasst und spart die Kosten für eine separate mobile Website. Doch responsive Design bedeutet nicht, die Desktop-Version einfach proportional zu verkleinern. Bei der Umsetzung und im laufenden Betrieb gibt es einige wichtige Punkte, die im Voraus bedacht werden sollten.
Zunächst klären, was mobile Nutzer wirklich brauchen
Der Kern einer responsiven Seite ist die Anpassung des Inhalts, nicht technische Spielereien. Unternehmer können mit dem Handy die Websites einiger Wettbewerber besuchen und beobachten, welche Informationen auf dem kleinen Bildschirm am leichtesten zu finden sind. In der Regel legen Nutzer auf dem Smartphone mehr Wert auf Kontaktmöglichkeiten, die wichtigsten Produktvorteile, Fallbeispiele oder den Zugang zu Preisangeboten. Bei der Seitenplanung sollte man sicherstellen, dass diese Module auf dem mobilen Endgerät deutlich sichtbar und leicht antippbar sind, anstatt alle Inhalte auf einem Bildschirm zu stapeln.
In der Praxis empfiehlt es sich, bereits in der Designphase sowohl das Desktop- als auch das Mobile-Layout zu erstellen, anstatt die Desktop-Version später zu „komprimieren“. So lassen sich spätere Anpassungen des Stils vermeiden.
Navigation vereinfachen, nicht mit Menüs überladen
Mehrstufige Dropdown-Menüs, die auf dem Desktop üblich sind, werden auf dem Smartphone oft zu „Hamburger-Menüs“ oder aufklappbaren Listen. Wenn die Navigation zu tief verschachtelt ist, müssen Nutzer viele Klicks machen, um die gewünschte Seite zu erreichen, was die Absprungrate erhöht. Die Seitenstruktur kleiner und mittlerer Unternehmen ist in der Regel nicht umfangreich. Es wird empfohlen, die wichtigsten Menüpunkte auf höchstens fünf zu beschränken und sicherzustellen, dass die Klickflächen auf dem mobilen Endgerät groß genug sind (mindestens 44 Pixel hoch), um versehentliche Berührungen zu vermeiden.
Zusätzlich lohnt sich ein Suchfeld auf der mobilen Version, besonders wenn das Produktsortiment breit ist – Nutzer suchen dann lieber direkt, anstatt durch Menüs zu blättern.
Bilder und Tabellen gesondert behandeln
Bei responsiven Seiten sollten Bilder nicht nur über den Browser skaliert werden, da große Bilder die Ladezeit verlängern. Es wird empfohlen, responsive Bild-Tags (z. B. srcset) zu verwenden oder beim Hochladen mehrere Größenversionen zu generieren. Für Produktbilder ist es wichtig, dass sie auch auf dem Smartphone bei Vergrößerung scharf bleiben – das erfordert eine ausreichend hohe Auflösung des Originalbilds.
Wenn die Website Datentabellen oder komplexe Diagramme enthält, können diese auf dem Smartphone verzerrt dargestellt werden. Eine Möglichkeit ist, Tabellen in Kartenlisten umzuwandeln oder eine horizontale Scroll-Interaktion anzubieten. Allerdings übersehen Nutzer bei horizontalem Scrollen leicht Inhalte. Daher sollte man die Tabellenspalten so weit wie möglich reduzieren und nur die wichtigsten Daten anzeigen.
Tests nicht nur im Simulator durchführen
Viele Website-Baukästen bieten eine responsive Vorschau, aber der Simulator kann echte Gerätetests nicht vollständig ersetzen. Verschiedene Smartphone-Marken und Browser (wie der integrierte Browser von WeChat) unterstützen CSS unterschiedlich. Vor dem Launch empfiehlt es sich, mindestens ein iPhone und ein Android-Gerät zu verwenden und die Website sowohl im Browser als auch in WeChat zu öffnen, um zu prüfen, ob das Layout korrekt ist, Schaltflächen klickbar sind und die Schriftgröße angemessen ist.
Zudem sollte man sich beim Testen nicht nur auf die Startseite beschränken, sondern auch Produktdetailseiten, Artikelseiten und Kontaktformulare einzeln öffnen, da verschiedene Seitentemplates unterschiedliche responsive Eigenschaften haben können.
Laufende Pflege und kontinuierliche Aufmerksamkeit
Eine responsive Seite ist mit dem Launch nicht abgeschlossen – auch bei späteren Inhaltsaktualisierungen ist Vorsicht geboten. Beispielsweise sollte man bei langen Artikeln im Backend-Editor die mobile Vorschau prüfen; beim Hochladen neuer Bilder sollte man kontrollieren, ob sie automatisch komprimiert werden. Wenn die Website Drittanbieter-Plugins (wie Online-Chat oder Karten) verwendet, sollte man regelmäßig deren Darstellung auf mobilen Geräten überprüfen.
Kleine und mittlere Unternehmen haben oft keinen dedizierten Frontend-Entwickler. Daher ist es ratsam, ein Website-Baukastensystem zu wählen, das eine integrierte responsive Vorschau im Backend bietet, damit man nach jeder Aktualisierung schnell selbst kontrollieren kann.
Das Wesen einer responsiven Seite ist es, dass Nutzer auf jedem Gerät reibungslos Informationen abrufen können. Wenn man bei der Inhaltsplanung, Navigation, Bildern und Tests sorgfältig vorgeht, lassen sich häufige Probleme vermeiden. Falls die Website bereits online ist, kann man die oben genannten Punkte einzeln überprüfen und bei Problemen zeitnah Anpassungen vornehmen.
