I have been working on an email template to use for a future design tool. Emails, if you don’t know, are not as easy to design as web pages. They are viewed in a wider variety of clients. Some of these clients are downright evil. I feel like I have come up with a scalable and strong email template that has really good flexibility. It took me all day to design, test and tweak. I kept a loose journal of my adventures. Here are some of the highlights:

1. Outlook 2007 actually has a little more CSS support than I thought. Just because I don’t get positioning and float and a decent DIV or the right box model or margins, doesn’t mean that I can’t still make it work. Using a couple of tables, borders, padding and width, I think I came up with a solid solution that still looks like clean html.
2. I refuse to use spacer.gif. Spacer.gif can kiss my shiny metal ass. Boo spacer! As a side note, I sometimes interview web developers for positions. I look at their html. If I see spacer.gif I say, “Nope, they stink”. Sorry, it’s a pet peeve.
3. Opening up your email html in Word 2007 is NOT the same thing as opening up your html as an email in Outlook 2007. They are really really close, but they have differences. I kept seeing them, so I stopped trying to use Word 2007.
4. There is a bug in Outlook 2007. If you have a table, and each cell has padding of 10px and then you put a cell in the middle to be 0px, it shortens the height of the cell and basically makes a HOLE in your table. I was dumbstruck by this one. It seemed impossible to do, but it does it. The fix is to keep the padding on top and bottom, but remove left and right. The bug is related to height, not to width. It shortens vertically, but not horizontally.
5. Gmail is evil. They only allow inline CSS. They do this to avoid overlapping CSS rules. They could have dealt with overlap CSS rules using a rewrite scheme that put a prefix in front of all the classes. It just made the html really messy. I did my best in my template above to make it clean. But still, that’s lame.
6. Gmail strips all height css rules. Why height?? What did height ever do to them? I got around this problem using padding, but in the dynamic app, it means we need to calculate specific padding rules based on the height the user requested minus the height of existing content. Not trivial, but doable. Why does Gmail allow width? What’s the deal with height?
7. Borders can not be defined as 0px width. In Outlook 2007, if you declare a border as 0px width, it shows up anyway. I couldn’t figure that out, so I said, “Ok, I won’t do that.” I saved an example which works in the browser, but not Outlook 2007.
8. Divs can have borders, but not padding in Outlook 2007. Why not Microsoft? Come on, work with me here. Meet me halfway. YUCK!
9. UPDATE: Hotmail is unhappy with inline commenting in the style attribute. Took them out. Additionally, text-align: left is required in Hotmail. Not sure why.

Some reference material:

• CSS Support in web clients
• Microsoft Reference for Outlook 2007. Invaluable! I could not have done this without it.
• Blog about how Microsoft took us back 5 years (at least). Although I agree with the whole article, I found that, once I rolled my sleeves up, I could slog through it. The first step is forgetting that browsers are much better.

Tested so far in:

• Gmail
• Outlook 2007
• Outlook 2003
• Yahoo Mail
• Thunderbird 2.0.0.6
• Hotmail (new)
• Windows Mail (Vista)
• Windows Live Mail Desktop (Vista)
• Eudora 7.1.0.9
• iPhone
• Lotus Notes 8.0
• Apple Mail

I need to check mobile devices and lotus notes, AOL and some others. I hope it’s helpful to some of you.

SEE UPDATED POST

I finally lost my patience with LunarPages.  The downtime was just getting out of control.  I put down $95 and got a Bluehost subscription (12 months).  Lunarpages made me wait 10-30 minutes for their technical support and then refused to do anything about it.  The intermittent failures were just unbearable.  I am going to switch everything else to Bluehost asap.

My review of Bluehost so far:

• Technical support picks up immediately. (Under 5 seconds)
• The FTP speed isslightly faster than Lunarpages and generally as fast as I could want it.
• Installing WordPress 2.2 was easy.  Upgrading to 2.3 was easy.
• They use the latest cPanel, which I appreciate.  Lunar had an older version.
• Site responsiveness so far seems good.

I will update this review after a month and see if the outages stop.  I put a review in on a site about Lunarpages, and the admin of the site gave me some useful information.  His opinion was that the grass was not greener.  We shall see.  Interesting thing, the site didn’t put up my review.

http://mike.teczno.com/img/right-triangles/RightTriangles.swf

Grab the fingers with your mouse and walk the image across the page.

No real world usefulness, but it’s sure fun.

WordPress 2.3 is out. I downloaded it and upgraded. Bam! I was going to wait for the fantastico upgrade, but decided to just push the envelope. The upgrade process is so smooth and pain free. I really have to hand it to those guys, this is a great product. I admit I haven’t used all of the alternatives out there. However, WordPress leaves me wanting nothing. It’s one of the few products that I don’t actively wish it were better.

Best of the new features: A button to have more choices in the editor. It was a pain to change the font. Hmmm. Where is the font size button? Man, come on. Why do they insist on limiting those buttons. I need to add them in or something. I know there is a JS hack for it somewhere around here. TheH3 button makes the whole paragraph bigger.

Ok, so many it has 1 or 2 little tweaks. But still, great product! Thanks!

