CSS3, which is not yet an approved standard, allows for the inclusion of OpenType and TrueType fonts via the @font-face rule. This is great because there are no browser plugins or addons making the browser render pretty fonts, as there is with sIFR, which requires Flash. This method also leaves your page code alone and, while it does require JavaScript in some cases (see below), does not re-write your HTML in any way.

Typekit

Typekit offers an easy way to take advantage of the capabilities of @font-face without you needing to code for all browsers, obtain licenses for the fonts that you use, and manage the server-side requirements of uploading fonts and such.

It does still cost money (just as licensing fonts would were you to roll your own @font-face setup) but the cost is not bad and you have access to hundreds of fonts that have been licensed to Typekit.

I’m using the free “Trial” license for this post.  I can choose from about 100 different fonts but am allowed to use only two fonts on a single website.  The trial license also requires me to have the badge you see in the lower right corner of the site present on all pages on which the Typekit JavaScript is present.  Most non-personal sites will get what they need with the “Portfolio” plan for about $50/yr.  If you want to use Typekit on “https”, or secure, pages or accomodate more than 20GB monthly traffic, you’ll have to pay $249.99/year.  A big difference to be sure.

Regular old font replaced by a neat one called “John Doe.”

This is great, but the first person I see using “Coquette” in the content of their site gets the silent treatment from me for a good long time.

The way it works is that you create an account at Typekit.com and put together what they call a “kit” by browsing the fonts online and clicking the “add” button.   Then, in your “kit editor” you tell it what CSS selectors (CSS classes, IDs or HTML tags) you want the font to be applied to; the weights and styles (bold, italic, etc.) you will want to use, and what plain fonts you would like to deliver to browsers that do not support @fontface (yup, browser support rears its ugly head again!).  After clicking the “Publish” button, you grab a small snippet of JavaScript, add it to the pages on which you would like to apply this new font, and you’re good to go.  Just add the class name you defined when you built your kit to the elements you want styled and it just works.

From creating my account to styling the text you see above was less than five minutes.  I added the JavaScript snippet to the template for this entire blog and I don’t have to think about it again.

As mentioned, Typekit does require JavaScript which is used to generate the link to your “kit” that you created at Typekit.com. The script does not in any way alter the HTML your page originally contained as sIFR does to replace text with a Flash version of the same text.

Also, though you may see a flash of un-styled text as your page begins to load, this method is much quicker to load than sIFR. sIFR fonts will generally look smoother because of the way that they are drawn by the Flash, but are also not re-sizable on older browsers that do not increase the size of everything on the page as the latest versions of Firefox and IE do (and as Opera has for some time).

So, while I have yet to use TypeKit on a client Web site, I’ve not seen anything so far that would stop me from doing so.

In January, the American Federation of Teachers, AFL-CIO, launched their new website, www.AFT.org. Its more than 1.4 million members represent teachers, paraprofessionals and school-related personnel, higher education faculty and staff, local, state and federal employees, nurses and other healthcare professionals, early childhood educators and retirees.

Among other goals, AFT engaged Beaconfire to redesign their 5-year old site to balance the needs of multiple audiences with a more modern and inviting look and feel. Our redesign process involved stakeholder interviews, a creative visioning exercise, a review of peer organizations, a card sorting exercise to gather user input and developing personas representing AFT’s target audiences, in addition to our typical discovery process of defining goals, audiences and features. All these steps resulted in a new information architecture and visual design for the site. In addition to the design, Beaconfire re-engineered the AFT Voices feature on the web site that asks their members to share their voice on important questions and issues for their professions and their constituencies. The new design was implemented by OmniUpdate, AFT’s CMS software vendor.

The new Voices tool automates what was a very manual and time consuming process for posting questions to and comments by members on the website. The new tool has an administrative console where AFT editors can create and publish questions, receive email notifications, moderate and publish responses, and view statistics on questions and comments. It allows members to post their comments and a photo real time, and to vote and rate others’ responses; Editor’s picks and highly rated comments sort to the top. Previously, AFT manually inputted questions and comments from their print publications onto the website, which only enabled them to post a fraction of the number of actual comments received.

