Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Türchen für Türchen

Tutorial: Digitaler Adventskalender

Türchen für Türchen

Ab und zu lohnt sich ein Blick hinter die Kulissen. Dazu reißen wir heute unseren eigenen Adventskalender auseinander. Wie steht es mit Inhalten, Usability und Barrierefreiheit? Wie reagiert der Kalender in einem Responsive Design? Wie sehen Alternativen und Ergänzungen für eure eigenen Kalender im nächsten Jahr aus?

Seit Jahren bieten wir im Dezember unseren Adventskalender an. In diesem Jahr wollten wir die Aktion mit einem grafischen Kalender begleiten. Mit Türchen, die sich öffnen und einen Artikel offenbaren. Die Idee birgt in sich bereits ein paar Probleme mit der Usability. Wie ein echter Kalender sollten die Türchen wild verteilt sein, so dass ein Besucher erst einmal suchen muss. Und hinter den Türchen wird vermutlich nicht genug Platz zur Verfügung stehen, um unsere üblichen Teaser mit Teaserbild, Dachzeile, Titel, Autorenzeile und Teasertext zu beherrbergen. Diese Unzulänglichkeiten liegen in der Natur der Sache. Da wir aber ohnehin einen Menüpunkt für die Artikel haben und der Adventskalender auch über die Serie erreichbar ist, gibt es für den Zugang genug Alternativen zum grafischen Kalender.

Die Basis

Semantisch haben wir hier eine nummerierte Liste von Artikeln. Für die Teaser sehen wir an dieser Stelle erst einmal Dachzeile, Titel, Autor, Datum und Teasertext vor. Am 2. Dezember könnten die ersten drei Artikel gegen 5 Uhr morgens so aussehen.

  1. <ol>
  2.   <li>
  3.     <p>Responsive Images</p>
  4.     <h2><a href="http://webkrauts.de/artikel/2012/responsive-images">
  5.       Optimiert für Groß und Klein</a></h2>
  6.     <p>von Christoph Zillgens am 1.12.2012</p>
  7.     <p class="teaser">Responsive Webdesign macht seit geraumer Zeit die
  8.       Runde. Während sich langsam Best Practices und sinnvolle Techniken
  9.       etablieren, gibt es einen Bereich, der etwas kniffliger zu lösen ist:
  10.       Die Rede ist von Responsive Images – reaktionsfähigen Bildern,
  11.       für die an einer HTML-Erweiterung gearbeitet wird.</p>
  12.   </li>
  13.   <li>Der heutige Artikel wird im Laufe des Vormittags veröffentlicht.</li>
  14.   <li>Dieses Türchen öffnet sich erst am 3. Dezember</li>
  15. </ol>

Die Basis: Stand der Artikel früh morgens am 18.12. in einem Basis-Layout

Mit PHP füllen wir nun täglich alle 24 Listenelemente neu mit einer dieser drei Optionen.

Das Grunddesign

Nun brauchen wir einen Kalender mit Türchen, die sich auch irgendwie öffnen lassen. In unserem Fall nehmen wir eine Illustration, die wir in 6x4 Felder teilen. Bei einem Mouse-Over sollen sich in einem Feld zwei Türflügel nach links bzw. rechts bewegen. Außerdem soll der Tag des Monats links oben erscheinen und sich mit der linken Seite mitbewegen. Unser Markup für das erste Türchen sieht nun so aus:

  1. <ol id="ak2012">
  2.   <li class="active" id="ak1">
  3.     <p>Responsive Images</p>
  4.     <h2><a href="http://webkrauts.de/artikel/2012/responsive-images">
  5.       Optimiert für Groß und Klein</a></h2>
  6.     <p>von Christoph Zillgens am 1.12.2012</p>
  7.     <p class="teaser">Responsive Webdesign macht seit geraumer Zeit die
  8.       Runde. Während sich langsam Best Practices und sinnvolle Techniken
  9.       etablieren, gibt es einen Bereich, der etwas kniffliger zu lösen ist:
  10.       Die Rede ist von Responsive Images – reaktionsfähigen Bildern,
  11.       für die an einer HTML-Erweiterung gearbeitet wird.</p>
  12.   <div class="left"><span>1</span></div>
  13.   <div class="right"></div>
  14.   </li>
  15. </ol>

