Super Bowl Commercial Bingo


UPDATE: 2012 bingo can be found here

After missing the last 2 Super Bowl due to travel/living aboard, I’m excited to host my very own Super Bowl party again. The best part is it coincides (well closely coincides) with my birthday. To make things a little more fun, Kate and I made our own Bingo game with this year’s commercials.

We did a decent amount of research and came up with 50 different themes/logos and are splitting them between two 5 x 5 Bingo cards. First person to get 5 in a row/column/diagonal wins. We decided not to make columns or rows themed and just randomized everything. Any tie breakers will be solved via rock, paper, scissors.

Here are the files in PSD and JPG formats. The logos file has 50 logos that you can split between 2 boards. Feel free to customize to your liking.

Enjoy the game!

Multiple Borders in CSS3


While reading up on the CSS3 border-image property, I couldn’t help but think that something is getting left out of CSS3: multiple borders.

One of the W3Cs primary goals is to remove a web designer’s reliance on images in page layout and design. Which will also speed up load time. However, the only way to create multiple borders on one element would be to use the border-image property. Here is an example of border-image:

All colors outside this little white box are the border.


	.multiple-border-example-1 {
		border: 20px solid transparent;
		-moz-border-image: url(images/multiple-border.png) 25% round;
		-webkit-border-image: url(images/multiple-borders2.png) 25% round;
		border-image: url(images/multiple-borders2.png) 25% round;


box with blue borders

If none of the above CSS syntax makes sense to you (it took me a while to finally wrap my head around), I suggest you check out the links at the bottom of the page for further reading (because frankly, I’ll do a terrible job of trying to explain this). While I find this to be a workable solution, there are two issues that I have with it: 1. It requires an image and 2. I have a hard time working with percentages (its a personal problem, believe me).

Wouldn’t it be cooler if we could use the same syntax that’s used for multiple backgrounds? It could look like this:

box with 3 borders


	.multiple-background-example-1 {
		border: 10px solid #77ccff, 10px solid #33bbff, 10px solid #0077ff, ;

For this to work each border would be rendered from the center out. and they would stack with no spacing between each border. I’m pretty sure this would save me time and effort (and who knows, maybe you too!). No image to produce, no messing with percentages to get the border just right, and no extra image for the browser to load.

For more on border-image:

Sprites on Mobile Safari


I’ll admit that I haven’t done a lot of actual development for mobile browsers (mostly I’ve done user experience design, visual design, and usability). But this week I ran into a “fun” little loading error with Mobile Safari on the iPhone, iPad, and iPod Touch.

Apparently, Mobile Safari doesn’t like images (PNG, GIF, and JPG) larger than 3 megapixels (3 * 1024 *1024). This means any background image you want to show up on Mobile Safari needs to be height * width ≤ 3145728. This is only valid for iOS 3.0 (for below 4.0 is it okay to refer to it as iOS?) and above. Less then 3.0 can only handle 2 * 1024 * 1024.

So my 7900 x 1000 image needs to slimmed down a lot.

The reason I ran into this issue is that the client has many IE6 users and needs to fit their needs. His design is very nice, but has a lot of rounded corners and drop shadows. Rather than write two versions of the site, I’ve been making really large background areas in the sprite to avoid any potential issues with IE6.

I think I got a little heavy handed with this and didn’t create empty header and footer divs in the markup for just the bottom and top images, which I’ll be doing to solve the problem now. I am not terribly comfortable with this. The purist in me hates mark-up that has no real bearing on the content. Another solution would probably have been code a CSS3 version with rounded corners and had fallbacks for IE and non CSS3 compatible browser versions.

Thanks to the following articles for helping me fully understanding this issue more and come up with an appropriate solution:

CSS3 and naming conventions


At this point my web design career I have almost completely removed directories from my images folder. This is the result of using content management systems like Joomla, and the fact that I rarely have more than a handful of images in my images folder when I initially develop a site. I stopped because I was noticing that I was taking time to create folders like “header” and “background” to organize images, but only placing one or two images in those directories. Read the rest of this entry »

Getting more out of images


Been working a lot on trying to reduce the amount of information displayed on/around album art lately. Mostly around how to best display additional information about an album without forcing the user to go to the product page. Sometimes I am of the mind that its probably better just to force users to go to product pages to learn more. So I’ve been experimenting with only showing the album art and displaying additional information on interaction. Ultimately, I’m not convinced this is best for the user, but a friend sent me these two really cool jQuery plug-ins that I thought I would share.

Fullsize – its a plug-in but also a plea to the W3C to implement an additional feature in html to make it easier to display thumbnail and then show the full size without javascript. I’m not convinced this is a good idea at all, but the plug-in he’s got works pretty well.

Sliding Boxes and Captions – This one I can get behind. Slick animations while allowing the user access to additional information. I’m not for hiding everything because there’s no call to action, why would the user mouse over album art unless they know its going to do something? But there are several different ways to approach this issue, as shown in the demos.


IE8, its alive!


Internet Explorer 8 came out today. The office was all a buzz, most of the conversations revolved around its lack of CSS3 support and whether or not it should start in “Standards Mode”. While all of these are valid discussions, they fail to recognize that Microsoft finally did it right for once. They built a browser that supports all current standards.

I was in the CSS3 panel at SXSWi on Sunday afternoon, and there were 3 companies on the panel: Mozilla, Opera, and IE. When the IE guy came up to speak, the first thing he said was, “I am not here to talk about IE and CSS3.” He went on to explain how IE8 had passed every test out there and was fully compliant with CSS2.1. And you know what happened? People applauded. They were friggin elated. I was expecting people to boo this poor guy out of the room. His message was really that IE is in the present now, and because of that, we can all move into the future together.

I think Microsoft is tired of being the whipping boy of the internet and is ready to be open with the web developer community at large, not just those that use their products. One of the major factors in the IE’s inability to move forward was being able to support old products that Microsoft had made in 90s, and I think they finally realized the segment of society still using those products has really shrunk. Oh, and their constantly shrinking market share.

While Microsoft may be moving in the right direction, they haven’t forced everyone to upgrade yet. IE8 is only available via download direcly from the IE website. And for those of you reading this right now who can upgrade, please do so (here). Otherwise, you might be seeing this in your browser the next time you come back.



Just attended SXSW Interactive for the first time. Wow, what an experience. After partying all night and some awesome morning panels, the common theme after stuffing ourselves with food during lunch was, “Damn, my brain is mush.” Plus I got to drink Paul Rudd’s beer with some new friends. Right now I am full of inspiration and motivation, and I’m hoping to get everything that is in my head out in the next couple of days, so keep your eyes peeled for some updates.

New design. New attitude?


Okay, spent two hours setting this thing up tonight. Gotta really start using it now. I hope I can keep up to the expectations of the 2 people who have ever looked at this site.

Safari 3.1 Part 3 – Why Safari pissed me off


Okay, so I have finally gotten to this post. I guess I took the whole week off. I gotta be more disciplined. Anyway…

One thing that angered me about Safari 3.1 was its @font-face support. This allows developers to load fonts that may not already be on someone’s computer and use them anywhere in the site. This could be a totally awesome tool, however, I thought, “Why the hell is Safari trying to become IE?” Read the rest of this entry »

Battling with IE – 4 CSS methods


Recently I have come to the realization that I spend so much time in production that I rarely get to search for things that would be useful, big picture resources/learning for future projects. Basically, I’m bad at keeping up with where CSS and HTML are going. And since I am trying to really push myself to have better skills to contribute to not just my current position, but the world at large, I have found a bunch of great resources. Read the rest of this entry »