In This Issue...

• Introduction
• Microsoft Breaks HTML Email Rendering in Outlook 2007
• More on the New Microsoft.com
• New Technical Articles
• Techy Forum Threads
• More Techy Blog Entries

ECommerce Software for Professionals

Xonca shopping cart software by Arquan is built for web designers and SEO professionals.

• Supported software
• SEO friendly and SEO tools
• Easy to use admin area
• Complete design control
• Partner opportunities – earn revenue

Limited Offer – Next 50 people receive FREE Certified Reseller Partner training ($295 value).

Free 30-Day Trial of Xonca and More Info

Introduction

The holiday season has come and gone and it's back to work for everyone here at SitePoint HQ. The good news is that we got so many projects finished before heading off on our Christmas break that we've now got plenty of things ready to release in the coming month!

Next week—and as Tech Times readers you're getting the scoop on this one—will see the launch of The CSS Video Crash Course, a new SitePoint video tutorial series. The eight-part series adds up to over two and a half hours of video goodness, providing a complete introduction to Cascading Style Sheets for the total beginner.

Not only that, but by popular demand we're also launching downloadable versions of all our video tutorials. If you've paid for a SitePoint video tutorial, you'll now be able to download a copy to your computer for offline viewing. This has been the #1 request we've received from customers since launching the videos, and we're pleased to finally make it happen.

And that's just scratching the surface of what SitePoint has coming up.

Speaking of videos, the complete video of my talk, Coping with the New Web on the Server Side from Fundamentos Web 2006 in Spain is now available to view online for free. Check it out, along with the talks of my esteemed co-presenters, Richard Ishida, Molly Holzschlag, Andy Clarke, Ben Hammersley, Dean Jackson, and others.

Microsoft Breaks HTML Email Rendering in Outlook 2007

If support for web standards in browsers is improving slowly, then support in email clients is moving at a glacial pace. Attempts to document things like CSS support in the major email clients have revealed a depressing state of affairs, but with recent desktop clients like Thunderbird now sitting on solid rendering engines, things have been looking up.

All that changed when Microsoft dropped a lump of coal into every web developer's stocking with the end-of-year release to business customers, and the upcoming consumer release, of Outlook 2007.

At the risk of turning this newsletter into a biweekly Microsoft bash, Redmond has done it again. While the IE team was soothing the tortured souls of web developers everywhere with the new, more compliant Internet Explorer 7, the Office team pulled a fast one, ripping out the IE-based rendering engine that Outlook has always used for email, and replacing it with ... drum roll please ... Microsoft Word.

That's right. Instead of taking advantage of Internet Explorer 7, Outlook 2007 uses the very limited support for HTML and CSS that is built into Word 2007 to display HTML email messages.

Having tested the two public beta versions of Outlook 2007 late last year, I knew there was something screwy going on. Many of the newsletters I subscribed to had become unreadable, and SitePoint's own publications (including the Tech Times) were looking decidedly unhealthy. I dutifully reported these rendering issues with the feedback mechanisms provided in the beta, and wrote them off as Internet Explorer 7 integration issues that would be resolved in the final release.

But late last month, a thread in the SitePoint Forums caught my eye. Microsoft had published a pair of articles describing the support for HTML and CSS in Outlook 2007, and the news wasn't good:

"Microsoft Office Outlook 2007 uses the HTML parsing and rendering engine from Microsoft Office Word 2007 to display HTML message bodies. The same HTML and cascading style sheets (CSS) support available in Word 2007 is available in Outlook 2007."

The limitations imposed by Word 2007 are described in detail in the article, but here are a few highlights:

• 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

In short, unless your HTML emails are very, very simple, you're going to run into problems with Outlook 2007, and in most cases the only solution to those problems will be to reduce the complexity of your HTML email design to accommodate Outlook's limited feature set.

With the release of Outlook 2007, Microsoft is effectively adding an entirely new rendering engine to the mix—one that designers producing HTML email will not be able to ignore.

Not only that, but this new rendering engine isn't any better than that which Outlook previously used—indeed, it's far worse. With this release, Outlook drops from being one of the best clients for HTML email support to the level of Lotus Notes and Eudora, which, in the words of Campaign Monitor's David Grenier, "are serial killers making our email design lives hell."

Why on earth would Microsoft do such a thing? Security? Microsoft has been shouting from the rooftops about the new security model in Internet Explorer 7 that prevents the nasty security issues that have plagued Outlook in the past. It seems Microsoft doesn't buy its own publicity, however, because this move sends the message that Internet Explorer's security model is not to be trusted.

Where to from here? Well, as a first step, you'll want to use Microsoft's handy-dandy tool to tell you which parts of your lean, mean HTML emails need to be replaced with old-fashioned HTML sludge. As a second step, you may want to consider giving your Outlook-based readers an easy way to switch to text-only email.

Bring on PDF email. I'm ready.

How Do You Take On More Projects With Limited Resources?

The answer is "outsourcing". Dave Hecker (SitePoint Blogger) is not only an outsourcing guru, he's the author of our latest book...

Outsourcing Web Projects: 6 Steps to a Smarter Business