The new look and feel, and the Voices tool in particular, have helped to achieve two other key goals for the site – to engage and interact with members online, and allow more members to see themselves on the site and to understand they are part of a larger movement. It’s been a pleasure working with the nice folks at the AFT to make their goals come true!

Beautiful fonts are one of the holy grails of Web Design.  Along with CSS-based equal height columns, better support for image transparency, browsers that all display pages the same (or at the very least the death of IE6), and a vending machine stocking drinks with higher caffeine content than Mountain Dew, the ability to use any font we want in a page design would make us (mostly) very happy indeed.

There is something to be said for sticking with a fairly limited set of fonts for the main content of your site.  After all, people actually have to read what we write and our usual set of fonts are nicely readable for the most part.  But when it comes to headlines we may want to use something a bit more elegant than Arial, Verdana, Helvetica, Times New Roman, or Georgia.

(more…)

Today, I had the honor of speaking on a great panel sponsored by Google and the Ad Council along with Jane Kirchner from American Farmland Trust, Andrew Marshall fromthe Agency for Healthcare Quality and Research (AHRQ) and Carley Graham Garcia from Google.

Huge props to Kate Emanuel of the ad council for pulling it all together and inviting me to join the assembled rockstars. For anyone playing the home game who would like to see my part of the presentation, enjoy!

Great facelifts are not just for the Hollywood elite anymore. In these challenging economic times, organizations are discovering the wisdom of reorganizing their existing wesbsite real estate rather than going under the knife for a complete site redesign. Think botox vs. nose job – If you had limited time, resources and a pretty low pain threshold, which would you choose?

All kidding aside, these days a “facelift” or a “site refresh” may be just what the doctor ordered for several reasons:

1. Your organization has rebranded, updated your collateral, or changed your identity in any way that resulted in a lack of overall visual cohesion.
2. Your site was last designed when Front Page was the cool kid on the block, IE 6 was the best browser on the market, and it’s just begun to feel dated.
3. Your whole site is in flash, no search engines can find you, and you cannot edit it easily.
4. Your information architecture and labeling is largely sound, but could use a tweak to update the language based on some user testing results.
5. You don’t have the time or the money for a complete redesign, but feel your organization’s message and mission are suffering because of a less than optimal site design and user experience.

While I’m a big fan of the transformative power of a fresh coat of paint for your website, here’s a few road-tested suggestions to consider before you drink the facelift kool-aid.

1. Assemble a small, nimble and responsive team to do the work. Do not skimp on a great PM who is no pushover but knows which battles are worth fighting.
2. Take the time up front to define the project requirements and keep them narrowly focused. Make scope creep an offense punishable by organization wide ridicule. Seriously.
3. Commit to a launch date and do not change it unless cats and dogs start falling from the sky. Same for major deliverable deadlines. This will be the “Project that never ends” if you don’t.
4. Do not let process bog you down. Be flexible enough to try a simpler way of doing something even if it represents a shift in “how you’ve always done it”.
5. Set reasonable expectations for the project amongst the organization’s stakeholders, and make sure you keep the lines of communication open at all times.

At the end of the day, the mark of a successful website facelift comes down to effectively using your available resources to help your users better engage with your organization.

And by the way, you look FABULOUS. Did you have some work done?

P.S. If you want to learn more about effective design strategies for your website, don’t miss yours truly (and some other cool folks) speaking on Oct 1st at this Google/Ad Council seminar: “Extreme makeover: Taking your website to a new level”

I’ll never get tired of saying this. The envelope please – Beaconfire just won four Web Marketing Association 2009 Web Awards including:

Free The Slaves, Outstanding Website
Share Our Strength, Non Profit Standard of Excellence
Wildlife Conservation Society, Non Profit Standard of Excellence

Huge thanks to all our project teams for the great work, and to our award-winning clients for being such Rockstars!