Die Liste bekommt eine id, um sie direkt ansprechen zu können. Mit den Klassen active und inactive unterscheiden wir freigeschaltete Tagen von zukünftigen Tagen. Jedes Listenelement bekommt noch eine eindeutige id ak1 usw., um den Tag später im Kalender zu positionieren.

Ein einzelnes Türchen soll die Maße 250 Pixel x 150 Pixel bekommen, mit einem 1px-border nach rechts und unten. Die ol bekommt ihrerseits denselben Border nach oben und links. Innerhalb der Liste werden die Listenelemente absolut positioniert, um die Reihenfolge optisch durcheinanderzuwirbeln. Per background geben wir den einzelnen Teilen der Türchen (den Klassen left und right) nun einen Ausschnitt desselben Bildes mit. Die Illustration nutzen wir analog zu einem CSS-Sprite. Das hat den Vorteil, dass wir für andere Jahre/Kalender einfach nur ein einzelnes Bild austauschen müssten.

Illustration: Weihnachtsbaum mit Geschenken vor grauem Hintergrund
Für unser Beispiel nutzen wir die Illustration: »Floral-Ribbon Christmas Tree« von fangol, via sxc.hu

Außerdem wollen wir noch bei einem Mouse-Over per Tooltip anzeigen, dass sich ein zukünftiges Türchen erst am Tag X öffnet. Für die Tooltips erweitern wir die Listenelemente um das title-Attribut:

  1. <li class="inactive" id="ak18" title="Der heutige Artikel wird im Laufe des Vormittags veröffentlicht.">
  2.   <p>Der heutige Artikel wird im Laufe des Vormittags veröffentlicht.</p>
  3.   <div class="left"><span>18</span></div>
  4.   <div class="right"></div>
  5. </li>
  6. <li class="inactive" id="ak19" title="Dieses Türchen öffnet sich erst am 19. Dezember.">
  7.   <p>Dieses Türchen öffnet sich erst am 19. Dezember.</p>
  8.   <div class="left"><span>19</span></div>
  9.   <div class="right"></div>
  10. </li>

Zwischenstand: Das Layout in 4x6 Feldern, ohne Öffnen der Türchen

Alternativer Aufbau

In diesem Fall haben wir den Kalendertag per HTML und CSS über das Bild gelegt. Alternativ ist auch denkbar, bei dem die Tage bereits im Bild enthalten sind. Das hätte den Vorteil, dass der Tag nicht doppelt im HTML vorkommt (die ol ist ja bereits nummeriert) und die Tage hübscher gestaltet werden könnten. Aber unsere Lösung ist bei Änderungen flexibler, falls wir etwa die Reihenfolge der Tage, Schriftfarbe oder Hintergrund des Datums ändern wollten.

Bei unserem Kalender geben wir immer eine Liste mit 24 Elementen an. Stattdessen könnten wir auch nur die bereits belegten Türchen ausgeben. Das reduziert die Liste um noch nicht benötigte Elemente. Da wir aber die Tooltips nutzen wollen, bleiben wir bei 24 Listenelementen.

Türchen öffne dich

Noch verdecken die Türflügel unsere Inhalte. Wir benötigen einen Mouseover-Effekt. Außerdem möchten wir gerne die gesamte Fläche des Türchen verlinken, also erweitern wir zunächst das HTML versuchsweise um eine Linkfläche a.area:

  1. <ol id="ak2012">
  2.   <li class="active" id="ak1">
  3.     <p>Responsive Images</p>
  4.     <h2><a href="http://webkrauts.de/artikel/2012/responsive-images">
  5.       Optimiert für Groß und Klein</a></h2>
  6.     <p>von Christoph Zillgens am 1.12.2012</p>
  7.     <p class="teaser">Responsive Webdesign macht seit geraumer Zeit die
  8.       Runde. Während sich langsam Best Practices und sinnvolle Techniken
  9.       etablieren, gibt es einen Bereich, der etwas kniffliger zu lösen ist:
  10.       Die Rede ist von Responsive Images – reaktionsfähigen Bildern,
  11.       für die an einer HTML-Erweiterung gearbeitet wird.</p>
  12.   <div class="left"><span>1</span></div>
  13.   <div class="right"></div>
  14.   <a class="area" href="http://webkrauts.de/artikel/2012/responsive-images"></a>
  15.   </li>
  16. </ol>

