CSS-Tricks Chronicle VI

That Twitter Cards thing I mentioned in the last Chronicle worked out. You can now see “View Summary” links when someone tweets a link to CSS-Tricks, which when clicked provided some extra context to the article.

All I had to do was turn on the checkbox to add the meta data via the WordPress SEO plugin and apply on Twitter.

BD Conf was pretty fun. I love the gigantic Gaylord hotels they are at. My new talk went pretty well. The workshop went OK but it was no masterpiece. I’m in a weird place where I’m stuck between wanting to take this as a personal challenge and work on doing amazing workshops or going the other way and stopping doing them.

ConvergeFL was also fun. I got to give the workflow talk a second time and it was a bit more refined. Now I’m back home for a few weeks before taking off again for Future of Web Design in New York. Will be my first time ever to New York.

At ConvergeFL, I attended a workshop on eye tracking by JD Graffam (and team) of SimpleFocus. Afterward we did an eye tracking study on CSS-Tricks. Four different people and ran through a script that took about 40 minutes for each person. I’ll be sharing more about that as soon as I can.

I had to put pagination in at The Lodge because all the sudden people were reporting the main video list crashing their iOS devices. I suspect the same exact problem as documented here.

I also added a “Mark as Watched” feature for videos there, so you can tick them off as you watch them and keep your place.

157 videos have now been posted there. That’s all but one, a final wrapup, which I hope to shoot and post soon.

I made a proper testing demo for using icon fonts and added it to this blog post. In my testing using VoiceOver on OS X Mountain Lion, the best way is still with a span and pseudo element.

I updated the Treehouse logo in the header to use SVG. I can do that because this site only supports IE 9+. I could have put in a fallback, but didn’t have to because of that support level. This is just a friendly reminder that SVG is pretty awesome for vector art. More importantly, it’s not weird or hard to use. You use SVG just like you would JPG, GIF, or PNG:

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

or

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

I’m going to be speaking at Webstock in New Zealand this coming Feburary. The speaker list is different than the usual web design conferences I normally go to. Jim Coudal, John Gruber, Jason Kottke… whaaaa? Awesome.

I worked up a series of six media queries that handle a pretty common situation these days:

1. Small screen not retina
2. Small screen retina
3. Medium screen not retina
4. Medium screen retina
5. Large screen not retina
6. Large screen retina

It sparked a good bit of debate on Twitter, but is was a little out of context there. The big use case: delivering specific “hero” assets perfect for the occasion. Perhaps a large screen background image like The Lodge has. I’m not suggesting we fork layouts for these scenarios, but I am suggesting some intelligent asset delivery for them is a good idea, and you can begin to do through smart media queries.