Hmm, I still notice in FF that it gets JS errors once in a while. Not sure what that is about. Oh well.

Ethan’s teacher, Mr. Fidner has this posted on the classroom wall. He also has pictures of inspirational people like John Lennon and Ghandi. I like Mr. Fidner. I consider myself a crazy one.

Here’s to the crazy ones.
The misfits.
The rebels.
The troublemakers.
The round pegs in the square holes.

The ones who see things differently.
They’re not fond of rules.
And they have no respect for the status quo.

You can praise them, disagree with them, quote them,
disbelieve them, glorify or vilify them.
About the only thing you can’t do is ignore them.
Because they change things.

They invent. They imagine. They heal.
They explore. They create. They inspire.
They push the human race forward.

Maybe they have to be crazy.
How else can you stare at an empty canvas and see a work of art?
Or sit in silence and hear a song that’s never been written?
Or gaze at a red planet and see a laboratory on wheels?

We make tools for these kinds of people.

While some see them as the crazy ones,
we see genius.

Because the people who are crazy enough to think
they can change the world, are the ones who do.

From Apple Computer

Another great find!  Check out this plugin for Wordpress to manage categories with Ajax.  I have a few hundred uncategorized posts from before I knew to manage them.  I have always been hesitant to deal with them.  Now, with this plugin, it’s finally fast enough to deal with!  Hooray!

I am having a good technology night.

Just what I wanted for the holidays!  As previously blogged, I had been having trouble with the latest versions of WordPress because they switched from Latin to UTF-8 character set.  I found a fix, which basically said, “Leave it as Latin”.  But finally, I found a 1-step UTF-8 Converter Plugin.  GENIUS!!

It didn’t just work well.  It worked perfectly.  So perfectly, that I would suggest WordPress to include it as part of the base package.  This is absolutely a thing of beauty.  Thank you!  Nice blog design by the way.

In 2 days, Wordpress 2.3 will out.  I am so giddy with this success, that I think I will upgrade right away.  I was thinking of updating the style on my blog, but I just feel it’s too much effort right now.  I have to focus.  Don’t add things to the list!

I recently received a comment that said my sprites were breaking in Opera and Safari 2. I don’t have a mac, so I can’t test Safari 2, only 3. Safari 3 works fine. I checked my Google Analytics to see how many people used Opera and it turns out to be around 3%. So I fired up my Microsoft Virtual PC and installed Opera, right next to IE6 and Safari. All the browsers, I really don’t want to support. Booooooo!

Ok, so the problem wasn’t my technique, nor jQuery. To make my life easier for the demos, I used an array to set all of the sames of all of the icons. I used a function called indexOf to get the position in the array and match it to the class. This is all a fancy way of making the class of the link define what kind of image shows up.

Turns out Opera doesn’t support using indexOf in this way. I found a fancy solution to extend indexOf on Opera. But this is ugly ugly ugly. Why does Opera have to be different? Why does Opera have to exist? Who uses Opera as their main browser? Seriously, are there people who say, “Firefox? yuck; IE7? boo; Safari? no way!” It makes no sense to me. Then again, I am a developer who has to deal with the mess underneath. I suppose if we all drove one kind of car, then maintenance would be easier.

I suggested to the jQuery list to put that extension (copied below) into the core. Why not fix Opera and avoid these issues in the future?

To make this code box, I used Dean Lee’s Source Code Highlighter Plugin for WordPress. Uses this GeSHi thing too.

I recently have been working on a new API Browser for jQuery. It’s been a pet project in the back of my mind for some time. I thought I could create a better mousetrap, if only I could get over the programming hump. So finally, last week, I took a few tentative steps forward.

First, I got a good section of it working with pure jQuery. The problem with this approach was that it was very slow. Loading in a giant XML file into the browser and then parsing it took alot of time. So I decided to figure out some PHP do do the heavy lifting. It took me a little while to figure out what was the deal with the -> symbols everywhere. What was a variable? What was an object?

Surprisingly, it went much quicker than I thought it would. I got the basics going in a day, and then refined it this morning at 5am. Getting a variable out of the URL was super-duper simple. I literally didn’t have to do anything. Here is the source of the main page and here is the super XmlReader.php that I created. It’s designed specifically for the jQuery API. It’s not very long and pretty readable. I have the part working where it builds the autocomplete array. I have the part where it builds the list on the left hand side. The next thing I need to do is build the links on the list which calls the same XmlReader and returns a html snippet for the example. I was thinking of putting that html in a modal window or a tab.

I have not gotten stuck so far. (fingers crossed)

I was listening to NPR this morning to an interview with Robert Reich. Apparently, Rob Reich uses blogspot for his blog. He was very interesting on the interview. He was talking about how the world has changed in the last 30 years. I didn’t get to the end of the interview, so I think I will need to read his new book, SuperCapitalism. I liked him on the interview. He seems like he might have some wisdom inside that head of his.

My plan was to finish Einstein and then start Che. Right now, Einstein is boring me, and Che looks exciting. However, I think a little current events might be good.

On a totally unrelated note, I have been playing around with PHP. I really wish I had majored in Computer Science. The lack of understanding the proper way to program just kills me. So many technical things I want to achieve and just can not get to the finish line.