It’s outrageous that the CSS standard created in 1996 is not properly supported in Outlook 2010. Let’s do something about it.

Hundreds of millions use Microsoft Internet Explorer to access the web, and Microsoft Outlook to send and receive email. As everyone reading this knows, the good news is that in IE8, Microsoft has released a browser that supports web standards at a high level. The shockingly bad news is that Microsoft is still using the Word rendering engine to display HTML email in Outlook 2010.

What does this mean for web designers, developers, and users? In the words of the “Let’s Fix It” project created by the Email Standards Project, Campaign Monitor, and Newism, it means exactly this:

[F]or the next 5 years your email designs will need tables for layout, have no support for CSS like float and position, no background images and lots more. Want proof? Here’s the same email in Outlook 2000 & 2010.

It’s difficult to believe that in 2009, after diligently improving standards support in IE7 and now IE8, Microsoft would force email designers to use nonsemantic table layout techniques that fractured the web, squandered bandwidth, and made a joke of accessibility back in the 1990s.

Accounting for stupidity

For a company that claims to believe in innovation and standards, and has spent five years redeeming itself in the web standards community, the decision to use the non-standards-compliant, decades-old Word rendering engine in the mail program that accompanies its shiny standards-compliant browser makes no sense from any angle. It’s not good for users, not good for business, not good for designers. It’s not logical, not on-brand, and the very opposite of a PR win.

Rumor has it that Microsoft chose the Word rendering engine because its Outlook division “couldn’t afford” to pay its browser division for IE8. And by “couldn’t afford” I don’t mean Microsoft has no money; I mean someone at this fabulously wealthy corporation must have neglected to budget for an internal cost. Big companies love these fictions where one part of the company “pays” another, and accountants love this stuff as well, for reasons that make Jesus cry out anew.

But if the rumor’s right, and if the Outlook division couldn’t afford to license the IE8 rendering engine, there are two very simple solutions: use Webkit or Gecko. They’re both free, and they both kick ass.

Why it matters

You may hope that this bone-headed decision will push millions of people into the warm embrace of Opera, Safari, Chrome, and Firefox, but it probably won’t. Most people, especially most working people, don’t have a choice about their operating system or browser. Ditto their corporate email platform.

Likewise, most web designers, whether in-house, agency, or freelance, are perpetually called upon to create HTML emails for opt-in customers. As Outlook’s Word rendering engine doesn’t support the most basic CSS layout tools such as float, designers cannot use our hard-won standards-based layout tools in the creation of these mails—unless they and their employers are willing to send broken messages to tens millions of Outlook users. No employer, of course, would sanction such a strategy. And this is precisely how self-serving decisions by Microsoft profoundly retard the adoption of standards on the web. Even when one Microsoft division has embraced standards, actions by another division ensure that millions of customers will have substandard experiences and hundreds of thousands of developers still won’t get the message that our medium has standards which can be used today.

So it’s up to us, the community, to let Microsoft know how we feel.

Participate in the Outlook’s Broken project. All it takes is a tweet.

Tags: browsers, bugs, IE8, outlook, microsoft, iranelection

Filed under: Browsers, CSS, Compatibility, Design, Marketing, Markup, Microsoft, Standards, State of the Web, The Profession, Tools, W3C, Web Standards, Working, XHTML, software, spec, style

A “Not Safe for Work” Tag has been proposed for HTML 5:

One of the most common descriptive notes people have to write using text when they post links or images to blogs, comments or anywhere in HTML is to say “this link is not safe for work” or simply “NSFW”. By adding the <NSFW> tag, this could be made much simpler and standardized. Browsers could then have an option to automatically hide all <NSFW> content. A tag is preferred to an attribute since it could then also be used around content and not just links.

Examples:
<nsfw><a href=”http://www.example.com”>Pics here!</a></nsfw>
<nsfw><img src=”badkitten.jpg”></nsfw>

(Via Bruce Lawson)

Drew McLellan of The Web Standards Project thinks it’s a nice idea that won’t work:

@brucel we looked into #nsfw in microformats. It’s an unworkable minefield. #

it’s used when linking to something that you might want to save until you get home. e.g. http://ampleboobies.info (NSFW) #

So a browser could conceivably be configured not to follow links or display content tagged nsfw. Sounds a good idea, but unworkable. #

