Kategorie: Responsive Design

Der Widow Tamer, zu deutsch Witwenzähmer, kümmert sich um eine spezielle typografische Fragestellung. Von einer Witwe spricht der Entwickler Nathan Ford im Zusammenhang mit seinem Tool dann, wenn am Ende eines Absatzes lediglich eine geringe Zahl von Zeichen übrig bleibt, diese aber dennoch in eine neue Zeile umgebrochen werden. Diese extrem kurze Zeile störe dann den Lesefluss, vor allem aber die Optik und gehöre „gezähmt“, so Ford. Bei statischen Layouts kann prinzipiell der Designer im Vorfeld darauf achten, solche Effekte zu vermeiden, bei responsiven Layouts liegt das außerhalb seines Einflussbereichs.

Sicherlich schwerer zu zähmen als typografische Witwen… (Bildquelle: bagal / pixelio.de)

Widow Tamer JS: Konfigurierbar und mit flexiblen Methoden ausgestattet

Das Ziel des Widow Tamers ist simpel. Vermeide eine letzte Absatzzeile, wenn diese weniger als X Zeichen hätte. Die Anzahl der Zeichen ist konfigurierbar und abhängig vom Hauptlayout, konkret von der Anzeigebreite eines einzelnen Absatzes. Bei dem einen werden schon 14 Zeichen zu einer unschönen Optik führen, bei anderen erst fünf. Da ist es gut, dass man dem Widow Tamer eben diesen Wert flexibel innerhalb der Funktion unter Verwendung von etwa chars: 14, mitteilen kann.

Die zentrale Funktion wt.fix() wird beim Laden der Seite initialisiert und wartet dann auf den Eintritt des definierten Events. Bei jedem Auftreten des Events wird sie ausgeführt. Ein Beispiel sähe so aus:

wt.fix({
	elements: '#posts article p',
	chars: 14,
	method: 'padding-right',
	event: 'resize'
    });

In Zeile 1 finden Sie den bereits genannten Funktionsaufruf. In Zeile 2 wird definiert, auf welche Elemente der Widow Tamer angewendet werden soll. Grundsätzlich wird das zumeist der P-Tag sein, aber auch andere Elemente sind durch das Script bearbeitbar. In Zeile 3 erfolgt die Definition der Witwe an sich, also die Angabe, ab wieviel Zeichen eine Zeile als Witwe erkannt werden soll. Zeile 4 bestimmt die Methode, mit der zur Witwenzähmung geschritten wird. Hierbei kann es sich um die Erhöhung oder Verringerung des Wort-Abstandes oder des Zeichenabstandes, sowie ein padding links oder rechts oder der Einsatz von nonbreaking Spaces handeln. Die beiden erstgenannten Methoden würden in Zeile 6 auf Vergrößerung oder Verringerung gesetzt. Schlussendlich wird dem Script noch das zu überwachende Event übergeben. In responsiven Layouts wird es sich hier in der Regel um resize handeln.

Zwei Screenshots nach Resize zeigen das Ergebnis der Witwenzähmung:

Aufruf in klein dimensioniertem Browserfenster

Völlig neue Umbrüche nach Resize

Auf der Website Artequalswork.com kann das Script live in Aktion betrachtet werden. Spielen Sie einfach ein bisschen mit der Größe des Browserfensters durch Ziehen mit der Maus. Der Effekt wird schnell sichtbar.

Nathan Fords Widow Tamer ist erst ein paar Tage alt. Ford twitterte seine Geburt am 22. Juni:

Meet “The Widow Tamer”: A script for auto-fixing type widows on your site.https://t.co/XA5Qy6Fr

See it in action on http://t.co/KsMQJ2Kj

— Nathan Ford (@nathan_ford) June 22, 2012

Das Script steht auf GitHub zum kostenlosen Download und zur freien Verwendung bereit. Ford erwartet, dass man seine Copyrightnotiz gemeinsam mit dem Script einsetzt und nicht entfernt. Ansonsten gibt es keine weitere Beschränkungen.

