Linkfutter 122 – Schriften und Typographie

Linkfutter 121 – Accessibility

  • Da nutzt mal jemand Tumblr für etwas Sinnvolles und gibt “Accessibility-Tips“. Und da das Endlos-Scrolling ausgeschaltet ist, muss man sich über den Menüpunkt “Overview” selber einen Überblick über die bisherigen Themen schaffen.
  • Und wer noch ein wenig Musse hat, der kann sich durch einen unattraktiven Textwust beim W3C über Barrierefreiheit kämpfen. Trotz des schlichten Äußeren sind die “Accessibility Basics” durchaus lesenswert.
  • Das W3C gibt weiterhin Tips für “Accessibility Testing” – ebenso im unattraktiven Standards-Wiki-Outfit.
  • Die Filament Group beschreibt, wie man Iconfonts barrierefrei einsetzen kann.
  • Den Grunt-Task “grunt-accessibility” habe ich schonmal in einem Projekt eingesetzt und war sehr angetan.

Linkfutter 120 – schon wieder Videos

  • Von der diesjährigen Beyond Tellerrand sind bislang vier Videos auf Vimeo veröffentlicht. Darunter befindet sich auch der schlechte Vortrag von Erik Spiekermann, den ich niemandem empfehlen kann. Der Vortrag von Chris Coyier hingegen über SVG ist unbedingt empfehlenswert.
  • Die Videos der HTML5-DevConf
  • SeeMe ist ein Wörterbuch für Gebärdensprache. Man kann sich in sehr kurzen Videos ein Wort nach dem anderen zeigen lassen. Damit hat man die Gebärdensprache zwar nicht gelernt, beginnt aber deren Komplexität langsam zu erkennen. Sehr interessant!
  • Interesse am Gridsystem “Susy”? Dazu gibt es eine elfteilige Serie von Videotutorials.

Linkfutter 118 – Videos

Linkfutter 117 – Browser

Markierte Headline in vielen Varianten

Kurz nach der Veröffentlichung des gestrigen Artikels über die markierte Headline gingen Reaktionen über Twitter, später auch in den Kommentaren des Beitrags ein. Darin wurden andere Lösungsvorschläge gemacht. Ich habe diese im Folgenden dokumentiert und jedem Vorschlag einen eigenen Codepen spendiert.

Der Sinn der gestrigen Übung war nicht, eine ideale Lösung vorzuschlagen. Dafür müsste ich auch Vorschläge für Mediaqueries machen. Doch dieses Detail kann jeder individuell im eigenen Projekt relativ simpel umsetzen. Ich wollte eine bessere Lösung zeigen, die nicht darauf baut, dass eine Überschrift sinnloserweise in drei Überschriften getrennt wird.

Ich finde die Ansätze interessant. Aber nicht jeder hatte offenbar die Limitierungen seines Ansatzes im Blick. Ich habe den Eindruck, es ging im Wesentlichen darum, die BR-Elemente wegzubekommen.

Weiterlesen

Linkfutter 116

Semantik vs. Optik

HTML und die Semantik einer Seite ist die eine Seite der Medaille. Wir können uns viel Mühe bei der Strukturierung unserer Inhalte geben, die Seite wird erst durch pfiffige Designideen zu einem Hingucker. Erst die Optik weckt unser Interesse an den Inhalten richtig.

Es kann immer wieder vorkommen, dass wir bei der Auszeichnung einzelner Inhalte zweifeln, welche Semantik die korrekte ist. Ich empfehle zudem immer, nur so viele Tags wie notwendig zu nutzen. Und die “Notwendigkeit” ist immer wieder ein Knackpunkt. Denn zahlreiche Designideen sind nicht mit einfachen Mitteln zu realisieren. Oft muss man Extra-Code schreiben, um das gewünschte Ergebnis zu erzielen.

Weiterlesen

Linkfutter 115 – Tools

  • PleaseJS erstellt Zufallsfarben unterschiedlichster Art. Insbesondere für die Suche nach der richtigen Inspiration kann das recht nützlich sein.
  • grunt-photobox macht Screenshots von Webseiten und vergleicht unterschiedliche Entwicklungsstände. Man kann auch nur einzelne Bestandteile der Webseite fotografieren.
  • Hugo Giraudel hat mit SassDoc ein Dokumentationstool für Sass-Files erstellt. Es orientiert sich an den bekannten JSDoc, JavaDoc usw. Mittlerweile gibt es auch Zusatztools zu SassDoc. Ich habe SassDoc mal getestet: es lässt sich problemlos einrichten und erzeugt sehr schnell ein Ergebnis. Man muss allerdings seine Kommentare dementsprechend gestalten.
  • CSS-Colorguard ist ein node.js-Tool, das Farben eines CSS auf Ähnlichkeit überprüft und Warnungen ausspricht. Die Plugins für Grunt, Brokkoli und Gulp sind im Projekt selber verlinkt. Leider kann man nur CSS-Dateien überprüfen, keine SCSS-Dateien. Das scheint auch nicht angedacht zu sein.