Nun fügen wir in CSS den Hover-Effekt hinzu:

  1. li.active a:hover .left { left: -125px; }
  2. li.active a:hover .right { left: 250px; }
  3.  
  4. li.active .left, li.active .right {    
  5.   -ms-transition: left 0.5s;
  6.   -o-transition: left 0.5s;
  7.   -webkit-transition: left 0.5s;
  8.   -moz-transition: left 0.5s;
  9.   transition: left 0.5s;
  10. }
  11.  
  12. li.active a:hover .left, li.active a:hover .right  {
  13.   -ms-transition: left 1s;
  14.   -o-transition: left 1s;
  15.   -webkit-transition: left 1s;
  16.   -moz-transition: left 1s;
  17.   transition: left 1s;  
  18. }

Damit verschieben wir die Türflügel nach links und rechts. Die Transitions sorgen dafür, dass sich die Türchen öffnen und etwas schneller wieder schließen. Das funktioniert in allen modernen Browsern. Natürlich nicht im Internet Explorer 8 oder 9 (ältere Versionen berücksichtigen wir bei webkrauts.de nicht mehr). In den IEs fällt aber lediglich die Transition weg, die Türen öffnen sich also quasi auf einen Schlag. Da nur ein Effekt wegfällt, die Inhalte aber erreichbar sind, nehmen wir hier keine weiteren Anpassungen für den IE vor.
Aus Platzgründen verstecken wir per CSS noch den Teasertext.

  1. .teasertext { text-indent: -9999px; }   

Die Schrift hinter der Tür erscheint in Weiß auf Rot. Wenn die Seite zum ersten Mal aufgerufen wird, ist die Schrift oft schon sichtbar, während das Hintergrund-Bild für die Türen noch geladen wird. Das führt zu einem unerwünschten Aufblitzen des Textes. Daher setzen den Text erst einmal weiß auf weißen Hintergrund. Erst beim Mouse-Over ändern wir die Farben.

Zwischenstand: Das Layout in 4x6 Feldern, die Türen öffnen sich, die gesamte Fläche dient als Link

Barrierefreiheit

Der Screenreader hat keine Probleme, er kann die Türchen komplett mit Teaser und in der richtigen Reihenfolge erfassen. Beim zeilenweisen Lesen wird auch gesagt, dass sich zukünftige Türchen erst im Laufes des Vormittags oder am Tag X öffnen. Allein: die zusätzliche Angabe des Kalendertages ist überflüssig, deshalb verstecken wir ihn mit aria-hidden.

  1. <div class="left"><span aria-hidden="true">1</span></div>
  2. <div class="right"></div>

