Grow your CSS skills. Land your dream job.

CSS-Tricks Chronicle VI

Published by Chris Coyier

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.

cards

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.

Comments

  1. Gizzat
    Permalink to comment#

    list of (major)devices in each category?

    • The obvious Apple devices would be (for the 6 media query thing above):

      Large = MacBook / Retina MacBook Pro
      Medium = iPad 2- / iPad 3
      Small = iPhone 3G- / iPhone 4

  2. Yap, pretty much used this same technique. Also, wordpress SEO plugins allows to add default image/logo in case no image is attached to post.

  3. Bert
    Permalink to comment#

    Top Treehouse Ad is not showing at all on Chrome (22.0.1229.79), Windows 7 64 bits

  4. Permalink to comment#

    I’ve got the same problem going on for me with FF 15.0.1 with both Adblock Plus and RequestPolicy installed. Disabling them seems to do nothing.

    (oddly enough, the SVG backgrounds show up fine when I look at them in Firebug, though)

    • Permalink to comment#

      Aha, fixed it by disabling Adblock Plus – it had previously not blocked the ads in older designs, but apparently it doesn’t like Treehouse much.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".