And so is the NY Aquarium, Prospect Park Zoo, Central Park Zoo and the Queens Zoo.  Wildlife Conservation Society (WCS), founded in 1895 as the New York Zoological Society, saves wildlife and wild lands. They do so through careful science, international conservation, education, and the management of the world’s largest system of urban wildlife parks.  Beaconfire was pleased to work with WCS to develop their redesigned website (www.wcs.org) on the same instance of Sitecore CMS we used for their 5 park websites.  This allows the organization to share content across their entire family of sites, lessening the administrative upkeep of content for their busy staff.   

 The redesigned WCS site highlights and showcases the fine conservation work they do and addresses their goal of focusing the site on fundraising and relationship-building with users. Browse their (XML driven) interactive Flash map to learn more about ongoing projects throughout the world.  Check it often because the map is growing!  Due to the geocoding in place behind the map, WCS simply needs to add a new map item and it is displayed within the map dynamically.  Learn about how they evaluate the needs of wildlife populations, the ecological integrity of habitats, and the impacts of human activities.  Browse their growing library of multimedia to hear about their efforts straight from their experts – and don’t miss the section focused on the conservations challenges we face.  To meet their relationship building goals the site highlights hero flash promotions and features contextual placement of donation opportunities and signup prompts.   Because of how the information is categorized on the back end, they are able to relate projects and programs with ease, allowing the end user to see the full picture of how impactful the work of WCS really is. 

 One warning, it’s very easy to lose track of time as you browse the WCS site – you may want to set it as a bookmark and come back often.

The iPhone is arguably the most advanced piece of technology commonly found in people’s hands these days. It has a GPS to tell you where you are. It has a phone to let you communicate with people. It has a multi-touch LCD screen that lets the user use the device with no more and no less than one button. The iPhone is a computer … with the Internet. Ten years ago, try to imagine describing to someone what an iPhone does and they’d think that you were talking Sci-Fi. Well, folks, as much as people like to deny it, Science Fiction becomes reality every day in our world.

Jules Verne could see us going to the moon, and John F. Kennedy  actually pushed our country to do it. Star Trek could see us using tri-corders, and Motorola created it as the first cell phone. In my opinion, the iPhone, it’s market of applications, and growing user base is the best way to gain access to and interact with information. It also helps you get in touch with people, but I think face to face is the best way to interface with other humans.

Over the course of my trip to New York City this weekend, I realized exactly how valuable my iPhone is. When I got off my bus at 31st Street and 7th Avenue, I wanted to use my gym membership at the sports club. I went online on my iPhone, looked up the nearest 24 hour gym in their network, and copied and pasted the address into the Google Maps application. In about 2 minutes, I was on my way. After I arrived and couldn’t get into the side of the building which was advertised, I looked up the phone number online, gave them a call and got in. That’s convenience.

The sports club’s web site is not optimized for the iPhone, but since the built-in Safari Browser is a full-fledged browser, I was able to navigate with some effort and get what I needed. If the web site was actually created for the iPhone, it would have saved me some time from zooming in and out, panning left and right to get around. If they had an "app" for that, I might have been able to log into it with my account and it would have been geo-location aware of where I was and tell me the nearest branches of the club. Why don’t they create an "app for that"?

This is all possible and contradictory to popular belief, the functionality that I just described doesn’t have to be developed as an iPhone Application. Much of the functionality can be created in HTML as a web application and placed on the Internet. Google has done a great job by making all of their applications as iPhone friendly "webapps" which behave like iPhone applications.

Recently, some plugins have been released to make your WordPress blog iPhone friendly. Available at Brave New Code, the WPTouch Mobile Theme and Plugin for WordPress takes your standard WordPress blog and makes it look, feel, and behave as an iPhone application with nice transitions.

Static Content Sites

Many organizations have also released informational web sites in a handy, iPhone friendly format. Their sole purpose is to disseminate information. Web Apps such as the Athens Tourist Guide :  and Pocket Cambridge : are basically lists and tables of static HTML that look nice on an iPhone or an iTouch. Do you have information that can be useful to iPhone users? There are some really easy ways to get it out there.

1. iWebKit – “Iwebkit is the revolutionnairy kit used to create high quality iPhone and iPod  touch websites in a few minutes and is based on an LGPL license. In the first 4 months of it’s existance the pack has greatly evolved from a basic idea to a project that has reached worldwide fame!”

