Die Entwicklungen in der Browserlandschaft in den letzten Monaten haben es mit sich gebracht, dass dem Einsatz sinnloser Popups endlich Grenzen gesetzt werden. Tabbed-Browsing und Popup-Blocker unterstützen unsere Argumentation beim Kunden.

Doch da war eine Anwendung von Popups, die sich auch auf unseren Websites hartnäckig hielt: Vorschau-Bilder (Thumbnails), zumeist über Javascript mit dem Originalbild in einem Popup verlinkt. Ursprünglich war die Ladezeit (wer erinnert sich noch an die singenden Modems?) die Hauptmotivation dafür. Später waren es kompakte Layouts, in denen einfach kein Platz für detailreiche und größere Abbildungen vorgesehen war – man denke nur an dreispaltige Layouts, die sich mit 800 Pixel Breite begnügen müssen.

Neben den altbekannten Argumenten gegen Popups kam vor einigen Jahren noch ein weiteres Problem hinzu: die Druckansicht. Endlich war man nicht mehr auf eigene, servergenerierte Druckansichten angewiesen, sondern konnte über Stylesheets zuverlässige und schöne Druckansichten erzeugen. Aber natürlich nur mit den klitzekleinen Vorschaubildern, die so kaum von Nutzen waren.

Seit einiger Zeit verwenden wir nun bei WIENFLUSS eine neue Technik, bei der ich mich frage, warum sie nicht mehr Verbreitung findet.

Die Idee

Die Grundidee unserer Lösung besteht darin, dass beide Bilder, das kleine Vorschaubild und das größere Bild in Detailansicht, mit der Seite mitgeladen werden. Über entprechende Classes werden jedoch sämtliche großen Bilder in der Bildschirmansicht verborgen und nur die Thumbnails in der üblichen Form dargestellt. Mit einem Klick auf das jeweilige Bild kann man zwischen dem kleinen und dem großen Bild umschalten. In der Druckansicht werden – im Gegensatz zur Bildschirmansicht – nur die großen Bilder ausgedruckt.

Die Testseite zeigt eine mögliche Umsetzung. Der Übersichtlichkeit halber habe ich CSS und Javascript in den HTML Header integriert.

Die Details

Zuerst zum HTML-Code:

Ich gehe nur auf die wesentlichen Elemente im HTML ein:

• Die beiden korrespondierenden Bilder erhalten jeweils eine ID.
• Die Classes „small-show“ und „large-hide“ werden allen Vorschaubildern bzw. Detailansichten auf der Seite zugeordnet.
• Der Link um das Vorschaubild dient ausschließlich als Fallback für den Fall, dass Javascript nicht verfügbar ist. Er führt auf die Detailansicht. Wer möchte kann dafür auch (automatisch) eine eigene Seite mit Titel, Quellenangabe etc. generieren.
• Über die onclick-Eventhandler wird die Umschaltung zwischen beiden Bilder gesteuert.
• Das ALT-Attribut im Detailbild bleibt leer, damit Screen-Reader dieses Bilder überspringen.

Das Stylesheet ist weitegehend auf das Ein- und Ausblenden der Abbildungen reduziert:

Das Stylesheet benötigt ein wenig Erklärung.

• Als erstes sei auf die Trennung zwischen Bildschirm- und Druckansicht hingewiesen. Diese erfolgt wie üblich über die @media Syntax.
• Die beiden Classes „large-hide“, und „small-hide“ zum Verbergen von Bildern bedienen sich einer gängigen Technik, welche die betroffenen Elemente aus dem sichtbaren Bereich des Browsers hinausschiebt. Hier möchte ich darauf hinweisen, dass diese Technik üblicherweise dann eingesetzt wird, wenn man Inhalte visuell, jedoch nicht in Screen-Reader und Braillezeile, verbergen möchte (Überblick über verschiedene Techniken zum Verbergen von Inhalten). Semantisch korrekter wäre es eigentlich, das verborgene Bild mit der Eigenschaft „display: none“ auszublenden. Ein Bug (oder Feature) im Opera verhindert jedoch das Laden – und daher auch das Drucken – dieser Bilder.
• Die Regel „cursor: pointer“ verändert den Cursor, damit die Bilder als klickbar identifiziert werden können.

Damit die Umschaltung auch funktioniert, brauchen wir noch ein simples Javascript:

• Der Funktion werden vier Paramter übergeben: die beiden IDs der Bilder, die durch die Aktion gezeigt bzw. verborgen werden und die beiden Classes, die das erledigen sollen.
• Die Funktion ordnet dem jeweiligen Element seine neue Klasse zu.
• Der Rückgabewert „false“ stellt sicher, dass keine weiteren Aktionen ausgeführt werden; d.h. dass der Link auf dem Thumbnail wirkungslos bleibt.

Der Vergleich mit früheren Techniken

Zum Abschluss seien nochmals die Vor- und Nachteile dieser Technik zusammengefasst.

Vorteile:

• keine Popups,
• platzsparende Bildansicht am Bildschirm, detailgetreue Ansicht im Druck,
• hohe Browser-Kompatibilität durch geringe Komplexität,
• leicht serverseitig automatisierbar,
• barrierefrei und
• funktioniert auch hinreichend ohne Javascript

In den meisten Fällen wird man mit den Nachteile durchaus leben können:

• Für bildreiche Webseiten oder Benutzergruppen mit niedriger Bandbreite (ja, auch das gibt’s noch) ergeben sich unter Umständen lange Ladezeiten, da alle Bilder in zwei Ansichten mit der Seite mitgeladen werden.
• Ohne Stylesheet-Unterstützung werden beide Bildvarianten angezeigt.
• Ohne Server-Automatisierung ist das Erstellen des HTML-Codes etwas umständlich, aber das war bei der alten, popup-basierten Varianten ebenso.

Verbesserungen und Erweiterungen

Zwei mögliche Optimierungen, die wir selbst bereits eingesetzt haben, seien hier angedeutet:

Wenn die Detailansicht mit dem verfügbaren Platz nicht auskommt, kann man das große Bild auch in einem absolut positionierten Bild über dem Seiteninhalt anzeigen. Das erfordert nur ein wenig mehr HTML, CSS und Javascript, ist aber keine Hexerei. Am besten man hantelt sich mit dem Suchbegriff „Lightbox“ zu einer möglichen Lösung dafür weiter.

Anstatt der etwas unsauberen Eventattribute „onclick“ im HTML, kann man die Events natürlich auch über Javascript den jeweiligen Elementen zuordnen. Das erhöht die Flexibilität, wurde aber hier aus Gründen der Übersichtlichkeit und Verständlichkeit unterlassen.