The Network Game allows you to create your dream lineup, placing shows when you would like them to air. The design brief for the Network Game was “old school network executive”. They wanted it to mimic what a network lineup of old would have looked like. I decided on a cork board of the prime time TV grid, with a typewritten listing of all the shows taped to the wall below it. As you click on the shows in the list, a index card with the show details appears, which can be dragged to the grid above. Once you drop the index card on the grid, a pin attaches a smaller index card to the board (the pin position is randomized every time you drop a card). Clicking on these in the grid again brings up the larger version of the index card. Both the large and the small index cards can be dragged around the grid. Once you are satisfied with your lineup, you can save and share it. After you've saved your lineup, it will track the ratings of all your shows, give you your overall network rating and let you know how you are fairing as a network executive.

The Facebook apps all share a similar design and functionality. They are fun TV related quizzes – Who’s You Baddie identifies your inner TV villain, TiVo Picks recommends the debut show that’s right for you and What Was On TV That Year? is a TV time machine, showing you what ruled the airwaves in years past.

Build Your Own Network Game

Saved Network Lineup

Who’s You Baddie? Facebook app

TiVo Recommends Facebook app

What Was On TV That Year Facebook app

I thought I would take a minute and share the Christmas cards, matching gift tags and letters that I designed this year. I designed the Christmas cards and gift tags in Fireworks and the Christmas letter in Illustrator. A single typeface was used – Garamond Premier Pro.

Christmas card, gift tag and letter

Close up of the typography for the letter

I hope this year was as kind to you as it was to me. See you in 2009.

By the way, Cameron Adams wrote a bookmarklet a while ago that you can use to add this functionality to other browsers.

So, if I have <div class="box featured">, the classes for div.box and div.box.featured will be applied to the div, giving it a "featured" style.

div.box

div.box.featured

Working with IE6

IE6, however, has an interesting caveat with multiple classes. IE6 does not make a distinction between the following rules:

How these rules should work is like this:

div.box.featured applies to <div class="box featured">
div.featured applies to <div class="box featured"> OR <div class="featured">

However, in IE6, div.box.featured works the same way as div.featured. IE6 doesn't understand the chain of classes within a CSS selector, but rather only reads the last class. So, IE6 reads div.box.featured as div.featured, while Firefox and IE7 will only apply the "featured" styles if the div also has a class of "box". For the most part, this isn't a big problem, as usually when you apply multiple classes, you want them all to apply. Let's look at an example of where this goes wrong. In this example, I have a table with zebra rows, and also want a darker "selected" state if the checkbox is checked.

Table with zebra rows and selected states in Firefox / IE7.

Table with zebra rows and selected states in IE6.

The HTML would look something like this:

And this is the CSS:

IE 6 does not understand the difference between td.selected and td.alt.selected, meaning your selected state cannot have zebra rows, using this technique. You would have to create them as separate classes, .selected and .selected_alt, which means you would have to do more computing with you JS or PHP (or other server side language).

Technology

Approximate percentage of time devoted to it

XML

10%

XSLT

35%

HTML

10%

CSS

15%

JS

5%

PHP

15%

MySQL

5%

Design

5%

Playing

• Disc golf - season best, 3 under par
• Halo 2
• Unreal Tournament
• Oodles

Reading

• Envisioning Information - Edward Tufte
• Beautiful Evidence - Edward Tufte
• XSLT 2.0 - Michael Kay

Listening

• Great Northern - on repeat
• Plain White T's - Hey There Delilah
• Skillet
• Sean Hannity - 3-6 EST

Watching

• Spiderman 3 - 3/5
• Shooter - 4/5
• Deja Vu - 5/5
• The Guardian 4.5/5

If interested, please get in touch with me at ryan [at] infinitywebdesign.com. Include your skillset and links to projects you've worked on. If you have a resume, please send that as well.

Favicons

I wanted to include the people's favicons next to their links to make them stand out from each other a bit more than just a list of links seems to do. Plus, it just looks so darned sexy...

I thought about using PHP to dynamically pull the icons say, once a week, but ended up deciding on just manually creating .gif images of each icon. I didn't envision a big problem with this, as the icons won't be changing often enough to cause too much trouble.

Latest Entries

I also wanted to pull in the last 3 blog entries for the people I was linking to. To do this, I simply set up a database with all the info for each friend, including a link to their RSS feed. I then parse the RSS feeds with PHP (thanks to the XML_Feed_Parser API from pear.php.net). I'm using blo.gs to track when the sites have been updated, to keep down on the number of times I need to ping the RSS feeds. This way, I only need to ping them if blo.gs tells me there is new content. Since many of the sites ping blo.gs for their sideblogs/blogmarks/links, if blo.gs indicates that the sites have been updated, I compare their last post title to the version I have stored. If they are the same, I ignore them, as I obviously don't want to update the time. If not, I update the entry titles, links and time of update that I am storing.

Wrapping up

Overall, I'm extremely happy with the results. I think it is much better than the standard list of links that most people are using. I think the visual recognition that goes along with the favicons will go a long way in making the list more meaningful. Anyway, you may need to reload the CSS and JS for it to work right, so please do that and then let me know what you think. I'm rather proud of it, myself...

