CSS-Tricks Chronicle VI

Das Twitter Cards-Ding, das ich im letzten Chronicle erwähnt habe, hat funktioniert. Sie können jetzt „Zusammenfassung anzeigen“-Links sehen, wenn jemand einen Link zu CSS-Tricks tweetet, die beim Klicken zusätzlichen Kontext zum Artikel lieferten.

Alles, was ich tun musste, war, das Kontrollkästchen zu aktivieren, um die Metadaten über das WordPress SEO Plugin hinzuzufügen und sich bei Twitter zu bewerben.

---

BD Conf hat ziemlich Spaß gemacht. Ich liebe die riesigen Gaylord Hotels, in denen sie stattfinden. Mein neuer Vortrag lief ziemlich gut. Der Workshop lief okay, war aber kein Meisterwerk. Ich bin an einem seltsamen Punkt, an dem ich zwischen der persönlichen Herausforderung, an großartigen Workshops zu arbeiten, und der anderen Richtung, sie einzustellen, gefangen bin.

---

ConvergeFL hat ebenfalls Spaß gemacht. Ich konnte den Workflow-Vortrag zum zweiten Mal halten und er war etwas verfeinert. Jetzt bin ich ein paar Wochen zu Hause, bevor ich wieder für Future of Web Design in New York abfliege. Es wird mein allererstes Mal in New York sein.

Bei ConvergeFL besuchte ich einen Workshop zum Eye-Tracking von JD Graffam (und Team) von SimpleFocus. Danach machten wir eine Eye-Tracking-Studie zu CSS-Tricks. Vier verschiedene Personen durchliefen ein Skript, das etwa 40 Minuten pro Person dauerte. Ich werde mehr darüber berichten, sobald ich kann.

Ich musste in The Lodge eine Paginierung einfügen, weil plötzlich Leute berichteten, dass die Haupt-Videoliste ihre iOS-Geräte zum Absturz brachte. Ich vermute, dass es dasselbe Problem ist, wie hier dokumentiert.

Ich habe dort auch eine Funktion „Als angesehen markieren“ für Videos hinzugefügt, sodass Sie sie abhaken können, während Sie sie ansehen, und Ihren Platz behalten.

157 Videos wurden dort inzwischen gepostet. Das ist alles bis auf eines, eine abschließende Zusammenfassung, die ich hoffentlich bald filmen und posten werde.

---

Ich habe ein richtiges Test-Demo für die Verwendung von Icon Fonts erstellt und es zu diesem Blogbeitrag hinzugefügt. Bei meinen Tests mit VoiceOver auf OS X Mountain Lion ist der beste Weg immer noch mit einem Span *und* einem Pseudo-Element.

---

Ich habe das Treehouse-Logo in der Kopfzeile auf SVG aktualisiert. Das kann ich tun, da diese Seite nur IE 9+ unterstützt. Ich hätte einen Fallback einbauen können, musste es aber aufgrund dieses Support-Levels nicht. Dies ist nur eine freundliche Erinnerung, dass SVG für Vektorgrafiken ziemlich fantastisch ist. Wichtiger ist, dass es nicht seltsam oder schwer zu verwenden ist. Sie verwenden SVG genauso wie JPG, GIF oder PNG.

<img src="logo.svg" alt="Logo">

oder

div {
  background: url(logo.svg);
}

---

Ich werde im kommenden Februar auf Webstock in Neuseeland sprechen. Die Sprecherliste unterscheidet sich von den üblichen Webdesign-Konferenzen, die ich normalerweise besuche. Jim Coudal, John Gruber, Jason Kottke… whaaaa? Großartig.

---

Ich habe eine Reihe von sechs Media Queries ausgearbeitet, die eine heute ziemlich häufige Situation abdecken

1. Kleiner Bildschirm nicht Retina
2. Kleiner Bildschirm Retina
3. Mittlerer Bildschirm nicht Retina
4. Mittlerer Bildschirm Retina
5. Großer Bildschirm nicht Retina
6. Großer Bildschirm Retina

Es löste eine gute Debatte auf Twitter aus, war dort aber etwas aus dem Kontext gerissen. Der wichtigste Anwendungsfall: die Bereitstellung spezifischer „Hero“-Assets, die perfekt für den Anlass sind. Vielleicht ein großer Hintergrundbildschirm, wie ihn The Lodge hat. Ich schlage nicht vor, Layouts für diese Szenarien zu teilen, aber ich schlage vor, dass eine intelligente Bereitstellung von Assets dafür eine gute Idee ist, und das können Sie durch intelligente Media Queries beginnen.