2. iUI – It has the following

1. Create Navigational Menus and iPhone interfaces from standard HTML
2. Use or knowledge of JavaScript is not required to create basic iPhone pages
3. Ability to handle phone orientation changes
4. Provide a more "iPhone-like" experience to Web apps (on or off the iPhone)

Dynamic Content Sites

Do you have programming ability or resources which you can utilize to push out your content from your organizational and institutional databases? You can probably use the aforementioned tools in conjunction with dynamic server side languages, but you might want to look into the following options to make your life easy.

1. ComponentOne iPhone Studio – ComponentOne’s studio is a rich set of ASP.NET Server Controls which is beyond compare when it comes to giving you a competitive advantage in creating dynamic applications fast. Some of the included server controls are : Calendar, ViewPort, CoverFlow ( Like the iTunes record browser ), and MultiView ( like the Photo explorer in the iPhone Camera application ).

2. iWebKit for Grails – This plugin provides integration with iWebkit, a powerful User Interface Library for Safari development on iPhone. By using this plugin, the grail developer will have an iphone web app skeleton (CSS and javascript) but also a extended tag library helping in creating iphone web pages in an easy,clean and fast way. If you are a Java developer or your company has them, and have gotten the hang of Groovy, this might be the path for you.

3. iUI with Asp.NET – iUI is very simple and some people have taken some steps to create their own integration for ASP.NET and iUI. This page points you to some third party resources which may be helpful for you in creating dynamic iUI applications.

Possible Scenarios and Tips

How can you capitalize on the iPhone and iTouch user? Here are some ideas which may work out for you.

1. If you have a Calendar of events, you can add iCalendar format links which can let users download the event data and add it to their iPhone Calendar.

2. If you have a location or event search which requires an address or a zip code, you can use W3C’s Geolocation API which is supported by the built-in Safari browser on iPhones.

3. If you have a member’s only directory, you can create an interface which can list people’s information as well as publish their contact info in the vCard format so that they can add it to their contact lists.

After our well-flavored and succulent presentation at NTC in April, The Iron Chefs are on the road again, this time at the Bridge Conference in the DC area. You now have NO reason to miss it!

To refresh your memory: Using just one secret ingredient (a small nonprofit), three web teams will compete in the heat of battle, offering up exceptional tasting ‘menus’, each featuring a delicious new homepage design, a well-seasoned fundraising campaign and a perfectly balanced social networking plan. Only one team can prevail – who will it be? Come see how this unique project brought together a dozen web pros from competing firms, created amazing work for a very special organization, and taught us all the true power of our industry. We promise you won’t leave hungry.

Beaconfire’s own Ali Cherry and yours truly will be moderating this unique session at 3:30 on July 23rd and Susan Finkelpearl of Free Range Studios, Andrew Cohen of Forum One Communications, and Maureen Wallbeoff of Firefly Partners will round out the panel’s incredible talent.

Don’t miss it!

Confession time. When I started designing for the web nearly 14 years ago, I pretty much made it all up as I went along. Brave souls all, we ventured out bravely into the wilderness, hoped for the best and called our mistakes “lessons learned”. Most of us survived to tell the tale, emerging stronger, smarter and a little more acclimated to this brave new world. Others just grew gills, but that’s a story for another time.

As the web industry has matured, it fascinates me that processes and best practices have developed to the degree that all of us are singing a similar song, even though we may not have all gotten the same memo. Working in the web these days feels like spending time on the Galapagos Islands. Evolving to fit our environment, we have somehow still retained the elements that make us all unique without sacrificing forward progress and growth. I always knew Darwin was a designer at heart.

So combining the passion I have for design with my desire to share what I have learned the hard way about the ways of the web, on occasion I stick my hand in the lion’s mouth and go talk to people about it.

