Anleitung für einen digitalen Adventskalender – Finale

Der finale Kalender. Funktioniert für Tastatur-Nutzer. Responsive Design.

Aus rechtlichen Gründen gibt es hier nur das Bild einer Textur. Ihr bekommt die Illustration aus dem Beispiel (»Floral-Ribbon Christmas Tree« von fangol) kostenlos via sxc.hu, wir können das Bild aber nicht einfach so weitergeben.

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.

1. Responsive Images
   

   Optimiert für Groß und Klein

   von Christoph Zillgens am 1.12.2012

   Responsive Webdesign macht seit geraumer Zeit die Runde. Während sich langsam Best Practices und sinnvolle Techniken etablieren, gibt es einen Bereich, der etwas kniffliger zu lösen ist: Die Rede ist von Responsive Images – reaktionsfähigen Bildern, für die an einer HTML-Erweiterung gearbeitet wird.

   1
2. Adobe Brackets
   

   Ein Webeditor für Webworker?

   von Matthias Slovig am 2.12.2012

   Mit Brackets geht Adobe neue Wege in Sachen Quellcodeeditoren fürs Web. Die Live Preview macht es unnötig, die Seite im Browser ständig neu zu laden. Per Quick Edit lässt sich CSS direkt in der HTML-Datei bearbeiten. Die neuen Ansätze könnten die tägliche Arbeit eines jeden Webworkers erleichtern.

   2
3. Build-Tool für Webworker
   

   (Bessere) Projekt-Pakete schnüren mit Grunt

   von Frederic Hemberger am 3.12.2012

   Mit Grunt gibt es ein neues Tool, das hilft, wiederkehrende Aufgaben in Frontend-Projekten zu automatisieren. Einmal konfiguriert ist das Testen und Ausliefern selbst bei umfangreichen Projekten problemlos möglich – und eignet sich so auch für die gemeinsame Entwicklung in Teams.

   3
4. Techniken zur Schriftglättung
   

   Vom Vektor zum Pixel: Rasterizer

   von Gerrit van Aaken am 4.12.2012

   Digitale Fonts sind meist aus Vektoren aufgebaut. Um diese auf dem pixelbasierten Bildschirm darzustellen, muss sich das Betriebssystem etwas einfallen lassen. Die verschiedenen sogenannten Rasterizer von Windows, OS X und Co. setzen dabei unterschiedliche visuelle Schwerpunkte.

   4
5. CMS
   

   ProcessWire

   von Michael van Laar am 5.12.2012

   Webdesigner, die möglichst schnell vom HTML-Dummy zu einer funktionierenden Website gelangen wollen, sollten einen Blick auf das CMS ProcessWire werfen. ProcessWire ist zwar noch nicht sehr verbreitet. Doch es besticht durch seine Reduktion aufs Wesentliche und seine große Flexibilität.

   5
6. Adobe Fireworks – Plädoyer für den Einsatz mediengerechter Software
   

   Arbeiten am Rande der Effizienz

   von Olaf Gleba am 6.12.2012

   Obgleich alleine der Name der Software Adobe Photoshop kaum Zweifel daran lässt, welchen Anwendungsbereich der Hersteller für die Software vorsieht, wird sie von vielen Webworkern kurioserweise für das grafische Design von Webanwendungen eingesetzt. Auch wenn mit Fireworks vom selben Anbieter eine dezidierte Software für diesen Aufgabenbereich angeboten wird. Ein pointierter Einblick in den Alltag eines freiberuflichen Designers.

   6
7. CSS-Modularisierung mit Sass
   

   Komplexe Stylesheets strukturieren

   von Mathias Schäfer am 7.12.2012

   Sass ist eine Meta-Sprache, mit der sich CSS cleverer schreiben lässt. Das neue Sass-Feature der Platzhalter-Selektoren macht insbesondere komplexes CSS wartbarer.

   7
8. HTML5
   

   Kleiner Fallstrick bei Videos

   von Jens Grochtdreis am 8.12.2012

   Mit dem eigenen Video-Element sollten in HTML5 alle Probleme gelöst sein, die wir mit Flash jemals hatten. Doch so ganz stimmt das leider nicht.

   8
9. SEO vs. Usability
   

   Gemeinsam klappt es besser

   von Stefan David am 9.12.2012

   Von Seiten der Webentwickler gibt es oftmals Vorbehalte gegen die Arbeit von Suchmaschinenoptimierern. Das angespannte Verhältnis zwischen den beiden und die ggf. unterschiedlichen Sichtweisen zeigten sich z. B. bei einem aus Usabilitysicht misslungenen Relaunch und der nachfolgenden Diskussion. Ein Plädoyer für die verbesserte Zusammenarbeit – statt die Gräben zu vertiefen.

   9
