Eine responsive Website gibt es nur in einer Version. Das Layout reagiert aber auf die Breite des Bildschirms. Auf dem Computer stehen drei Spalten nebeneinander, auf dem Handy rutschen sie untereinander. Bilder werden kleiner, das Menü klappt zu einem Symbol zusammen. Technisch steuern das sogenannte Media Queries im CSS, also Regeln wie «ab dieser Breite zeige das Layout so».
Gute Websites entstehen heute «mobile first». Das heisst: Zuerst wird die Handy-Ansicht geplant, danach die grösseren Bildschirme. Das zwingt zur Konzentration auf das Wesentliche. Auf einem kleinen Bildschirm ist kein Platz für Überflüssiges.
Für eine Firma ist das kein Detail. Viele Menschen suchen unterwegs am Handy nach Öffnungszeiten, Telefonnummer oder Weg. Google nutzt für Indexierung und Ranking zudem die mobile Version einer Website. Was auf dem Handy fehlt oder schlecht funktioniert, schadet also auch bei der Suche.
Darauf solltest du achten:
- Lesbare Schrift ohne Zoomen und mit genug Zeilenabstand.
- Grosse Tippflächen: Knöpfe und Links brauchen Abstand, damit niemand daneben tippt.
- Kein seitliches Scrollen: Nichts darf über den Bildschirmrand hinausragen, auch keine Tabellen.
- Wichtiges zuerst: Telefonnummer, Adresse und Anfrage-Knopf sind schnell erreichbar.
- Echte Geräte testen: Die Vorschau im Browser ersetzt keinen Test auf einem echten Handy.
Wir planen jede Website zuerst für das Handy und erst dann für grosse Bildschirme.
Eine Bäckerei in Sursee hat eine ältere Website, die nur für den Computer gebaut wurde. Am Handy erscheint die ganze Seite winzig. Wer die Bestellung für den Sonntagszopf aufgeben will, muss zoomen und seitlich scrollen. Das Formular ist kaum zu treffen. Nach dem Umbau auf ein responsives Layout stehen Öffnungszeiten und Telefonnummer am Handy ganz oben. Ein Tipp auf die Nummer startet den Anruf. Das Bestellformular passt in die Bildschirmbreite und hat grosse Felder. Am Computer sieht die Seite weiterhin aufgeräumt aus, mit Bildern und Text nebeneinander.