Responsive Galerie: Bilder auf jedem Gerät

Sie schicken den Link zu Ihren Urlaubsfotos per Messenger an die Familie, und fast alle öffnen ihn auf dem Handy. Ist die Galerie für einen Monitor gebaut, sagen wir vier Vorschaubilder zu je 200 Pixeln nebeneinander, braucht sie gut 900 Pixel Breite. Ein Handy bietet vielleicht 390. Der Browser verkleinert dann entweder die ganze Seite, bis alles winzig ist, oder er zeigt einen Ausschnitt, und man muss zur Seite wischen. Eine responsive Galerie vermeidet beides. Sie liest die Breite des Bildschirms ab und ordnet dieselben Fotos so an, dass sie ohne Zoomen und ohne seitliches Wischen passen.

Responsive Galerie am Monitor mit vier Vorschaubildern pro Reihe und auf dem Handy mit 390 Pixel Breite in zwei Spalten

Woher eine responsive Galerie die Bildschirmbreite kennt

Damit das klappt, greifen drei Dinge ineinander. Das erste ist eine unscheinbare Zeile im Kopf der Seite, das Viewport-Meta-Tag width=device-width. Fehlt es, tun Handybrowser so, als wären sie rund 980 Pixel breit, und verkleinern das Ergebnis. Die Seite sieht dann aus wie eine Briefmarke der Desktopfassung, und jede noch so gute Anpassung im Stylesheet greift ins Leere.

Das zweite sind Regeln, die nur ab oder bis zu einer bestimmten Breite gelten, sogenannte Media Queries. Ein Satz wie „bis 600 Pixel Breite stehen die Bilder in zwei Spalten“ ist genau so eine Regel. Das dritte sind Raster, die sich selbst verteilen: Statt „vier Spalten“ heißt es dort „so viele Spalten, wie Kacheln mit mindestens 200 Pixeln nebeneinander passen“. Auf einem 1200 Pixel breiten Bildschirm ergibt das fünf Spalten, auf einem Tablet mit 768 Pixeln drei, auf dem Handy eine. Eine eigene Handyadresse oder eine zweite Fassung der Seite braucht es dafür nicht.

Was sich zwischen Monitor und Handy ändert

Die Spaltenzahl fällt am meisten auf, sie ist aber nicht das Einzige, was sich anpassen muss. Diese Übersicht zeigt, worauf es bei einer Galerie je Gerät ankommt:

Gesichtspunkt	Monitor	Handy
Platz für Vorschaubilder	reicht für drei bis fünf Spalten	reicht für zwei Spalten mit je etwa 170 Pixeln
Zeigen und Klicken	Maus mit Mauszeiger, Hinweise beim Darüberfahren möglich	Finger ohne Zeiger, Hinweise beim Darüberfahren sieht niemand
Trefferfläche	kleine Schaltflächen sind kein Problem	etwa 44 × 44 Pixel, damit der Daumen sicher trifft
Große Ansicht	Bild bis zur Fenstergröße	Bild muss auf rund 390 × 700 Pixel passen, im Querformat auf noch weniger Höhe

Die Trefferfläche wird gern unterschätzt. Ein „Schließen“-Knopf mit 16 Pixeln lässt sich mit der Maus mühelos treffen, mit dem Daumen landet man drei Versuche lang auf dem Bild dahinter.

Die unsichtbare Hälfte: passende Dateigrößen

Umordnen allein reicht nicht. Eine responsive Galerie sollte dem Handy auch keine Dateien schicken, die es nicht braucht. Ein Original mit 4000 × 3000 Pixeln hat zwölf Millionen Bildpunkte. Ein Handy mit 390 Pixeln Breite und dreifacher Pixeldichte stellt in der Breite höchstens 1170 echte Bildpunkte dar. Eine Kopie mit etwa 1000 bis 1200 Pixeln an der langen Seite sieht dort genauso scharf aus wie das Original und ist nur einen Bruchteil so groß. Wer im Mobilfunknetz durch 30 Fotos blättert, merkt den Unterschied an der Wartezeit und am Datenvolumen.

Moderne Seiten bieten dem Browser dafür mehrere Größen derselben Datei an, aus denen er sich die passende aussucht. Einfacher und für eine Galerie meist ausreichend ist eine einzige verkleinerte Fassung für die große Ansicht, die auf jedem Gerät funktioniert.

Typische Fehler und woran man sie erkennt

Ob eine Galerie wirklich responsiv ist, verraten ein paar Anzeichen schon beim ersten Blick auf dem Handy:

Die ganze Seite ist winzig: Das Viewport-Meta-Tag fehlt, meist weil jemand die Vorlage durch eine ältere Kopfzeile ersetzt hat.
Ein seitlicher Rollbalken erscheint: Irgendein Element hat eine feste Breite, oft ein eingebettetes Fenster (iframe) mit 1000 Pixeln oder eine breite Tabelle.
Bildtitel fehlen auf dem Handy: Die Beschreibung erscheint nur beim Darüberfahren mit der Maus. Auf dem Touchscreen gibt es kein Darüberfahren, die Information muss an anderer Stelle stehen.
Das große Bild ragt aus dem Fenster: Die Lightbox rechnet mit einer festen Größe statt mit der Fenstergröße. Im Querformat ist das besonders auffällig.

Eine responsive Galerie selbst testen

Am zuverlässigsten ist das eigene Handy, ergänzt um den Entwicklermodus des Browsers am Computer. In Chrome und Firefox öffnen Sie ihn mit F12 und schalten mit Strg, Umschalt und M die Geräteansicht ein. Dort stellen Sie Breiten wie 390, 768 und 1280 Pixel ein und sehen sofort, wo die Anordnung wechselt. Prüfen Sie dabei vier Dinge: ob es irgendwo einen seitlichen Rollbalken gibt, ob sich jedes Vorschaubild mit dem Daumen antippen lässt, ob die große Ansicht vollständig ins Fenster passt und ob Sie aus jeder Kategorie zurück zur Übersicht finden. Drehen Sie das Handy zum Schluss ins Querformat. Dort ist die Höhe knapp, und Fehler in der großen Ansicht zeigen sich zuerst.

So verhält sich die responsive Galerie im Bildergalerie-Script

Die responsive Galerie des Bildergalerie-Scripts kommt ohne CSS-Framework aus. Die mitgelieferte Vorlage tpl/bildergalerie.html enthält das Viewport-Meta-Tag bereits, und alle Regeln für schmale Bildschirme stehen am Ende von css/layout.css in einem einzigen Block für Breiten bis 600 Pixel. Ausgelegt ist die Seite bis hinunter zu 390 Pixel, der Breite eines typischen Smartphones.

Bereich	Breiter Bildschirm	Bis 600 Pixel Breite
Rahmen	weiße Karte, höchstens 980 Pixel breit, mittig	volle Breite, ohne Schatten und runde Ecken
Kategorie-Kacheln	Raster mit mindestens 340 Pixel je Kachel, Titelbild 140 × 105 Pixel	eine Spalte, Titelbild 96 × 72 Pixel
Vorschaubilder	so viele pro Reihe wie unter „Vorschaubilder pro Zeile“ eingestellt (Standard 2, erlaubt 1 bis 20)	immer zwei Spalten, egal welcher Wert eingestellt ist
Große Ansicht	Bild wird ans Browserfenster angepasst	ebenso, Blättern durch Antippen der linken oder rechten Bildhälfte, aber ohne sichtbare Pfeile

Wie viele Kacheln und Vorschaubilder nebeneinander stehen, folgt aus wenigen Zahlen in css/layout.css. Ab 982 Pixel Fensterbreite ist die weiße Karte voll ausgefahren: 980 Pixel innen, dazu links und rechts je 1 Pixel Rahmen. Nach dem Innenabstand von je 32 Pixel bleiben 916 Pixel für den Inhalt. Wer das Browserfenster langsam schmaler zieht, durchläuft mit zwei Kategorien und „Vorschaubilder pro Zeile“ = 4 drei Stufen:

Ab 762 Pixel: Zwei Kategorie-Kacheln stehen nebeneinander. Sie brauchen 2 × 340 Pixel plus 16 Pixel Abstand, also 696 Pixel Inhalt. Mit 64 Pixel Innenabstand und 2 Pixel Rahmen ergibt das genau die 762. Drei Kacheln bräuchten 1052 Pixel und passen auch bei voller Breite nicht. Die vier Vorschaubilder teilen sich die 916 Pixel zu Zellen von 229 Pixel. Nach je 10 Pixel Zellenabstand links und rechts bleiben 209 Pixel, ein 200 Pixel breites Vorschaubild erscheint also in voller Größe.
Von 601 bis 761 Pixel: Nur noch eine Kachel passt in eine Zeile. Die vier Vorschaubilder bleiben in einer Reihe und werden schmaler, bei 700 Pixel Fensterbreite auf rund 138 Pixel.
Bis 600 Pixel: Der Handyblock greift. Der seitliche Rahmen entfällt, der Innenabstand sinkt auf 16 Pixel, und die Vorschaubilder stehen in zwei festen Spalten mit 12 Pixel Abstand. Auf einem Handy mit 390 Pixel bleiben 358 Pixel Inhalt, jedes Vorschaubild wird damit etwa 173 Pixel breit, obwohl es mit 200 Pixel erzeugt wurde.

Das Diagramm spielt diese drei Stufen an einer einzigen Seite durch, deren Fenster von 982 auf 700 und dann auf 390 Pixel schrumpft. Die Skala darunter markiert die beiden Grenzen bei 762 und 600 Pixel und zeigt, welche Anordnung zwischen ihnen gilt.