Sharing the stage at OneWorld.net’s Web Design for Non Profits workshop with Mckenzine Lock (Senior Communications Manager, Communications and Outreach at Women Thrive Worldwide) and Shirley Sexton (Director of Interactive Marketing & Fundraising at See3 Communications) was further proof that we have learned how to speak the same language without sacrificing our own point of view. Exploring the challenges facing non profits on the web these days, we tackled the same subject from 3 different angles: as a designer who creates visual environments to support an organization’s complex ecosystem, a client who just survived a redesign rooted in best practices, and a marketing evangelist who lives and breathes this stuff every day.

And wouldn’t you know, without comparing notes or peeking at the other’s presentation ahead of time, we shared a cohesive message with our audience. Amazingly, we empowered these non profit professionals in their pursuit of a great new website for their organization, transformed their ability to achieve their goals, and left them excited to take their mission to a larger audience online.

Ain’t evolution fun? Check out my presentation here and tell us what you think!

Web analytics is usually left to marketers looking to fine-tune shopping carts, hone in on AdWords, track campaigns, and conduct a whole bevy of marketing tasks. Creative-types and IA folks don’t always dive into this kind of data. But when a site is undergoing a creative or architectural facelift, it is the perfect time to dive into analytics and make the right decisions.

Creative Decisions:

Analytics packages can tell you a lot about the technology your audience uses. Some stats worth looking at include:

• Resolution;
• Browser;
• Flash Version;
• Java.

Are 75% of your users at 1024×768? Then maybe it’s time to break out of that limiting 800×600 design. Do 30% of your users still in IE6? Avoid transparent images. 5% of your users don’t have Flash or Java? Make sure you offer alternatives to that nifty Slideshow on the homepage (which you should do anyway, but that is another post for another day).

(more…)

On June 24th, I will be speaking about a topic that I could wax rhapsodic about for DAYS: Killer design. So sign up now for One World’s “Web design for non-profits” 2 day workshop on June 24-25 and hear what we have to say on the topic. Just don’t heckle me from the peanut gallery. That always throws me. :)

Hope to see you there!

Beaconfire is proud to be selected as a 2009 Webby Honoree in the Activism category for Free The Slaves.

From the Webby’s Site:
“With nearly 70 categories, Website entries make up the majority of Webby Awards Winners, Nominees and Honorees. Some are beautiful to look at and interact with. Others are a testament to usability and functionality. And a handful excel across the board. To be selected among the best is an incredible achievement worthy of praise — and perhaps a little bragging.

Of the nearly 10,000 entries submitted to the 13th Annual Webby Awards, fewer than 15% were distinguished as an Official Honoree. This honor signifies an outstanding caliber of work. Congratulations to all of our Official Honoree selections!”

Wow. Just Wow. And yay! We’re very excited to be included with the other 11 fabulous projects in this category, and must thank Gravitate Design Studios for their partnership in creating this amazing site.

If you are one of the record number of people attending NTC in two weeks, there is one session you will not want to miss: This is Iron Chef … Battle Non Profit.

Using just one secret ingredient (a small Bay Area nonprofit), three web teams will compete in the heat of battle, offering up exceptional tasting ‘menus’, each featuring a delicious new homepage design, a well-seasoned fundraising campaign and a perfectly balanced social networking plan. Only one team can prevail – who will it be? You be the judge, NTC! Come see how this unique project brought together a dozen web pros from competing firms, created amazing work for a very special organization, and taught us all the true power of our industry. We promise you won’t leave hungry.

Beaconfire’s own Ali Cherry and yours truly will be moderating this unique session at 3:30 on April 27th and Susan Finkelpearl of Free Range Studios, Andrew Cohen of Forum One Communications, and Maureen Wallbeoff of Firefly Partners will round out the panel’s incredible talent.

For more info on the session, listen to this podcast interview. Hope to see you there!

Just last month the American Association of Homes and Services for the Aging (AAHSA) launched another Web site with Beaconfire’s help on Ektron – this one for their London Conference http://iahsa.net/LONDON/index.aspx. Last September, AAHSA launched its handsome new website, aahsa.org, powered by the Ektron content management system (CMS). The main site was designed by Portent Interactive which Beaconfire then implemented in Ektron.