Responsives Design stand nicht von Beginn an auf der Agenda zur Erweiterung des HTML-Standards hin zur Version 5. Und so schlägt man sich auch heute noch mit manchen Fragestellungen eher schlecht als recht herum. Das Thema “Bilder in responsiven Layouts” gehört dazu. An sich sind Bilder über das neue Figure-Tag einzubinden, doch gibt es auch den Vorschlag, stattdessen ein neues, eigenes Picture-Tag mit untergeordneten Source-Tags einzuführen. Das Plugin jQuery Picture kann mit beiden Varianten umgehen und Bilder in responsiven Layouts zuverlässig steuern.

Picture-Tag: Eine Lösung speziell für Bilder

Das Picture-Tag ergibt in responsiven Layouts den meisten Sinn. Innerhalb eines Picture-Containers platziert man mehrere Source-Tags mit den URLs der verschiedenen, zum gleichen Picture-Container gehörenden Bilder. Dem jeweiligen Source-Tag gibt man die zugehörige Media-Query direkt mit. So könnte das aussehen:

Sie erkennen die Funktionalität auf einen Blick. Der Picture-Container enthält drei Bilder, von denen das größte, large.png, ab einer Viewport-Breite von 600 Pixeln angezeigt werden soll. Darunter, ab einer Breite von 440 Pixeln, käme medium.png zur Anzeige und bei noch kleineren Auflösungen diente small.png als Foto der Wahl. In einem Noscript-Bereich erfolgt die Angabe eines Bildes für die Indexierung durch Suchmaschinen, sowie im Falle von jQuery Picture, zur Anzeige durch Besucherbrowser ohne Javascript.

Eine schöne Sache also. Der Haken ist nur: Dieser Vorschlag ist bislang nur ein Vorschlag. Kein großer Browser führt die Implementation zum jetzigen Zeitpunkt. Ohne das Plugin jQuery Picture ist die Lösung derzeit so nicht zu verwenden.

In der W3C Community Group zum Responsive Imaging liegt derweil bereits der nächste Vorschlag vor. Danach könnte man sich in Zukunft möglicherweise auf ein Pic-Element einigen, das im Prinzip genauso arbeitet wie das Picture-Element, aber schon als Tag und auch in der weiteren Syntax mit weniger Schreibarbeit auskommen würde. Jetzt allerdings erst einnmal zurück zu jQuery Picture.

Das Plugin jQuery Picture bringt schon jetzt die Unterstützung für das Picture-Element in Form einer einfach auf das entsprechende Element zeigenden Funktion mit.

jQuery Picture: Figure-Element mit Data-Attributen

Nicht nur das experimentelle Picture-Element wird durch jQuery Picture verstanden und korrekt umgesetzt, auch die Verwender der standardkonformen Figure-Tags können ihre Bilder mit Hilfe des Plugins zuverlässig responsiv auslegen. Dazu müssen erneut HTML5s neue Data-Attribute herhalten. Mit ihrer Hilfe wird das Figure-Tag um weitere Bild-URLs erweitert. Das geht ganz einfach:

Sie sehen, dass die Bild-URLs in Attributen, die mit data-media beginnen, verpackt werden. Die erste Anweisung ohne zusätzlichen Zahlenwert repräsentiert das Bild, das später in der kleinsten Auflösung angezeigt werden wird. Die in data-media440 verpackte URL kommt zum Tragen, wenn der Viewport mindestens 440 Pixel breit ist und so weiter. Naheliegenderweise sollten die Pixelwerte mit den ansonsten definierten Breakpoints korrelieren. Anschließend wird das Plugin wie folgt initialisiert:

$(function(){
    $('figure.responsive').picture();
});

Nach Tests des Entwicklers Abban Dunne funktioniert die Lösung ab IE 7 und in allen modernen Browsern ohnehin. jQuery Picture steht zur kostenlosen Verwendung auf GitHub zum Download bereit. Dunne würde sich übrigens freuen, wenn sein Plugin eher früher als später überflüssig würde. Zu diesem Zeitpunkt wird es zumindest im IE immer noch sinnvoll einsetzbar sein…

(do)