Die Texte erscheinen in Weiß (#FFF) auf Rot (#CD0000). Das ergibt einen Kontrast von 5.84 und erfüllt WCAG 2.0 AA. Das feste Format für die Türchen (250 Pixel x 150 Pixel) wird in Kombination mit einem Text-Zoom dafür sorgen, dass Text Stück für Stück nach unten aus dem Türchen herausgeschoben wird. Wer darauf Rücksicht nehmen will, kann zum Beispiel die Türchen etwas größer anlegen oder die Texte z.B. auf den Autor und den Titel beschränken, so dass der gesamte Text noch bei 150% zu lesen ist.

Aktuell haben wir aber die Tastaturnutzer verprellt. Beim Tabben erreichen wir zwar jeden Link. Aber jeden eben auch zweimal, weil wir bisher noch zusätzlich die Überschrift verlinkt haben. Vor allem aber öffnen sich die Türen nicht, was aber auch für Tastatur-Nutzer sinnvoll wäre. Die Lösung birgt ein etwas großzügigerer Gebrauch des Links. Wir setzen ihn einfach um alles herum:

  1. <li class="active" id="ak1">
  2.   <a href="http://webkrauts.de/artikel/2012/responsive-images">
  3.     <p>Responsive Images</p>
  4.     <h2>Optimiert für Groß und Klein</h2>
  5.     <p>von Christoph Zillgens am 1.12.2012</p>
  6.     <p class="teaser">Responsive Webdesign macht seit geraumer Zeit die
  7.       Runde. Während sich langsam Best Practices und sinnvolle Techniken
  8.       etablieren, gibt es einen Bereich, der etwas kniffliger zu lösen ist:
  9.       Die Rede ist von Responsive Images – reaktionsfähigen Bildern,
  10.       für die an einer HTML-Erweiterung gearbeitet wird.</p>
  11.     <div class="left"><span aria-hidden="true">1</span></div>
  12.     <div class="right"></div>
  13.   </a>
  14. </li>

Ja, hier stecken Block-Level-Elemente innerhalb des Links. Für einige Webworker mag das vielleicht irgendwie »unsauber« aussehen, aber in HTML5 ist das erlaubt. Vor allem: es ist valide, und es funktioniert. Tastatur-Nutzer fokussieren beim Tabben den Link, so dass wir nun auch die Klassen left und right innerhalb des Links ansprechen können:

  1. #ak2012 a:hover .left, #ak2012 a:focus .left { left: -125px; }
  2. #ak2012 a:hover .right, #ak2012 a:focus .right { left: 250px; }

Die Tab-Reihenfolge richtet sich natürlich nach der Reihenfolge der Listenelemente. Dadurch »springt« ein Tab-Nutzer durch den Kalender, was vielleicht etwas ungewohnt ist, aber zur Chronologie passt. Nach dem 24. Dezember könnte man es optional allen Nutzern einfacher machen und die Türchen optisch in die chronologische Reihenfolge setzen. Das heißt, die Türchen begännen dann oben links mit 1 und gehen in gewohnter Leserichtung weiter.

Zwischenstand: Das Layout in 4x6 Feldern, die Türen öffnen sich nun auch für Tastatur-Nutzer

Ob breit, ob schmal

Nun haben wir webkrauts.de Ende November auf ein responsive Design umgestellt. Also muss unser Kalender auch bei kleineren Breiten funktionieren. Wir könnten überlegen, den Kalender skalieren zu lassen. Dann haben wir aber schnell das Problem, dass die Texte nicht mehr in die Felder passen. Hier haben wir das Glück, dass sich 24 Tage als 4x6, 3x8, 2x12 und 1x24 aufteilen lassen. Wenn das 4x6-Schema nicht mehr passt, wechseln wir also einfach auf 3x8 Felder. Dafür bereiten wir ein alternatives Hintergrundbild in den neuen Maßen vor und müssen nur noch die Türchen anders positionieren.

Werden wir noch schmaler, könnten wir mit 2x12 Feldern arbeiten. Dann muss man aber schon sehr viel hoch- und runterscrollen, um ein Türchen zu finden. Wenn also keine drei Felder mehr nebeneinanderpassen, verzichten wir lieber auf eine grafische Darstellung und bieten nur noch die Liste an. In dieser Darstellung können wir den Teasertext anzeigen, verstecken aber das span mit dem Kalendertag.

Ebenso fügen wir zwei Hinweise ein. Über dem Kalender: »Auch in diesem Jahr bieten wir euch jeden Tag Wissenswertes rund um Webstandards, Barrierefreiheit, Tools, Usability oder SEO. Neben der Kalender-Ansicht könnt ihr auch eine ›traditionelle‹ Artikel-Liste des Adventskalenders nutzen.«
Und unter dem Kalender: »Dieser Adventskalender nutzt CSS3-Transitions. Der Effekt funktioniert in allen modenen Browsern, aber ›natürlich‹ nicht im Internet Explorer 8 oder 9 (dort werden aber die Titel angezeigt und die Links funktionieren auch).«
Der Großteil davon sind nur sinnvoll, wenn die grafische Version des Kalenders zu sehen ist. Bei schmalen Breiten verstecken wir also Texte (über eine zusätzliche Klasse) und behalten nur noch »Auch in diesem Jahr bieten wir euch jeden Tag Wissenswertes rund um Webstandards, Barrierefreiheit, Tools, Usability oder SEO.«

Finale: Der komplette Kalender, mit Transitions, bedienbar für Tastatur-Nutzer, samt Responsive Design. Das Beispiel als zip zum Download.

Sahnehäubchen

Bisher schieben sich die Türchen des Kalenders nur zur Seite. Ein richtiger Kalender öffnet sich natürlich in 3D, die Türflügel kommen dem Nutzer entgegen. Wer etwas wagemutuger ist, versucht sich also an der dritten Dimension. Mit CSS3 3D-Transforms können wir den Effekt in modernen Browsern mittlerweile auch nachbauen. Einigermaßen jedenfalls.

Finale in 3D: Der komplette Kalender, mit 3D-Transitions, bedienbar für Tastatur-Nutzer, samt Responsive Design.

Ein kurzer Test in den aktuellen Desktop-Browsern (unter Windows) zeigt:

  • Chrome (23) öffnet die Türchen in 3D. Allerdings verschwinden Türchen, wenn links oder rechts Kalendertage stehen, die in der Liste später folgen. Außerdem ruckelt es gelegentlich.
  • Firefox (17) handhabt die verdeckten Türchen wie Chrome, ruckelt aber etwas mehr.
  • Safari (5.1.7) liefert das beste Ergebnis. Die animierten Türchen liegen automatisch immer über anderen Türchen. Damit ließe sich fast arbeiten. Allerdings gibt es manchmal seltsame Hicc-Ups, und die Türchen bewegen sich über den kompletten Viewport.
  • In Opera (12) und im Internet Explorer 9 bewegt sich gar nichts. Immerhin funktionieren die Linkflächen noch.

Bei so vielen Problemen allein schon auf den Desktop-Browsern unter Windows, muss man deutlich mehr Arbeit investieren. Zum Beispiel könnte man Modernizr bemühen und wahlweise die Türchen in 3D oder in 2D öffnen.

Damit kommt dann auch JavaScript ins Spiel, auf das wir bisher absichtlich verzichtet haben. Es gibt zwei weitere Ansätze, um den Kalender etwas aufzupeppen. In Touchscreens sorgt ein Tap auf einen Kalendertag bisher dafür, dass sich die Türchen aufschieben, sich direkt darauf aber der Link öffnet. Wir könnten zum Beispiel hammer.js zu Hilfe nehmen und die Türchen mit Tap und Doppeltap ausstatten, um das Mouse-Over und Klick auf einem Desktop abzubilden (siehe auch den Artikel über Touch-Events). Das erübrigt sich aber mit der nächsten Überlegung.

Bei einem üblichen Kalender nimmt man an einem Tag die Schokolade heraus, das Türchen bleibt danach geöffnet. Für die Usablity ist es ohnehin besser, wenn auf einen Blick alle offenen Themen erfasst werden können. Da wir aber extra die CSS-Transitions eingefügt haben und die Türchen also nicht sofort geöffnet erscheinen sollen, machen wir einen Kompromiss. Der Kalender erscheint erst einmal wie bisher, scrollt man herunter, öffnen sich der Reihe nach (und recht fix) die bisherigen Türchen. Ist JavaScript nicht aktiviert, bleibt der Kalender wie bisher bedienbar.

  1. <script src="js/jquery.min.js"></script>
  2. <script>
  3. $(document).ready(function(){
  4.   $('body').addClass('js');
  5.   $(window).scroll(function () {       
  6.     if ( $(window).scrollTop() > 10 ) {
  7.       for (var i = 1; i < 25; i++) {
  8.         if ( $('#ak'+i).hasClass('active') ) {
  9.           $('#ak'+i+' .left').delay(i*80).animate({left: '-125px'}, 5);
  10.           $('#ak'+i+' .right').delay(i*80).animate({left: '250px'}, 5);
  11.         }
  12.       }
  13.     }
  14.   });
  15. });  
  16. </script>

Das Script nutzt jQuery. Sobald der User 10 Pixel nach unten scrollt, durchläuft die Schleife 24 Türchen-Elemente. Hat das Element die Klasse active animieren wir die Türchen. Mit delay() verzögern wir den Effekt bei jedem Türchen etwas mehr.
Nun sieht man aber keinen Unterschied mehr, wenn ein Nutzer mit der Maus über einem Feld hovert oder ein Link den :focus hat. Also ergänzen wir den Body mit der Klasse js, sobald die Animation startet und geben per CSS neue Anweisungen für den Hintergrund, :hover und :focus.

  1. body.js #ak2012 a {
  2.   color: #FFF;
  3.   background-color: #CD0000;
  4. }
  5. body.js #ak2012 a:hover,
  6. body.js #ak2012 a:focus {
  7.   background-color: #FFF;
  8. }
  9. body.js #ak2012 a:hover p,
  10. body.js #ak2012 a:hover h2,
  11. body.js #ak2012 a:focus p,
  12. body.js #ak2012 a:focus h2 {
  13.   color: #CD0000;
  14. }