AAHSA invested in replacing their static website with a CMS system to get the IT department out of the content creation process, reduce turn-around time in publishing content to the Web, and help enforce page layout and style. In addition to implementing the design templates, we migrated a number of custom .NET applications into the system, on time for AAHSA’s annual meeting held last year in Philadelphia, PA. So far, AAHSA has successfully migrated two affiliate sites into Ektron, thereby taking advantage of the same template structure and workflows and helping them to enforce organization-wide business processes for content management.

(more…)

Does your site scream out, “I haven’t changed my image since 1995!” Or maybe, your pages are plagued by lengthy copy that just keeps going and going… Perhaps your web presence just doesn’t really reflect all the great work your organization does.

If you happen to be in Portland, Oregon next Tuesday night, Feb 24th, and have a website in need of some TLC, come to the NTEN 501Tech Club and Net Squared MeetUp to problem-solve cures for the “common” website. Yours truly, Beaconfire Creative Director Eve Simon, will be leading the discussion. See you there!

Heifer International, Beaconfire, and Forge FX have teamed up to launch Heifer Village: Nepal – an online game that takes players deep into the lives of Nepalese villagers who are striving to overcome poverty and hunger.

Heifer is a non-profit organization that uses an innovative and proven method to reduce poverty and hunger around the world: they give families living in poverty the gift of a goat, chicken, or other farm animal, along with training in sustainable farming practices. Heifer’s gift recipients use their animal’s milk, eggs, and other products to feed and clothe their families, and can sell the extra to support themselves financially. Our goal with this game is to educate players about Heifer’s unique approach to ending hunger and poverty.

But your goal is to stay alive! You’ll put yourself in the shoes of a 12 year old Nepalese girl whose village is struggling with poverty. You’ll go on a series of missions to seek out life’s necessities — starting with firewood in an area that has seen extensive deforestation. The challenges you’ll face mirror those that Heifer’s real-life partners in Nepal deal with every day.

The game is in beta – which means it’s fully playable but we’re still tweaking it and working out rough spots. We’d love your help in making this game the best it can be. We hope you’ll visit www.heifervillage.org/nepal and try it out. After you’ve played it, we’d love to know what you think. Please leave a comment on this blog post to let us know:

• Did you have any problems getting started?
• Did you know what to do?
• Did the controls make sense?
• Could you find your way around?
• Were you able to complete the missions you received? How difficult was it?
• Was it fun?

We’ll use your feedback to help us as we plan the final version of the game.

Thank you, and enjoy!

Beaconfire is proud and excited to announce the launch of our refreshed Web site. It’s been in the works for several months, and it’s finally ready for public consumption. Our last major redesign occurred about three years ago, and the site was looking a little dusty.

Some of the new site features include:

• An interactive Flash design portfolio
• Fun facts about the team members at Beaconfire
• Blog postings integrated across the various sections of the site
• New options to sort and filter our ever-expanding client list

Most Beaconfire staff members had a hand in working on the site at some point over the past few months. Rahul and Adebo led the tech work. Creative Director Eve put together the new look. IA whiz Amy created the new site architecture. Eric, Elizabeth and Ali worked together on a new tone and copy for the site. Tim and Marissa did the HTML cuts. Michael acted as the executive sponsor, and Lynn was our “client” and did all the user acceptance testing. And Jennifer managed the project and kept us all moving in and around a very busy fall for our clients.

When it comes to professional obsession with browser rendering, I’ve never met anyone quite like our own Marissa. Between multiple-IE instance installs, Browsercam screenshots and an army of test machines, she could probably tell me what’s wrong with a site in OpenWeb on a NextStep machine from 1993.

About 6 months ago, she sent a call around the office for phones to view the mobile version of a site we’d just launched on. I gave her my LG Env2 and left my iPhone in my pocket. After all, the iPhone and mobile Safari were made to browse a site just like a “real” browser on a large display — and the iPhone interface handles this beautifully, with multi-touch zooming and double tapping that expands columns to the width of the phone.  It works so great Apple just got sued.

