Responsives Webdesign
Ein Webdesign, das sich der Bildschirmgröße anpasst.
Was „responsive“ konkret heißt
Während bei einem Katalog oder einem Flyer das Layout einmal gesetzt wird und dann für immer so bleibt, müssen die Inhalte bei einem Webdesign auf verschiedenen Geräten gut aussehen. Nicht zwei Webseiten – eine für den Desktop, eine extra fürs Telefon –, sondern ein HTML, das umbricht. Die Breakpoints sitzen dort, wo der Inhalt kippt, nicht bei einem Geräte-Namen.
Sich eine Webseite auf dem Telefon anzusehen ist Standard. Dass dieselben Inhalte auf einer Armbanduhr landen, ist unwahrscheinlich, aber möglich. Deshalb stellt sich das Layout dynamisch auf die Breite ein.
Warum das zählt
Am Telefon entscheidet sich, ob jemand weiterliest oder schließt. Zu kleine Klickflächen, Text der seitlich rausläuft, Formulare die man nicht ausfüllen kann: das kostet Anfragen. Google indexiert außerdem zuerst die mobile Ansicht – eine Seite, die am Handy nicht funktioniert, wird auch am großen Bildschirm schlechter gefunden.
Was sich anpassen muss
Nicht nur „das Bild wird schmaler“. Navigation (oft als Burger), Schriftgröße, Bilder, Tabellen und Formulare brauchen eigene Regeln. Was in einer Text-Bild-Spalte einfach untereinander fällt, muss an anderer Stelle bewusst entschieden werden.
Der schwierige Fall: Text auf Bild
Wo Text und Bild nur nebeneinander stehen, ist die Lösung meist einfach: untereinander setzen. Bei Text auf einem Bild muss inhaltsabhängig entschieden werden, welche Variante trägt:
- Text wird unter oder über das Bild gesetzt.
- Das Bild wird beschnitten, sodass nur noch ein schmaler Streifen des Bildes zu sehen ist, worauf sich dann der Text befindet.
- Es wird nur ein Teil des Textes angezeigt und der Rest ist über einen Link erreichbar.
- Das Bild wird als Texthintergrund gesetzt.
- usw.
Typische Fehler
Eine Extra-Domain nur für Mobilgeräte, Buttons unter 40 Pixel, Hero-Fotos mit 4000 Pixel Breite in einer schmalen Spalte, Inhalte die es nur am Desktop gibt. Wie Bilder richtig ausgeliefert werden, steht unter Bilder & Videos für Webseiten.
So setze ich das um
Ich baue Breakpoints am Inhalt, nicht an „iPhone“ oder „Desktop“. Getestet wird am echten Telefon, nicht nur am Schieber im Browser. Contao und Shopware sind das Werkzeug – die Entscheidung, was bei welcher Breite passiert, bleibt handgemacht.
Wenn Ihre Webseite am Telefon hakt oder Sie eine neue brauchen: so läuft ein Projekt ab – oder schreiben Sie mir über die Kontaktseite.