What a better way to kick off 2007 - with the goal of scaling your business! Learn how draft effective RFPs, get the best rates from your partners and deliver projects on-time and on-budget using outsourced resources.

Click here for a free preview of David Hecker's Outsourcing Book

More on the New Microsoft.com

Following my dissection and critique of the new microsoft.com last issue, I received a lot of feedback via email. Some of it asked questions about the technical points that I glossed over a little, while others added thoughtful commentary to my review.

Unobtrusive Scripting

Matt Campbell had a question about the "unobtrusive scripting techniques" that Microsoft should have used:

"Personally, I’m not sure what you meant by this. Are you able to provide some links to these techniques or describe what could have been done differently?"

In short, just as using external CSS files lets you separate your content from your presentation code with benefits in maintainability, accessibility, and file sizes, unobtrusive scripting means keeping all of your JavaScript code in external .js files so that your HTML content is separate from your JavaScript behavior. In particular, JavaScript event handlers should be set up in an external .js file, not mixed in with your HTML content using attributes like onclick.

A good SitePoint article that covers this is Script Smarter: Quality JavaScript from Scratch.

Redundant Alt Text

Another item I pointed out in my critique was that Microsoft had included in the alt attribute of a decorative image the text "December security updates", instead of leaving it empty (alt=""). Scott Raymond wondered why I thought this kind of alt text was redundant:

"[T]he graphic is linked to the "December security updates" via an <a> tag, so why would you not want to label it as such for a person who might be browsing via an alternative browsing device for the blind?"

The purpose of the alt attribute is to provide a description of an image that contains meaningful content for users who, for whatever reason, cannot see it.

In this case, the image in question is a padlock that serves to highlight the nearby text link, "December security updates." Microsoft decided to link the padlock image to the same destination, as users who saw the image would reasonably see it as representing the destination of that link. So far, so good.

But let's think about how a user who doesn't see images would experience the page. With the image not displayed, is there any information missing? No, because the padlock was purely decorative. At most, it could be argued that the image gave added weight to the link, and if you wanted to preserve that weight you could set the alt attribute to something like "Important security news:", which would roughly match the meaning of the image.

Scott's point is well taken, however, that if you simply set the alt attribute of the image to an empty string, users who could not see the image would encounter the link surrounding the image with no description of its destination.

In fact, this is a symptom of a separate problem, which is that Microsoft included two links to the same destination—one around the image and one around the text headline—instead of just using a single link around both the image and the text. This redundancy may not affect users of visual browsers, but screen reader users will certainly wonder why there are two adjacent links to the same destination.

Presentational Class Names

A number of readers, including Steve Owen and Dan Butcher, wrote in to ask about presentational CSS class names, my critique of which was admittedly terse:

"<span class="leftAlign">, <span class="rightAlign">. Need I say more?"

My objection to this kind of code is fairly straightforward. One of the benefits of CSS is that it allows you to separate the presentation of your web site from its content. If you want to change the look of your site, using CSS will help ensure that the changes you need to make to your HTML code are kept to a minimum.

All that goes out the window, however, if you continue to write HTML code that describes the appearance of your page. Why bother setting the alignment of a piece of text in your CSS code if the associated HTML code is just going to say <span class="leftAlign"> anyway?

Instead, write HTML code (including class names) that describes the meaning of your content (e.g. <span class="subtitle">), and keep all the appearance information in your CSS code, where you can modify it independently if you want to.

The Root of the Problem

And finally, from .NET developer Rick Mason:

"One of the big new features of the new microsoft.com home page (big from their point of view anyway) that you missed is that it's built on Microsoft Office SharePoint Server 2007 (MOSS), which was just released along with Office 12, Vista et al.

"The last version of SharePoint was too slow for a high-traffic public web site, and the new homepage is an advert for MOSS, a way of saying, "look, if it can handle a site this busy, it can handle yours".

"The sad thing is that, out of the box, the HTML produced by MOSS is awful. We're talking layout tables nested five deep, invalid attributes all over the place, alt text for images strictly optional, table headers marked up as td even when it's styled with a class called "header", menu items in a completely different part of the page to the menu header, even font elements for goodness' sake! The list goes on. 

"Clearly, to get the new home page up to the standard it is they have gone to a lot of effort to bend SharePoint to their will. The frustrating thing is that they didn't do that work in the base product, so every savvy web developer working with SharePoint has to repeat it all themselves. This is an example of one department of Microsoft starting to "get it", and another part remaining as clueless as ever despite a lot of badgering.

"This also makes your comment about the lack of RSS more interesting, because, like IE7, MOSS is riddled with RSS feeds. It's not just that they didn't get around it, they must have consciously decided to turn them off.

"I'm a .NET developer working on a new MOSS-based extranet, trying to produce a standards-based site as best I can."

Thanks for the message, Rick!

It's a new year—onwards and upwards, I say. See you in two weeks for the next issue, with 100% less Microsoft bashing!

Kevin Yank
techtimes@sitepoint.com
Editor, The SitePoint Tech Times

Help Your Friends Out

People you care about can benefit from the wealth of information on new and maturing technologies available on the Internet. Help them learn how to do it by forwarding them this issue of the SitePoint Tech Times!