Since then, however, a growing number of major websites are sniffing the iPhone user agent and presenting mobile versions. Sometimes this is a relatively positive experience – like Amazon’s mobile shopping version – and other times (I’m looking at you m.cnn.com) it’s just terrible.. an endless loop of trying to avoid an ugly, stripped-down content missing mobile version. And that’s where the rant comes in.

Apple: Let me change the user-agent on the iPhone. Sometimes I’d rather just pretend I’m in Firefox. More than sometimes.

Designers: The iPhone may be a device-on-the-go, but it’s nothing like a traditional mobile device. Stop feeding me CSS designed for a phones with a 100×60 pixel screen. If you don’t want to take the time to craft an iPhone version or your mobile version looks terrible on iPhoney, just give me the real thing.

Developers: Always give me a way to get to the “real” site and stay there.

Until the situation improves, iPhone users will just keep looking for backdoors to get the content they really want.

Editor’s note: With the busy holiday season upon us, the Beaconfire Staff has had no time for blogging (as you may have noticed!). But to make up for it, we’re “reprinting” some of our most popular posts of the last couple years. Hopefully we’ll be back to generating new content soon, but for now, please enjoy Tim’s post for anyone who’s had to cut emails with the new Outlook.

There has been much discussion lately about Microsoft’s decision to abandon IE as the rendering engine for HTML emails in Outlook 2007. It’s hard to conduct a level-headed exchange on this topic because of strong feelings about HTML vs. TXT emails, and personal, professional, philosophical, or theological issues with Microsoft. Putting aside the endlessly repetitive and unproductive argument about whether Microsoft has any idea what they are doing, and whether or not it is a good idea to send HTML-formatted email messages, let’s look at the facts.

Molly Holzschlag’s (molly.com) post on the subject says that the impetus for this change was the unacceptable differences that MS Outlook users were seeing between what they saw in their inbox (rendered by IE engine) and what their friends saw when they forwarded those messages on to them (Composed by Word engine). Or when they composed messages from scratch (Word in Outlook) and their friends tried to read them (IE engine again). So it makes sense that you’d want the same engine to create a message that you use to view it. But Word? Really?

The problems enter in when you consider Word’s HTML engine: It’s inarguably sub-par. Already, those of us who create the HTML for use in client’s campaigns are forced to utilize a mish-mash of HTML coding techniques, some of which we’ve long left behind in building web pages. This isn’t just Microsoft’s fault; ALL of the email clients we test in have slightly different quirks and shortcomings. As a result, we are still using tables, spacer gifs, and (in many cases) font tags to layout our templates. So this is a situation of something broken being broken in a different (and perhaps worse) way when it really could have been a step toward fixing it.

So what do we do? Test about a bazillion times. This has always been the case. We have always had to test the rendering of our HTML messages in (at least) Gmail, Hotmail, AOL, Yahoo, Outlook, Outlook Express, Thunderbird, Mac Mail, Entourage and — if we can, and depending on the client — Eudora, Pegasus, Lotus Notes, or Groupwise. The testing required for Outlook 2007 adds a new wrinkle to the Shar-Pei, but regardless of Microsoft’s decisions regarding rendering engines, did anyone really think that 2007 would render the same as previous versions? Not likely. However, most of us thought that we might see an improvement due to IE7s increased support for CSS.

Anyone using email newsletters as a mode of communication urgently need to have their templates reviewed in order to ensure that future messaging remains successful. Many existing templates will not be Outlook 2007 compatible, and can almost be counted on to break when viewed. After all, nobody in their right mind has been designing email or web pages to be viewed in MS Word! It just wasn’t ever something we dreamed we’d have to test.

Were not entirely in the dark, however. Microsoft is supplying us with some information on Outlook 2007 HTML and CSS support, as well as a validation tool. Read up, test twice as much and we’ll all pull through. If we just stick together.

Microsoft Tools:

• 2007 Office System Tool: Outlook HTML and CSS Validator
• Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
• Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)

Other articles and discussions:

• Excellent article by Dave Greiner of Campaign Monitor
• SitePoint post by Kevin Yank
• Arstechnica post by Jeremy Reimer