What a lovely textured spash screen. Those were the days.

I was working on creating an HTML email today and found that it was next to impossible to achieve compatibility between Outlook 2003 and Outlook 2007. There didn’t seem to be much material to help me out except this interesting article, which explained the problem.

It turns out that in Outlook 2003, emails are written and displayed using MS Word, but when you view HTML it uses the IE rendering engine. Makes sense I guess. Outlook 2007 on the other hand uses MS Word 2007 rendering both both. This is good in terms of consistency, but dreadful in terms of flexibility. Not only will an HTML email written for outlook 2003 look awful in outlook 2007, but Outlook 2007 simply doesn’t support full HTML, meaning you have to resort to using tables to ensure compatibility.

• no support for background images (HTML or CSS)
• no support for forms
• no support for Flash, or other plugins
• no support for CSS floats
• no support for replacing bullets with images in unordered lists
• no support for CSS positioning
• no support for animated GIFs

But these are all the things that make it worthwhile doing an HTML email. Otherwise the whole internet would be basically a big web of Word documents linked together by a giant desktop full of broken shortcuts. In this world I do not think the WWW would have caught on….we would probably still live in a Nielsen world of 1 line CSS files and revolting 90’s design.

Microsoft helpfully gives us help with all of these problems. This is one of the least useful pages ever. It supposedly give you a link to an HTML/CSS validation tool, that not only requires Microsoft’s Visual Studio but also requires changes to registry settings and goodness knows what else. They should have just provided a tutorial on nested tables, colspan and cellpadding and we would be away.

Still working on a detailed functional design for a content management scheduling system. Having torn my hair out trying to find some pre-built components to barstardise I resorted to designing it all from scratch.

Often when designing a user interface one may turn to Powerpoint for wireframes, Visio for flow and logic diagrams or even HTML to mock up a simple prototype. I decided to shun all these options in favour of flash…

Initially it seemed like a fairly bad idea since things like drag & drop, frame control and scrolling windows are all a little complicated thanks to ActionScript 3.0’s attempts at being a proper programming language. Luckily I soon brought my Flash 5 skills into the 21st century as I juggled event listeners, mouse events and sophisticated function calls.

The tool basically allowed an editor to select spots on a page, then choose an item from a pool of content, schedule it and then edit or modify their settings as and when necessary. To start with I allowed the user to drag content directly from the pool onto the page. This was very usable, but tricky to do technically without heavy customisation on some JS frameworks such as MooTools or Scriptaculous. In the end I settled for a simple overlay system to let users select spots and content.

Within a day I had a reasonably complete interface (with a bit of smoke and mirrors) and I was able to review the design with stakeholders before moving onto the next iteration. The core look and feel as even overhauled twice before settling on a workable arrangement.

Once done I will add in an example since I think it’s useful to see what can be done in a day even by someone with limited experience with flash and actionscript (still managed to rack up nearly 500 lines of code somehow)l. Ideally in projects with experienced flash integrators, a design mock-up like this could be turned into the finished product thus saving valuable development time.

If I get a chance I will update with a list of tutorials for all the components I used to get the crucial bits and pieces in place.