10. Icon Fonts
    

    Visuelle Semantik neu entdecken

    von Henry Zeitler am 10.12.2012

    Icons sind, wenn richtig eingesetzt, bedeutungsvoll und intuitiv. Sie führen den Benutzer einer Website zur gewünschten Aktion und sind somit ein wichtiger Blickfang. Heute, in Zeiten der Optimierung für Mobile-Devices und besonders des Responsive Webdesigns erfahren die Icons als Fonts eine Renaissance.

    10
11. CSS3 Flexbox
    

    Ablösung für Float-Layouts

    von Stephan Heller am 11.12.2012

    Mehrspaltige Designs setzen Webworker heutzutage mit Floats um. Das mag sich in Zukunft ändern. Denn mit dem CSS3-Modul Flexbox steht eine nützliche Alternative in den Startlöchern. HTML-Elemente können damit spalten- oder zeilenweise angezeigt werden, die Reihenfolge der Elemente lässt sich steuern und Breiten oder Höhen passen sich automatisch an.

    11
12. Erweiterungen für Adobe Fireworks
    

    Noch schneller und effektiver designen

    von Michel Balzer am 12.12.2012

    In der letzten Woche haben wir euch Fireworks fürs Webdesign ans Herz gelegt. Heute gibt es einen Nachschlag. Es geht darum, den Funktionsumfang von Fireworks mit Erweiterungen zu verbessern.

    12
13. Authoring Tool Accessibility Guidelines 2.0
    

    Barrierefreiheit fürs Backend

    von Kerstin Probiesch am 13.12.2012

    Barrierefreiheit ist mehr als äußerliche Kosmetik. Auch die inneren Werte zählen – nicht nur Webseiten und Webapplikationen sollten barrierefrei sein, sondern auch die Werkzeuge und Redaktionssysteme, mit denen sie erzeugt werden. Mit der ATAG 2.0 reift dafür eine Richtlinie heran.

    13
14. Frontendentwicklung
    

    Stets zu Diensten: Yeoman

    von Ralf Graf am 14.12.2012

    Moderne Frontendentwicklung benötigt viele Bibliotheken und Werkzeuge. Yeoman verspricht, diese als installierbare Pakete zugänglich zu machen und in einen einheitlichen Workflow zu packen.

    14
15. Sublime Text 2
    

    Ein Texteditor zum Verlieben

    von Matthias Mees am 15.12.2012

    »Aller Anfang ist schwer« – das gilt auch für Texteditoren. Sublime Text 2 ist grundsätzlich einfach gehalten, aber leicht erweiterbar. Er versucht, den Einstieg mit ein paar interessanten Bedienkonzepten zu erleichtern, die das mühsame Erlernen und Verinnerlichen von Tastaturkürzeln leichter machen sollen.

    15
16. Client-Server-Kommunikation mit Socket.io
    

    Wenn’s mal wieder schneller gehen muss…

    von Frederic Hemberger am 16.12.2012

    Will man Informationen möglichst in Echtzeit zwischen Client und Server austauschen, kann das Nachladen von Inhalten in Intervallen mittels Ajax zu unpraktisch sein. Eine einfache, aber vielseitig einsetzbare Methode bietet Socket.io.

    16
17. Meinung: Ausnahmen von Best Practices
    

    Darf man nicht? Darf man wohl!

    von Nicolai Schwarz am 17.12.2012

    Geht nicht! Gibt’s nicht! Darf man nicht! Bei bestimmten Themen weiß jeder Webworker reflexartig, was sich gehört und wie man es richtig macht. Alles andere ist böse! Darf das HTML oder CSS vielleicht auch mal nicht validieren? Darf ein Webworker target=“_blank“ nicht doch benutzen? Darf er nicht? Doch, darf er. Wenn er einen guten Grund dafür vorweisen kann.

    17
18. Der heutige Artikel wird im Laufe des Vormittags veröffentlicht.
    18
19. Dieses Türchen öffnet sich erst am 19. Dezember.
    19
20. Dieses Türchen öffnet sich erst am 20. Dezember.
    20
21. Dieses Türchen öffnet sich erst am 21. Dezember.
    21
22. Dieses Türchen öffnet sich erst am 22. Dezember.
    22
23. Dieses Türchen öffnet sich erst am 23. Dezember.
    23
24. Dieses Türchen öffnet sich erst am 24. Dezember.
    24

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).