Finale mit einer Prise JavaScript: Der komplette Kalender, mit Transitions, bedienbar für Tastatur-Nutzer, samt Responsive Design. Scrollt man etwas herunter, öffnen sich alle aktiven Türchen.

Und »schon« haben wir nicht nur einen grafischen Adventskalender, sondern auch gleich wichtige Anforderungen an Usability, Accessibility und Responsive Design erfüllt.

Andere Adventskalender

Nicht nur wir haben uns einen Adventskalender gebastelt. Hier ein paar andere Beispiele zur Inspiration:

Kommentare

Peter
am 23.12.2012 - 10:27

Nur eine Frage:
Könnt ihr aus den Logfiles ersehen, wie oft (oder wie viele) Zugriffe via Kalendertürchen erfolgten? Daraus ließe sich die Akzeptanz der grafischen Oberfläche ableiten bzw. wie viele Nutzer eher die Textlinks nutzen. tnx und Frohe Feiertage...

Permanenter Link
Nicolai Schwarz

Nicolai Schwarz (Autor)
am 23.12.2012 - 10:55

Das ist eine gute Frage. Wenn die Startseite auch die Eingangseite war, haben im Dezember etwa 9,7% als nächstes auf die Artikel-Übersicht geklickt, 6,7% als nächstes auf die Adventskalender-Serien-Seite. Aber z.B. 13% auf das erste Kalender-Türchen, 7.6% auf das zweite, 6,3% auf das dritte. Ausführlicher kann ich das auf die Schnelle nicht abrufen. Aber ich finde das ist schon ganz ordentlich.

