Archive

This morning was very traumatic. After spending most of the night working, I got up at 6AM on a Sunday, to straighten up a bit before my house guests arrive. For those of you who don’t know, Lauren and I keep a pair of rats. Yes, “rats in the bathroom,” as Mark says. Their names are Abbi and Addi (we thought we’d make it challenging).

Part of my morning preparations was cleaning the poor girls cage, which I had sadly neglected for far too long. I scooped them out of their cage. Placed them in the usual medium sized box and proceeded, with the cage, to the patio to scrub a way. Obvious lack of judgment aside (in retrospect), I have to say, I’ve done this a hundred times and never had a problem. Not so, this morning.

The cage may have taken just a little bit longer to clean. Or maybe I was just moving a little bit slower than normal, but when I returned Abbi had managed to get out of the box and onto the floor. She must have been as startled as I was, because when I entered the room she bolted. Now, there wasn’t really anyplace for her to go, or so I thought, but she managed to find a tiny crevasse between the counter and the floor.

Okay, I told myself. This is not so bad. She’ll come out. But the fact was, I had no idea what was between the counter and the floor. To give you an idea, we live a very large redev warehouse, so no real telling what lies between walls.

To top it off, in my frazzled state of rattled nerves and lack of sleep, I came up with a brilliant plan to go to the kitchen and get some peanut butter to lure her out. Of course, I ran out leaving poor Addi alone in the open box. When I returned with said peanut butter, the little bugger had wedged herself between the brick wall, a 6×6 steel beam and a tight little drop of several “rat” mile to the floor.

By this point, all plans for my expected guests had gone completely out the window and at the hight of my brilliance, I was trying to rescue Addi from slipping into the dark abyss of the crevasse, by dangling a USB cable as a rescue line.

note to self: spend less time with computer and more time with rats.

the rescue

Some clever thinking, a small cardboard box, a pair of scissors and some masking tape later, both Abbi and Addi were recovered and are doing just fine and my frazzled nerves can rest.

Alpha PNG Backgrounds in IE

In the process of redesigning a site for a client, I stumbled into my long lost, woeful friend PNG. Actually, I shouldn’t be so hard on PNG. We all know who’s fault it really is. There are a ton of sources out there, offering solutions for the IE bug, but I needed something a little more comprehensive and involved a little less leg work.

My research led me to numerous sites, offering solutions to my PNG woes. Most of which either built upon or reiterated the techniques Michael Lovitt discussed in this article, way back in the day.

For all the of the progress we’ve seen with IE7 (which DOES support transparent PNGs), we’re still left with the fact that it’s just a carrot dangling on a stick for a while more. We still have to deal with its predecessor and thus, I needed a clean solution that would do the leg work for me.

Ping back PNG forward

To start with, there is a very simple solution to get IE6 to properly render transparent PNGs, using the Microsoft AlphaImageLoader. For simple tasks, I prefer to do this strictly using CSS and an IE6 conditional statement.

/* IE6 PNG transparency FIX {--MEH!--} ----*/
* html #nav ul li {background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader »
(src="http://www.domain.com/img/myPNG.png", »
sizingMethod="scale");}

(Line wraps are marked » -Ed)

This method of handling PNGs usually does the trick, for simple application. It’s concise and easy to implement. On an individual basis, it’s perfect. I should mention, there are two ways you can define your sizingMethod. The first, “scale” (shown above), is perfect for some repeating background images. There is a drawback. It works great for 1px by 1px images and 1px images for x or y repeats, but for tiling images you get some unappealing distortion happening. The other value for sizingMethod is “crop”. This is for non-repeating background images.

the All-Around PNG

This time, however, I needed something that would do a little more of the leg work for me. I needed something that would handle all of my PNGs at once. I stumbled across this article by John Labriola, which proved to be the best solution for my needs. He worked off of a solution Drew, of All in the Head and came up with a stream lined approach, using minimal JavaScript. Check it out.

Based on sleight he uses a simple function that loops through document.all to find all of your background PNGs and fix them. You can download his updated version of bgsleight.js here.

Better dropdowns and hidden divs, using transparent PNGs

Now you’ve got all you need to make sexy dropdowns, hidden divs, icons and whatever else you come up with.

You’re stacked, packed and ready to design… so what now?

You’ve done your research. You know your objectives. You’ve blocked out an entire day to devote to your latest masterpiece. So why can’t you start? Every designer has been there. I’m certainly no exception.

I recently rediscovered an old favorite (well, maybe not so old, but one of those great things you come across and somewhere along the line, lose track of). Letterhead Font’s arsenal of retro fonts, styling techniques and very handy assortment of tips and tricks is typographical porn for designers. Want to know how to recreate that old Martell ad from the 1930’s? Check it out.

I bring this up, because I just finished putting together some design mock-ups for a client, with a strong, retro influence.

Unfortunately, I remembered this great site after the fact.

make something that doesn’t suck

On the flip side, you might want to start your design efforts with a “what not to do” and tromp over to ban comic sans. Really. I’ll wait.

With all this superfluous imagery in your head, it’s time to start designing. Great. Yeah, I might have mentioned earlier, you might want to give yourself some time between looking and designing. Otherwise you might end up making something like this this.

left, right or center?

…and for peet’s sake, make something good. I’d love to see it.