Zwei Grenzen entscheiden: Unter 762 Pixel steht eine Kachel je Zeile, ab 600 Pixel abwärts gelten zwei feste Spalten Vorschaubilder.

Was aus einem 12-Megapixel-Foto wird

Ein Foto mit 4000 × 3000 Pixel lädt auf dem Handy nicht in voller Größe. Unter „Einstellungen“ im Abschnitt „Große Ansicht (Lightbox)“ stehen „Maximale Breite der großen Ansicht“ und „Maximale Höhe der großen Ansicht“, ab Werk je 1024 Pixel. Die Galerie legt dafür einmal eine Kopie mit 1024 × 768 Pixel unter bilder/tn/ ab. Das sind rund 0,8 statt 12 Millionen Bildpunkte, also etwa ein Fünfzehntel. Hochformat-Fotos dreht die Galerie anhand der EXIF-Angabe richtig herum. Das Original auf dem Server bleibt unverändert.

Die Lightbox hält zum Fensterrand 10 Pixel Abstand und reserviert unter dem Bild 70 Pixel für Bildunterschrift und Zähler, deshalb passt das Bild auch im Querformat ins Fenster. Die Beschreibung eines Bildes steht dort als Bildunterschrift, Handynutzer sehen sie also, obwohl sie nicht mit der Maus über das Vorschaubild fahren können. Eine Lücke bleibt bei der Bedienung: Ein Tipp auf die rechte Bildhälfte blättert weiter, einer auf die linke zurück, doch die Pfeile, die das verraten, erscheinen nur, wenn eine Maus über dem Bild steht. Auf dem Handy weist allein der Zähler „Bild 3 von 12“ darauf hin, dass es weitergeht. Geschlossen wird die Ansicht über die Schaltfläche rechts unter dem Bild oder mit einem Tipp auf die dunkle Fläche daneben.

Nicht enthalten sind Wischgesten in der Lightbox und das Nachladen von Bildern beim Scrollen. Alle Vorschaubilder einer Kategorie stehen auf einer Seite. Große Bildmengen verteilen Sie deshalb besser von Anfang an auf mehrere Kategorien. Die Verwaltung ist ebenfalls responsiv: Unter 900 Pixel Breite klappt das Menü hinter den Knopf „Menü“, auf dem Handy werden Tabellen zu untereinander stehenden Karten. Sie können also unterwegs Bilder hochladen und Beschreibungen ändern. Wer die responsive Galerie am eigenen Handy ausprobieren will, kann das Bildergalerie-Script kostenlos herunterladen.

Häufige Fragen

Rund um die Darstellung auf dem Handy wollen Betreiber vor allem wissen, wie viele Bilder nebeneinander passen und ob sie selbst etwas einrichten müssen.

Wie viele Bilder zeigt eine responsive Galerie pro Reihe?

Das hängt von der Mindestbreite ab, die das Raster je Bild verlangt. Bei 200 Pixeln und etwas Abstand passen auf 1200 Pixel Inhaltsbreite fünf Bilder, auf ein Tablet mit 768 Pixeln drei und auf ein Handy nur eines. Viele Galerien, auch das Bildergalerie-Script, legen deshalb für schmale Bildschirme fest zwei Spalten mit kleineren Vorschaubildern fest, damit auf dem Handy nicht jedes Foto eine ganze Zeile füllt.

Brauche ich eine eigene Handy-Version meiner Galerie?

Nein. Eine responsive Galerie ist dieselbe Seite unter derselben Adresse, nur das Stylesheet ordnet sie je nach Breite anders an. Eine getrennte Handyfassung müssten Sie doppelt pflegen, und Suchmaschinen fänden zwei Adressen für denselben Inhalt.

Wie prüfe ich, ob meine Galerie auf dem Handy gut funktioniert?

Öffnen Sie sie am eigenen Handy und am Computer im Entwicklermodus des Browsers (F12, dann Strg, Umschalt und M) bei 390 Pixeln Breite. Achten Sie auf seitliche Rollbalken, zu kleine Trefferflächen und darauf, ob die große Ansicht auch im Querformat vollständig ins Fenster passt.

Kann ich im Bildergalerie-Script auf dem Handy drei Vorschaubilder pro Reihe zeigen?

Nicht über die Einstellungen, denn bis 600 Pixel Breite gelten immer zwei Spalten. Wer es trotzdem will, legt in einer eigenen CSS-Datei, die nach css/layout.css geladen wird, einen Block @media only screen and (max-width: 600px) an und setzt darin table.bilder_tabelle tbody { grid-template-columns: repeat(3, minmax(0, 1fr)); }. Bei 390 Pixel Breite wird jedes Vorschaubild dann gut 110 Pixel breit.