Just finished making Loving Jacqui all Christmassy… we were talking about fellow British Columbian, Dave Shea, the creator of the Loving Jacqui template (before heavy modification).

He’s one of the luminaries behind CSS Zen Garden.

A year ago I had a roommate, Barry, who is a generation older than I, but he was just a very good friend to me.

I had a website I wrote in Microsoft Word. Here it is:

lovingjacqui.net/originalopenletter

(although I’ve since rewritten it in something other than Word!)

This is how I met Jacqui, of course, and writing it was one of the best decisions I ever made in my life.

But I couldn’t have cared a less about web design. Heck, I wanted it in old school “typewriter” font because it is the closest thing to handwritten and I wanted it to kind of read like a handwritten letter.

It did kinda bug me that when I opened it in other browsers other than Internet Explorer, it looked awful. But since most women I knew used IE, it worked anyway.

My roommate told me that he designed his websites in Notepad. This kind of floored me.

“Notepad?”

“Yep.”

I had no idea about this at the time, but all a website is is a text file using a simple language, (X)HTML: (extensible) Hypertext Markup Language.

It’s very logical and simple. Write it in a text file, change the text file “extension” from .txt to .html and you’re in business.

This realization floored me, but I was intrigued.

Anyway, when I found myself understanding that Jacqui was attracting my attention in a way other women aren’t, I created this blog for her.

Barry had also introduced me to the CSS Zen Garden as an example of how powerful Cascading Style Sheets are.

Go there and see the design. It’s attractive by itself, but look deeper… on the right hand column you’ll see several other designs by other web graphic artists.

They all use the exact same HTML. Try them out.

They are identical even if they look different. What has changed is that each uses a different CSS file. You can visualize why “Cascading Style Sheet” is the perfect name. Everything just flows from it in this neat cascade that you can control by assigning unique “classes” and “ids” to different (X)HTML page elements. It’s how on Loving Jacqui you can press the button on the top right and switch the webpage from “Original Blue” to “Ghastly Pink” and fortunately back again.

The CSS Zen Garden is known around the web for being a beautiful example that has inspired many including me.

I was also talking with her about how I don’t like “alpha-channel transparency” background images.

“What the —?”

Before on the Internet it used to be that your only option for transparency was you could take an image and save it as a .gif file (as opposed to the equally common .jpg usually used for photographs because it offers small file size and millions of possible colours: .gif only offers 256).

When saved as a .gif, it is possible to make certain pixels (picture dots) 100% transparent, which means you can see whatever is behind them.

This allows you to put an image of a dolphin, for example, on your aqua web page and it looks like it belongs there. Even if it really belongs in the ocean.

Newer, more capable web browsers than Internet Explorer: contenders like Opera and Firefox, the one I use, follow more closely Internet standards laid out by the World Wide Web consortium (WC3).

This makes things easier for web designers because while Internet Explorer is common, you’re always trying to make it do things that it “should” do, but won’t do, not without significant tweaking and, “Why the hell does it do that when I just told it to do the opposite?” that you just don’t have to bother with with these other browsers.

For years these other browsers have supported alpha-channel transparency.

You know how when you look through the water, you can see the water and the person swimming beneath it?

Partial transparency = alpha-channel transparency.

Now that the new release of Internet Explorer, IE7, supports alpha-channel transparency, more web designers are placing a background image on their page and then make the surface you write on partially transparent so that you can see the background image like a watermark. They then fix it in place so that when you scroll down, the picture stays and the text itself moves.

This looks very cool and gives the website a certain “unearthy” feeling that makes the site seem light as a feather. It’s beautiful.

But damnit. I come to a website to read and having a photo with light and dark spots behind a partially transparent page makes it hard to read. I guess I’m not 18 anymore, but as a 34-year old, I shudder to think what it’ll be like to read this when I’m 80-something and Bear is lovingly blowing the dust out of my eyes as we send instant telepathic emails enquiring about our prescription drug plan.

So we’re having this conversation, and I’m telling Bear about how I dislike alpha-channel transparency and I’m reading a comment on another blog and I discover this link:

α-channel transparency done right: A Jacqui Bear style “Pretty in Pink” theme even I can approve of