October 31, 2009

Site Updates

I call this: tech — Posted by KP @ 4:54 am

You’ll see some changes to the layout happened overnight.

Dear IE6 Users: I hope you’re both happier now

It started out with me wanting to make the site look just a tiny bit better in IE6. Our computer at the office has it, which has given me an opportunity to see just how craptastic it is. IE6 users make up 1% of my traffic, so I’m not willing to compromise too much — make that at all — but I wanted to fix any glaring mistakes.

One thing is that my resume was illegible because IE6 doesn’t take kindly to being given font sizes in percentages. By switching to pixels everybody’s happy, and now some producer with an old computer who doesn’t know how to download Firefox can read my resume.

The other major ugliness is that IE6 doesn’t support transparency in PNG images. It does support transparent GIFs, but GIFs are naturally lower quality. I tried to save the logo as a GIF and it looked awful around the edges. I felt I had tried. But tonight, I decided to try again, and when I cheated by using the matte feature in Photoshop to tell it what color the edges should blend into (I chose my favorite gray, #333333, which blends quite well with the carbon fiber background), it actually looked basically the same as the PNG. And the file size is a third of the original. So now IE6 users will see the nice clean lines of the logo and the bullet points.

OK so how do I know this? I found a nice little program called MultipleIE. It’s a Windows-based program that only runs on XP. It automatically installs a copy of whatever old version(s) of IE you want, from 3.0 to 6.0, and does not interfere with whatever newer version you have. I run Windows virtually in Parallels, so it’s easy to flip between coding on the Mac and checking Safari, and then checking how it looks in Windows.

I still have some more little ugliness to address (some of it in IE8 as well), which I will look into some other time when it’s not 5AM on a matinee day.

Warning: More Geek Speak Ahead

This morning I was reading about CSS3 and HTML5, both web standards that are all new and fancy and not yet completely supported by even the most current browsers. But I found it interesting to think that I could start playing around with some of these features, so long as they don’t make the site look bad in older browsers.

The biggest thing I played with tonight is the idea of curved boxes. I’ve always wanted curved boxes, but my philosophy with this site is that I want it to be flexible and code-based, and not wrestled into looking pretty with a bunch of images strung together that only look good in one size window.

However, using the CSS3 properties -moz-border-radius and -webkit-border-radius (for Mozilla and Webkit-based browsers, naturally), you can specify the radius in pixels (I used 10). There are also ways to add curves to each corner individually. This is the page where I learned about it. The best part of all this is that if you’re using Firefox or Safari, the site will look really cool. If you’re using something else, it will just look rectangular instead of curvy, which is not as cool, but still not bad. It doesn’t punish people for having an older browser, it’s just an added bonus for those who do. That’s why I’ve always had text shadows, and have stuck to color combinations that are still legible without the shadow.