The use of tags (rather than CSS and JavaScript) to hide or show content is an intriguing and controversial aspect of HTML 5. It’s intriguing because using a standard tag—instead of writing custom CSS and JavaScript that someone else may someday have to maintain—potentially simplifies web development and maintenance, bringing advanced techniques of content presentation to more sites for less money. It’s controversial because it sticks presentation and behavior back in markup, after we all just spent a decade separating site structure and semantics from behavior and presentation.

We’re going to be following these developments and trying to make buzzword-free sense of them for you.

Tags: standards, webstandards, HTML, HTML5, tags, NSFW, W3C

Filed under: Design, HTML, HTML5, Standards, State of the Web, W3C, Web Design, Web Standards

There was a point in the 90s when I felt like a sucker for doing HTML and CSS.”

The .net Zeldman interview is available for your downloading pleasure (4.2 MB PDF). For more of the best in web design and development, visit netmag.co.uk.

Update, 27 May 2009

An HTML version of the interview has now been posted on .net’s website.

Tags: webdesign, webdevelopment, magazine, interview, .net, netmag, interview, interviews, zeldman, jeffreyzeldman

Filed under: Interviews, Press, Publications, Publishing, Standards, Typography, UX, Usability, User Experience, Web Design, Web Standards, Zeldman, reportage, reprints, wisdom, zeldman.com

The Web Fonts Wiki has a page listing fonts you can legally embed in your site designs using the CSS standard @font-face method. Just as importantly, the wiki maintains a page showing commercial foundries that allow @font-face embedding. Between these two wiki pages, you may find just the font you need for your next design (even if you can’t currently license classics like Adobe Garamond or ITC Franklin and Clarendon).

The advantages of using fonts other than Times, Arial, Georgia, and Verdana have long been obvious to designers; it’s why web design in the 1990s was divided between pages done in Flash, and HTML pages containing pictures of fonts—a practice that still, bizarrely, continues even in occasionally otherwise advanced recent sites.

Using real fonts instead of pictures of fonts or outlines of fonts provides speed and accessibility advantages.

Currently the Webkit-based Apple Safari browser supports @font-face. The soon-to-be-released next versions of Opera Software’s Opera browser, Google’s Webkit-based Chrome, and Mozilla Firefox will do likewise. When I say “soon-to-be-released,” I mean any day now. When this occurs, all browsers except IE will support @font-face.

IE has, however, offered font embedding since IE4 via Embedded OpenType (.EOT), a font format that enables real fonts to be temporarily embedded in web pages. That is, the reader sees the font while reading the page, but cannot download (”steal”) the font afterwards. Microsoft has “grant[ed] to the W3C a perpetual, nonexclusive, royalty-free, world-wide right and license under any Microsoft copyrights on this contribution, to copy, publish and distribute the contribution under the W3C document licenses,” in hopes that EOT would thereby become a standard. But so far, only Microsoft’s own browsers support EOT.

Thus, as we consider integrating real fonts into our designs, we must navigate between browsers that support @font-face now (Safari), those that will do so soon (Opera, Chrome, Firefox), and the one that possibly never will (IE, with a dwindling but still overwhelming market share).

The person who figures out a designer-friendly solution to all this will either be hailed as a hero/heroine or get rich. Meanwhile, near-complete solutions of varying implementation difficulty exist. Read on:

CSS @ Ten: The Next Big Thing

“Instead of making pictures of fonts, the actual font files can be linked to and retrieved from the web. This way, designers can use TrueType fonts without having to freeze the text as background images.” An introduction to @font-face by Håkon Wium Lie, father of CSS.

Real Fonts on the Web: An Interview with The Font Bureau’s David Berlow

Is there life after Georgia? To understand issues surrounding web fonts from the type designer’s perspective, I interview David Berlow, co-founder of The Font Bureau, Inc, and the first TrueType type designer.

The W3C: @font-face vs. EOT

A discussion that shows why the W3C may not be able to resolve this conflict. (It’s kind of like asking the Montagues and Capulets to decide whether the Montagues or the Capulets should rule Verona.)

sIFR 2.0: Rich Accessible Typography for the Masses

