Apollo on Labs!

The long-awaited Apollo pre-release Alpha is now available on Adobe Labs! Download it here...
http://labs.adobe.com/technologies/apollo/

Totally exciting!

Flexlib: Much Needed and Improved Flex Components

An open source Flex library has been released with some great extended and improved components for Flex. I'm particularly interested in the buttonScrollingCanvas and dragScrollingCanvas - they solve some interface issues I've been dealing with in my "baby" Flex app that I was dreading having to write myself.

http://code.google.com/p/flexlib/

Thanks to the team who wrote it!

MAX 07 - Windy City - Be There!

Adobe has announced the dates for MAX this year!

North America MAX 2007 - September 30-October 3, 2007 - McCormick Place West, Chicago

Cool! I SO guessed it would be Chicago, and I think it's a great choice of location. I've attended (even organized) conferences in Chicago and the experience has been positive (outside flying into O'Hare). Lots to do, a beautiful city and a nice convention center. At the time of year weather will be nice too. Rock!

Email styling with foreground and background colors

I was working on a few email designs recently when I came across an issue with the color of the text when the email was forwarded. The solution is pretty simple, it just takes a little planning.

Say you have an email with a dark body background color, say, dark gray. Then the content of your email (a table or a div) has a lighter background (white), with dark text. Then you want to add a footer or a header to the email (an unsubscribe link), outside that body, with the dark background, so you make the text color light. You end up with a style rule something like this:


body {
background-color: #666666;
color: #FFFFFF;
}

div#main {
background-color: #FFFFFF;
color: #000000;
}

Everything looks dandy, until you send that email, and someone replies or forwards the email. Many mail clients such as Outlook will mangle the original css when the message gets forwarded, and use the "body" style for the text throughout, so suddenly none of the text within your "main" div is readable, because it's white on white. Simple fix? Set the foreground color in the body style to your desired (dark) default text color, and then override it for the footer.

body {
background-color: #666666;
color: #000000;
}

div#main {
background-color: #FFFFFF;
}

div#footer {
color: #FFFFFF;
}


IE 7 CSS: Dotted borders...woo!

A little happy feeling just washed over me when I noticed this morning that dotted borders actually show up dotted in IE 7. It's trivial. And I'm pretty much over the dotted-borders-ad-nauseam look anyway. But after all these years of having to either graphically add a dotted border (which always made me think twice before using one) or swallow the ugly dashes that IE 6 substituted, it's nice to see them working.

Design is a living process

I'm a big fan of Campaign Monitor, both as a site and as a tool. One of the things I really admire about their design is how they have designed every detail. If you dissect the design, it's simple, and straightforward, and not unusual. There's no "one thing" about the design that makes it exceptional. What makes it exceptional is the fact that every single character and pixel has been thought out and carefully designed. It's a great work of usability.

They didn't just design a "frame" for the site, they designed the content as well. This is what I believe truly separates the "ok" designs from the great ones.

Some examples of how they have designed the details:

• the headings of their tables (data grids) have a subtle, attractive gradient background and a subtle banded scheme with a nice hover/highlight effect
• every screen shot (features, resources pages) is attractive and neatly cropped
• the "price tag" on their pricing page is impossible to miss, yet matches the site perfectly
• the icons are used consistently throughout the site
  

I also like their clear and friendly writing style, writing is too often overlooked on an otherwise well-designed site.

The method I use to inject quality design at every level of a site, is to design (with whatever tool you prefer) several pages in addition to the home page and sub page. This requires a great deal of preparation. You have to know what content you are going to have, and where it will go. You have to think the content over thoroughly during the design phase. Often it's hard to visualize content without actually having a site design, so I find it's something of a back-and-forth process. Work on the main site design, develop a look; then go design the content pages, go back and adjust your layout...

Design is a living process, it can never all be done "up front", and there is no such thing as taking a template and running with it forever and ever. I'm not trying to create job security for myself, but I do know that well designed sites like CampaignMonitor don't happen by accident.

Tag cloud for Blogger

When I first saw them, I thought tag clouds were a little silly and rather ugly, but now that I'm used to them I've done a 180. Seems they are a better use of space and they sure beat one long list of links, so I decided I had to have one! I found this one for Blogger that worked well, the only thing I had to change was the color settings to get it to match. Cool!

http://phydeaux3.blogspot.com/2006/09/code-for-beta-blogger-label-cloud.html