Seems Joshua Lane has tagged me with a meme. Remind me to get back at him someday...

Where was I one year ago?

One year ago, I was temporarily living in Minneapolis. I was still doing the same work that I am now - freelance web development and design for my company Infinity. I got to work on some extremely exciting projects last year, with some really cool people. I was also spending a lot of time with the GF, generally enjoying life.

Where was I five years ago?

Five years ago, I was still in high school, doing some web design work on the side. Learning the ropes, designing sites for some local area businesses. The work was nothing to be proud of at this point, but it was a great learning experience and it got me where I am today. It's really been a passion all along, since I picked up the book "Teach Yourself to Create Web Pages", which basically taught how to use Netscape Composer (!!) to create the sites. It was the first book I ever read on web development, and in two days, I read all 345 pages.

Where was I ten years ago?

10 years?! That was almost half my life ago. I was probably playing in a sandbox somewhere, for crying out loud. Ok, maybe not that, but probably just generally wasting my summer away the way kids do.

Passing it off

Ok, now let's see what Dan, Jeff and Faruk were up to...

I really think this was an excellent move for Apple. I know for me, as a long time Windows user, I immediately wanted to switch. My next computer will very likely be a Mac now, and it is unlikely it would have been before this (for the reasons stated above).

There are still a few issues I'm a bit worried about (like learning a whole new OS), but I'm really excited about this. Maybe come the end of the year I'll decide I need another tax deduction. ;)

So anyway, this post isn't actually about the technique itself, which if you view the source code, you'll see is extremely simple and is nothing new at all. So what is it about? Traffic.

That page has essentially been online for 3 years (I tweaked it slightly before posting it to Digg, to make it look a bit better and to use em sizing, so it would resize better), and in the last 24 hours, it has gotten 2,115+ page views. From the comment I left on Digg, people have been bookmarking it in del.icio.us. At the time of this post, it was in the top 10 on the del.icio.us/popular page, with 287 people having saved it. What does this all mean? I have no idea, but find it very interesting for some reason - I think it's because the page has literally been around for 3 years.

Here's what Mint looks like right now, not even 24 hours later:

Saturday

I wrote about Saturday's panels already, so I'll just pick up from there. After the panels, I went out for dinner with some of the guys from Bright Corner and a few other people. Next, I went to the frog design opening party, which I got to toward the end, but still had a chance to meet a few people such as Paul Nixon, Khoi Vihn, Ryan Sims, Brad Smith, Andy Budd and others. I had a great time talking with people and meeting a few for the first time. Next, I went to the South by Northwest party for a little while. There were a few people there that I wanted to meet, but ended up leaving early, as it was extremely busy and seriously the party was too loud to talk with anyone.

Sunday

So on Sunday, I met Shaun Inman in the hall during the panels. I'd like to say, he really is The Wolf - very smart and very talented. I went out for lunch with Shaun, Jeff Croft, Rob Weychert, Ryan Carson and a few others. I think my favorite panel for the day was "Holistic Web Design" by Shaun, Jason, Garret Dimon, and Eris Stassi. I really enjoyed the panels that focused a bit more on design, and this panel was no exception. At night, I went to the Web Awards show, and would like to congratulate Bryan Veloso on his award for best blog design. Well done! Next, I went to the Web Awards after party, where I hung out with Shaun, Rob, Jason Santa Maria, Paul, Greg Storey, Eris, Dan Mall, Joshua Lane and Jeff.

Monday

Monday's panels were great. I really enjoyed the "Should Your Blog Have a Business" panel, which had both Inman and Zeldman on it. I also really enjoyed the "Design Eye for the List Guy" panel, by Paul, Keith, Cameron, and Ryan. They did an excellent job with it, redesigning craigslist. After that panel, a bunch of us went out for dinner and then I grabbed a cab with Keith Robinson to head to bowling. Bowling, I would have to say, was the highlight of the trip. I met up with Dan Rubin (keep blogging now, Dan!) for the first time, and spent a good bit of time talking to him. It was nice to meet him and I enjoyed our chat. I bowled one of the better games of my life, and ended up getting the most strikes in 10 frames (5) and getting the highest 10 frame score (179) - sorry to take your money away from you, Steve. ;) Unfortunately my team was eliminated in the second round, but still, I think everyone there had a very good time. Thanks to Bryan Veloso for putting that on for us. Hopefully next year's will be bigger and even better!

Tuesday

Didn't do much today – wasn't too interested in most of the panels, so I got to the conference center late and only attended one panel ("The Next Generation of Web Apps" - which ended up being very good) and said some goodbyes. The flight home was good, and while the conference was great, it's nice to be back.

Recap

To me, this conference was definitely more about meeting people than about sitting through panel after panel. I plan to keep in touch a bit better with many of the people I met, and look forward to going back to South by Southwest next year. If you missed it, I'd definitely encourage you to try your best to make it next year – you won't regret it. To everyone I met and hung out with at SXSW, thanks for making it a great trip – we'll keep in touch...

Lastly, my photos from the trip can be found on Flickr. Enjoy!