Mike Davidson’s scalable and accessible remix of Shaun Inman’s pioneering use of Flash and JavaScript to replace short passages of HTML text with Flash movies of the same text set in a real font. The Flash movies are created on the fly. If JavaScript or images are turned off, the user “sees” the HTML text; text set in sIFR can also be copied and pasted. sIFR was a great initial solution to the problem of real fonts on the web, but it’s only for short passages (which means the rest of the page must still be set in Georgia or Verdana), and it fails if the user has a Flash block plug-in installed, as half of Firefox users seem to. It’s also always a pain to implement. I don’t know any designer or developer who has an easy time setting up sIFR. In short, while sIFR is an awesome stop-gap, real fonts on the web are still what’s needed. Which also leads us to…

Cufón – Fonts for the People

Simo Kinnunen’s method of embedding fonts, regardless of whether or not a browser supports @font-face.

Combining Cufón And @Font-Face

Kilian Valkhof: “Everyone wants @font-face to work everywhere, but as it stands, it only works in Safari and the upcoming versions of Firefox and Opera. In this article I’ll show you how to use Cufón only if we can’t load the font through other, faster methods.”

Adobe, Web Fonts, and EOT

Why Adobe supports Microsoft’s EOT instead of @font-face.

Introducing Typekit

Update May 28, 2009: Working with Jason Santa Maria, Jeff Veen’s company Small Batch Inc. introduces Typekit:

We’ve been working with foundries to develop a consistent web-only font linking license. We’ve built a technology platform that lets us to host both free and commercial fonts in a way that is incredibly fast, smoothes out differences in how browsers handle type, and offers the level of protection that type designers need without resorting to annoying and ineffective DRM.

Tags: fonts, webfonts, webdesign, embed, @font-face, EOT, wiki, css, layout, safari, opera, firefox, chrome, browsers

Filed under: Accessibility, Advocacy, CSS, DWWS, Design, Fonts, Ideas, Standards, State of the Web, Tools, Web Design, Web Standards, content, copyright, creativity, development, industry, links

In “Universal Internet Explorer 6 CSS,” Andy Clarke proposes a novel approach to the problem that has vexed standards-based designers since time immemorial (or at least since we could quit worrying about Netscape 4).

The problem is IE6. Outdated but still widely used, especially in the developing world, its inaccurate and incomplete CSS support forces web designers and developers to spend expensive hours on workarounds ranging from hacks, to IE6-only styles served via conditional comments, to JavaScript. Some refuse to serve CSS to IE6 at all; others stop IE6 users at the gate. In some situations (personal site, web app used by first-world hipsters), ignoring IE6 may work; but mostly it doesn’t.

After a brief but thorough tour of current IE6 solutions and their limitations, Andy unveils his zinger. He proposes to serve IE6 users a set of universal styles completely unrelated to the design of the site in question. Not unlike Arc90’s awesome Readability plug-in, the styles Andy has designed concern themselves with typographic hierarchy and whitespace. Here’s the theory: make the page easy to read, make it obvious that somebody designed it, and the IE6 user will have a good experience.

(By contrast, block styles from IE6, as some developers suggest, and that user will have a bad experience. Most likely, in the absence of styles, the user will think the page is broken.)

No hammer fits all nails, and no solution, however elegant, will work for every situation. But if we’re open minded, Andy’s proposal may work in more situations than we at first suspect. Where it works, it’s what business folk call a “win, win:” the visitor has a good reading experience, and client and developer are spared tedium and expense.

Check it out.

Tags: IE6, workarounds, design, development, webdesign, hacks, legibility, styles, CSS, andyclarke

Filed under: Accessibility, Browsers, CSS, DWWS, Design, Layout, Standards, business, development

Armed with nothing more than a keen eye, a good seat, a fine camera, and the ability to use it, An Event Apart Seattle attendee Warren Parsons captured the entire two-day show in crisp and loving detail. Presenting, for your viewing pleasure, An Event Apart Seattle 2009 – a set on Flickr.

When you’ve paged your way through those, have a gander at Think Brownstone’s extraordinary sketches of AEA Seattle.

Still can’t get enough of that AEA stuff? Check out the official AEA Seattle photo pool on Flickr.

Wonder what people said about the event? Check these Twitter streams: AEA and AEA09.

