Responsive Webdesign, warum das Handy eine eigene Fassung braucht

Responsive heißt, dass eine Seite auf jede Breite reagiert

Eine responsive Website hat eine Adresse und einen Inhalt. Wer sie auf dem Handy öffnet, sieht dieselben Texte und Bilder wie am Schreibtisch. Anders ist nur die Anordnung. Spalten rücken untereinander, Schriften werden kleiner, Menüs klappen ein.

Das war nicht immer so. Lange bauten Firmen für das Handy eine zweite Seite unter einer eigenen Adresse. Jeder Text musste dann zweimal gepflegt werden, und auf der kleinen Fassung fehlte oft ein Teil der Inhalte. Responsive Webdesign löst das mit einer einzigen Seite, die auf die Breite reagiert.

Daneben gibt es Adaptive Design. Dort entstehen feste Layouts für wenige Größen, und die Seite springt zwischen ihnen hin und her. Ein responsives Layout passt sich dagegen auch zwischen diesen Größen an.

Zwei Umschaltpunkte, drei Entwürfe

An einem Umschaltpunkt wechselt das Layout. Im Fachjargon heißt er Breakpoint, also die Breite, ab der andere Regeln gelten. Unsere Website kennt genau zwei davon, bei 810 und bei 1200 Pixeln. Die Vorgaben, die das Framework von Haus aus mitbringt, haben wir gelöscht. Damit gibt es nur diese zwei.

Die Basis ist das Handy, entworfen auf 390 Pixeln Breite. Das nennt sich Mobile First, weil Entwurf und Code beim kleinsten Bildschirm beginnen. Tablet und großer Bildschirm bauen darauf auf. Daraus ergeben sich drei Entwürfe für jede Seite.

• Handy, entworfen auf 390 Pixeln, gilt bis zum ersten Umschaltpunkt
• Tablet, gilt ab 810 Pixeln
• Großer Bildschirm, gilt ab 1200 Pixeln

Zwischen den Punkten fließt das Layout mit der Breite, bis der nächste erreicht ist. Für Kundenprojekte gilt dasselbe. Im Website Design entsteht jede Seite in drei Entwürfen, und jede Größe bekommt ihre eigene Ordnung.

Die zwei Werte stehen nicht verstreut im Code. Sie liegen als benannte Größen in einem Design-System, an einer Stelle für die ganze Website. Unsere Zahlen sind trotzdem kein Standard. Ein anderes Projekt kann andere Punkte brauchen.

Auf dem Handy entscheidet die Reihenfolge

Was am Schreibtisch nebeneinander steht, steht auf dem Handy untereinander. Damit muss jemand entscheiden, was zuerst kommt. Die Frage stellt sich bei jedem Abschnitt neu, und kein Framework beantwortet sie.

Ein Beispiel ist unsere Kontaktseite. Am großen Bildschirm stehen ein Formular und ein Kalender für einen Termin nebeneinander. Darunter rücken beide untereinander, das Formular oben und der Kalender darunter.

Auch Überschriften brechen auf schmalen Bildschirmen anders um. Am großen Bildschirm setzen wir den Zeilenumbruch von Hand. Darunter bricht der Text nach der Breite, und dabei bleibt leicht ein einzelnes Wort allein in der letzten Zeile stehen. Unsere Website gleicht die Zeilen großer Überschriften deshalb aus. Gemessen auf allen damaligen Seiten bei 810 Pixeln hat das 19 solcher Fälle behoben und keinen verschlechtert.

Ein Querformat taugt selten für das Handy

Ein breites Bild wird auf dem Handy entweder winzig oder beschnitten. Beides kostet oft genau das, worum es im Bild geht. Die Antwort heißt Art Direction, also für jedes Format ein eigenes Motiv statt eines Ausschnitts. Auf unserer Website gibt es dafür zwei Beispiele.

• Das Bildband mit unseren Arbeiten zeigt ab Tablet Motive im Querformat 16:9 und auf dem Handy andere Motive im Hochformat 4:5
• Die großen Titelbilder unserer Projektseiten haben eine eigene Hochkant-Fassung, weil der Schriftzug im Querformat abgeschnitten wäre

Der Browser lädt dabei nur das Motiv, das zur Breite passt. Das Handy bekommt also kein großes Querformat, das es danach verkleinert. Ob ein Motiv beide Formate trägt, entscheidet sich allerdings früher, beim Key Visual einer Marke.

Auf dem Handy darf etwas wegfallen

Auf dem Handy ist weniger Platz, also fällt etwas weg. Unsere Regel dafür ist einfach. Was Inhalt ist, bleibt. Was nur auflockert, darf gehen.

Die Bildstrecken auf den Seiten unserer Programme sind unter 810 Pixeln ausgeblendet. Dort lockern sie den Text auf, mehr nicht. Auf den Seiten zu unseren Projekten bleiben dieselben Bildstrecken stehen, weil sie dort der Beweis sind. Derselbe Baustein bekommt also je nach Seite eine andere Antwort.

Manches fällt ganz weg. Das Inhaltsverzeichnis neben diesem Artikel gibt es erst ab 1200 Pixeln. Darunter fehlt es ersatzlos, ohne Aufklapper und ohne Menü.

Anderes funktioniert nur mit Maus. Hover-Effekte sind kleine Bewegungen, wenn der Mauszeiger über ein Element fährt. Bei uns laufen sie nur auf Geräten mit Maus oder Trackpad. Auf einem Touchscreen löst ein Tippen sie sonst aus, und sie bleiben hängen.

Ein schmales Browserfenster ist noch kein Handy

Eine responsive Seite lässt sich schnell prüfen, indem man das Browserfenster schmal zieht. Das zeigt die Breite, aber nicht das Gerät. Es fehlen die Leisten des Browsers, das Tippen mit dem Finger und die Eigenheiten einzelner Browser. Zwei Fehler auf unserer Website fielen erst auf echten Geräten auf.

Der erste betraf die Höhe des ersten Bildschirms. Auf dem Handy blenden Browser ihre Leisten beim Scrollen ein und aus. Damit ändert sich die nutzbare Höhe, und ein Bild in voller Bildschirmhöhe ruckelt mit. Vor allem in Brave reichten die üblichen Mittel dagegen nicht. Unsere Website hält die Höhe deshalb einmal beim Laden fest und rechnet sie erst neu, wenn sich die Breite ändert.

Der zweite zeigte sich nur am iPhone. Am unteren Rand des Bildbands erschien ein schwarzer Streifen, weil Safari die Bildkante gegen den Untergrund glättet. Jetzt ragt jedes Bild um einen Pixel über seinen Rand hinaus. Geprüft haben wir das danach am iPhone selbst.

Fehler dieser Art fallen erst auf, wenn jemand die Seite in der Hand hält. Deshalb gehört das echte Gerät in jede Prüfung, auch wenn das schmale Fenster schneller ist.