Allerdings muss man bedenken: Wir haben ja bei Twitter, Google+ etc. direkt auf die Artikel verlinkt. Insofern steigt im direkten Vergleich ohnehin der Großteil über eine konkrete Artikel-Seite und nicht über die Startseite ein.

Es wäre aber eine Überlegung wert, bei einem weiteren grafischen Kalender direkt zu zählen, auf welche Links die Leute von der Startseite aus klicken.

Permanenter Link

Russe
am 24.12.2012 - 10:02

Super Artikel, danke.
Als Anmerkung bezüglich der Akzeptanz bzw. Logfiles, ich habe bisher die einzelnen Artikel direkt vom RSS-Feed aus aufgerufen, nur durch den Artikel vom 23. bin ich auf den eigentlichen Kalender aufmerksam geworden, der wäre mir sonst glatt entgangen.

Permanenter Link

Peter
am 24.12.2012 - 10:21

Vielen Dank für das schnelle Feedback.

Klar, die Direktverlinkungen verfälschen natürlich die Statistik. Daran hatte ich gar nicht gedacht. Bei mir ist es ja auch überwiegend der Direktlink aus Twitter, den ich nutze.

Interessant war für mich, ob andere auch so faul sind, sich erst das passende Türchen zu suchen :-).
Ich nutze von der Startseite ausschließlich den Weg Serien > Advenskalender 2012 > Tagesartikel.

Könnte man - wie bei einem pappiernen Kalender - die geöffneten Türen auch offen lassen?

Ich denke, eine halbwegs aussagekräftige Statistik bekommt man nur hin, wenn in den einschlägigen Netzwerken nur auf die Startseite verlinkt wird. Das wäre aber schon ganz interessant. Na - vielleicht im nächsten Jahr ;-)

Permanenter Link

Webneo
am 06.06.2013 - 20:23

Auch wenn der Beitrag nicht mehr ganz taufrisch ist, zeigt er trotzdem wie komplex und herausfordernd doch oft die vermeintlich "kleinen" Projekten sein können.
Gibt es denn für dich eine "lesson learned" aus diesem Projekt bzw. wo würdest du beim nächsten Kalender noch optimieren? Das nächste Weihnachten steht ja bereits vor dem Türchen ;-)
Danke Martin

Permanenter Link

Die Kommentare sind geschlossen.