And here are Luke W’s notes on the show.

Our thanks to the photographers, sketchers, speakers, and all who attended.

Tags: aneventapart, aeaseattle09, AEA, AEA09, Seattle, webdesign, conference, Flickr, sets, Twitter, photos, illustrations, sketches, aneventapart.com

Filed under: An Event Apart, Appearances, Browsers, CSS, Career, Code, Community, Design, HTML, HTML5, Happy Cog™, Ideas, Images, Information architecture, Redesigns, Seattle, Standards, State of the Web, Surviving, The Profession, Working, Zeldman, client services, content, creativity, eric meyer, events, industry, jobs, speaking, tweets, twitter

In Issue No. 282 of A List Apart, For People Who Make Websites:

• Can we finally get real type on the web?
• Does beauty in design have a benefit besides aesthetic pleasure?

Real Fonts on the Web: An Interview with The Font Bureau’s David Berlow

by DAVID BERLOW, JEFFREY ZELDMAN

Is there life after Georgia? We ask David Berlow, co-founder of The Font Bureau, Inc, and the first TrueType type designer, how type designers and web designers can work together to resolve licensing and technology issues that stand between us and real fonts on the web.

In Defense of Eye Candy

by STEPHEN P. ANDERSON

Research proves attractive things work better. How we think cannot be separated from how we feel. The next time a boss, client, or co-worker scoffs at the notion that beauty is an important aspect of interface design, point their peepers here.

A List Apart explores the design, development, and meaning of web content, with a special focus on web standards and best practices.

Tags: alistapart, type, typography, realtype, truetype, CSS, beauty, design, aesthetics

Filed under: A List Apart, Advocacy, CSS, Design, Fonts, HTML, Happy Cog™, Ideas, Interviews, Layout, Publications, Publishing, Standards, State of the Web, Typography, UX, Usability, User Experience, Web Design, Web Standards, Working, XHTML, art direction, business, development, industry

With Digg relenting, the Digg bar’s assault on our content, ranking, and traffic will soon fade like every other lousy idea on the web, and we can once again retire our unframing scripts.

Filed under: Standards, State of the Web

Joshua Schachter explains how URL shorteners like TinyURL, bit.ly, etc., originally created to prevent long URLs from breaking in 1990s e-mail clients, and now used primarily as a means of monetizing someone else’s content, are bad:

• They “add another layer of indirection to an already creaky system, [making what] used to be transparent … opaque,” slowing down web use by adding needless lookups, and potentially disguising spam.
• Shorteners “steal search juice” from the original publishers. (For example, with the Digg bar and Digg short URL, your content makes Digg more valuable and your site less valuable; the more content you create, the richer you make Digg.)
• “A new and potentially unreliable middleman now sits between the link and its destination. And the long-term archivability of the hyperlink now depends on the health of a third party.”

And more. Via Merlin Mann.

Anyone who creates web content should read Joshua’s post. I’m sold and will dial way back on my use of the zeldman.com short URL. The question remains, what to do when you need to paste a long, cumbersome link into a 140-character service like Twitter. (If you do nothing, Twitter itself will shorten the link via TinyURL.)

Tags: URL, URLshortener, JoshuaSchachter, redirect, abstraction, Digg, findability, searchjuice, SEO

Filed under: Blogs and Blogging, Design, HTML, Ideas, Information architecture, Publications, Publishing, Respect, Standards, State of the Web, UX, Usability, User Experience, Web Design, Web Standards, Websites, architecture, business, findability, industry, links, twitter

Bigthink.com/jeffreyzeldman is your BigThink channel for all your BigThink Jeffrey Zeldman needs. Now playing at that URL are three Zeldman interview clips for your pleasure:

1. “Jeff” Zeldman dissects online journalism
2. “Jeff” Zeldman outlines the history of blogging
3. “Jeff” Zeldman discusses the future of open source

View early and view often. Happy watching and blogging.

Tags: bigthink, zeldman, jeffreyzeldman, interviews, internet, web, design, history, journalism, online, onlinejournalism, webpublishing, opensource, webstandards

Filed under: Design, Ideas, Interviews, Standards, State of the Web, Typography, Usability, User Experience, Web Design, Web Standards, Zeldman, industry, nytimes, speaking, tv, zeldman.com