the daily report

web design news since the 14.4 modem was hot

28 March 2003 :::

3 pm | 2 pm EST

Iraq Body Count

Iraq Body Count documents reported civilian casualties in Iraq and provides variously sized casualty counters you can add to your site. Counter figures are updated in real time via JavaScript. As non-combatant children and adults are reported to have been killed, the counters on your site will roll over to reflect the latest figures.

“Civilian casualties are the most unacceptable consequence of all wars,” say the site’s founders. “Each civilian death is a tragedy and should never be regarded as the ‘cost’ of achieving our countries’ war aims, because it is not we who are paying this price.” :::

We ♥ NY

NYC Wireless has a simple mission: to “provide free public wireless internet service to mobile users in public spaces throughout the New York City metro area.” :::

Pretty standard

Antipixel presents “Steal These Buttons:” attractive, low-bandwidth badges to indicate compliance with CSS and XHTML, XML/RSS feed availability, and more. Raging Platypus carries the button fest to its logical conclusion with buttons for everything.

In “I Scream, ‘Floats!’” (27 March) Brian Alvey of Meet the Makers documents browser problems with a table-free CSS redesign. Short, to the point, and easy to follow, the write-up includes effective visual aids.

“Inclusive Web Design for the Future” – outline of a presentation by Steven Champeon of The WaSP and Nick Finck of Digital Web Magazine. :::

Penn in hand

Requiem for Penn Station. The old Penn Station. “Moynihan to Help Recreate NYC Pennsylvania Station” (28 August 2002). The proposed new Penn Station. Pixel By Pixel original renderings of the proposed new Penn Station. :::

How the west was hated

On the Diane Rehm Show, a panel discusses Sayyid Qutb, the Egyptian Muslim philosopher mentioned in Wednesday’s Report. Hat tip: Jeff Wilkinson. :::

26 March 2003 :::

noon EST

Over a half billion served

CSS poster boy Eric Meyer conducts an illuminating interview with Mike Davidson of ESPN on the subject of web standards and CSS layout as used on a site that gets over a half billion page views per month. What is the justification for using web standards? How do you sell them to your boss? Mike’s answers make worthwhile reading. :::

How did we get here?

Frontline’s “The War Behind Closed Doors,” based on the television documentary of the same name, provides background information on the Bush administration’s march to war with Iraq. The entire 52-minute program is streamed in six consecutive segments.

“The Philosopher of Islamic Terror” in Sunday’s New York Times Magazine tells the story of Sayyid Qutb, a Koranic scholar whose radical assessment of a believer’s religious duties in a secular world shaped Al Qaeda. If you can get hold of a printed copy of the past Sunday’s Times, do it. (Access to content on The New York Times site requires free signup.) :::

25 March 2003 :::

10 am | 9 am EST

MTM rethinks, relaunches

Meet the Makers, the free web conference featuring interviews with and for “creative people in a technical world,” has retooled its site using CSS for layout, XHTML for structure. Meet the Makers has also begun providing worthwhile online content rather than simply listing information about its upcoming events. The site now features front page news and weekly conversations with designers, writers, and other creative thinkers.

This week, MTM host Brian Alvey talks to John Lenker, author of Train of Thoughts and founder of Invioni, about “designing effective web experiences, the battle between creativity and blind usability, and what all web designers can learn from beer commercials.”

The site’s CSS layout works nearly as well in Netscape 4 as it does in IE6/Windows, Safari, and Opera 7. Interestingly, it is less coherent in Mozilla and IE5/Mac, whose CSS support is arguably more accurate than that of the browsers previously mentioned. :::

Free screen reader

Independent designers striving to make their sites more accessible often cannot afford to buy JAWS or Window-Eyes, the two leading screen readers, and thus cannot properly test their work. Tighe Lory, who attended our lecture in Albany last week, has pointed us to EMACSpeak, T. V. Raman’s open source audio desktop for Linux that is available free of charge. :::

Free site optimization tool

Andrew B. King, author of Speed Up Your Site: Web Site Optimization (New Riders: 2003) and founder of Webreference.com, announces a free new service for web designers. Submit your URL to the Web Page Analyzer and it will tally the weight of your markup, images, CSS and JavaScript, then offer advice on how to improve your download and display time.

The new service is not perfect. It occasionally includes messages like this one:

Caution. The total size of this HTML file is $$ HTML_SIZE bytes, which is below 100K, but above 20K.

Despite glitches of this sort, overall, the Web Page Analyzer does an extraordinary job and, as we may have mentioned, it is free. Andrew’s book, Speed Up Your Site, was reviewed in The Daily Report of 31 January 2003. A sample chapter is available online for your reading pleasure. :::

Oh! you pretty things

We recently came across the beautiful and impressive portfolio site of designer, illustrator, and Flash artist Bill Safsel. His work is inspiring, elegant, and playful. ::: Heather Champ’s The Mirror Project is running a funding drive to help cope with the cost of serving over 14,000 contributions from photographers all over the world. Give ’til it hurts. ::: Dave Shea’s Mezzoblue has a pretty surface enlivened by subtle design details and is filled with interesting bits of content. :::

Dingbats of war and peace

Hanan Cohen has informed us of No War, an open source font project offering dingbat fonts and EPS illustrations on the themes of war, peace, and terrorism. The illustrations, which can be used without attribution in any non-commercial project, include outlines of European nations; dingbats of soldiers, choppers, and tanks; and EPS images ranging from bin Laden to the Buddha. The site may offend some viewers. :::

19 March 2003 :::

4 pm | 3 pm EST

Talk is cheap free

This Friday in Albany, NY, we’ll deliver a half-day talk on designing with web standards. The session is free, but you must register in advance – i.e., today or tomorrow. The talk is part of a Continuing Education Series by The New York State Forum for Information Resource Management’s Webmaster’s Guild, with support from The Governor’s Office of Employee Relations. Try saying that with a mouthful of peanut butter. :::

New blog app runs on your computer

Hivelogic presents notes about Soapbox, a new weblog application you can download an install on your computer. It sounds great. (We continue to hand code zeldman.com, but don’t mind us.) :::

Where in the world is CSS 2.1?

Here’s a fun game for geeks. Go to the W3C’s CSS page and try to find a link to the CSS 2.1 specification. Go ahead, try.

In an emergency meeting at the United Nations, Hans Blix said: “We are certain that the W3C has created a CSS 2.1 specification. We’ve had dialogues with academics and engineers who helped develop it. But the W3C’s website has not made an effort to help us find the CSS 2.1 specification.”

(For what it’s worth, the spec is hidden here.) :::

Macromedia redesign

Todd Dominey in “Macromedia.com Progress Report” and Douglas Bowman in “Designing in Public” discuss Macromedia’s ongoing public redesign in terms of what it gets right: namely, a lowering of the barrier between creator and user. Traditionally, companies push out product and then fire a scapegoat when problems are revealed. Instead of that, Macromedia is rolling out its redesign in phases and inviting and responding to public comment. In this they may be taking a cue from Mozilla, which publicly reveals reported bugs and the steps taken to fix them, and Safari, which does the same thing semi-officially via browser engineer Dave Hyatt’s weblog.

The first version of the site suffered from accessibility problems that revealed limitations in Flash MX and Microsoft’s reportedly sketchily documented active accessibility technology. The designers were in a tough spot. Converting inaccessible site components such as the Macromedia Worldwide Store to HTML would look like an admission that even the MX version of Flash can’t deliver true accessibility. But sticking with Flash would prove that the developers had been unable to deliver Flash-based accessibility (at least, within their production timeframe) and would also prevent some visitors from using the store. Macromedia switched to HTML backed by middleware.

The site has also been criticized for its poor performance in Opera and Safari, and again, Macromedia appears to be trying to fix those problems. There are font size problems in Camino as well, but Camino (and Safari) must share the blame. Since March 2000, most modern browsers have specified 16px/96ppi as a standard default text size. But Camino and Safari do not do that.

The default size on Camino and Safari is 14px – neither the cross-browser, cross-platform default nor the old 12px Macintosh default. And neither browser makes it easy to switch to 16px. As a result, percentage based text sizes (such as those used on footers at Macromedia.com) are illegibly small in Camino. They are small but legible in Safari, but only if you specify a legible minimum font size using the freeware Safari Enhancer. :::

18 March 2003 :::

1 pm | 11 am EST

Somehow, even here in NYC, it did not feel like Saint Patrick’s Day. Nor did it feel like a day when web design mattered much. Hence yesterday’s silence.

Happy little clouds

When in doubt, reload: We’ve added a rough draft cloud pattern to the top of this site’s white layout (it’s just a quick sketch to see if we like the idea), and removed the American Typewriter face from both layouts to work around a bug in Apple’s Safari browser, which consistently inserts American Typewriter Light instead of the specified Roman weight. (When more than one variant of a face is present on your system, Safari inserts the wrong one. The Safari team has been informed of the bug.) :::

Cynthia tops Bobby?

Cynthia Says™ is a “web content accessibility validation solution ... designed to identify errors in design related to Section 508 standards and the WCAG guidelines.” Cynthia runs more tests than Bobby and is free. Cynthia is prettier than Bobby. Cynthia wears clean undies. Alas, like Bobby, Cynthia goes down every 60 seconds. Still. :::

A tool to view the structure of web pages

Ian Lloyd, who we finally met at SXSW last week, has created a free bookmarklet that exposes the underlying structure of a web page without requiring you to view source. “Show and label divs with ids” outlines all div elements with a red border and prints their id labels. Add it to your Bookmarks or Favorites tool bar, and you can deconstruct most websites with a click of the mouse. :::

SXSW Blog

SXSWblog’s Notes Exchange is collecting comments on the panels, presentations, and other events at SXSW 2003. Notes are released under a Creative Commons license of your choice. If you’ve already written about SXSW on your personal site, you can add a link to your site in the appropriate Notes Exchange category. :::

15–16 March 2003 :::

weekend edition

From the JAWS of defeat

Refer to the past two days’ discussion of CSS backgrounds, Skip Navigation, and the JAWS screen reader. Edward Cossette informs us that if you import your default style sheet rather than linking to it with link rel, JAWS will no longer render the style sheet. Thus, Skip Navigation and other access enhancements will no longer be hidden from the people who need them. Edward’s company has used this technique successfully in Section 508 compliant online textbook projects. We’ve made the switch here and will see how it goes. :::

CSS eats the web

It started with personal and indie sites. Then public sector sites like the homepage of Juneau, Alaska climbed aboard the CSS train. Next came big tech sites like Wired.com and Netscape DevEdge; then mainstream, high-traffic, commercial sites like ESPN. Now the floodgates are open.

Recent CSS sites brought to our attention include the Alfa Laval International Customer Magazine produced by Lars Johansson and his team at Swedish design bureau Zeitung, and Berlingske Tidende, the oldest daily broadsheet on earth, produced by David V. Kerns and his group at Metropol Online. Says David: “We have used the same style sheet to make it work in the following browsers and platforms (Windows: IE5, IE6, NS6, Mozilla, Opera6/7; Mac: IE 5.1, NS6, Mozilla), proving ‘industrial strength’ sites, not just weblogs, can be built using divs and CSS.”

Not every CSS site is perfectly standards compliant, nor is every CSS site intended to win graphic design awards, though some may. What unites most of these sites is a desire to better serve readers by loading faster than table-driven sites and delivering content to more types of devices – and thus, to greater numbers of users. CSS sites are also easier and less costly to maintain, easier to redesign and customize, and – by separating structure from presentation – easier to incorporate in advanced publishing workflows.

Dozens of CSS site announcements line our email in-box; trouble is, we’re months behind in email and fearful that we may never catch up with it all. Later this weekend or Monday, we expect to announce the (beautiful) CSS conversion of another mainstream site. :::

Is that a gun in your Pocket PC?

Glenn Davis informs us that our Skip Navigation link fails in Pocket Internet Explorer on his Pocket PC. Like Netscape 4, the Pocket PC browser apparently does not understand anchor links identified by the id attribute, which was introduced in HTML 4 way back in 1997. When user agents don’t support 1997-era HTML, you can sometimes work around the problem by assigning a deprecated name attribute to the anchor, using the same attribute value for both id and name:

     id="xyz" name="xyz"

Alas, under XHTML 1.0, the name attribute is invalid when applied to a div element. It is only valid when applied to a linked element. (The same is true of tabindex.) We are thus presented with three choices:

1. Insert gratuitous linked elements on every page.
2. Write deliberately invalid markup.
3. Wait for Pocket PC to improve its support for HTML 4 – and thus also for XHTML 1.0, which is based on HTML 4.01.

Guess which one we’re going to do.

Folks, if your browser or Internet device does not fully or correctly support web standards, consider writing a friendly, respectful note to the manufacturers asking when they plan to improve the compliance of their otherwise totally excellent product that you use every day. :::

Tears of glass

We sadly note the passing of Glasshaus, a “web professional to web professional” publishing house run by the passionately dedicated Bruce Lawson. Glasshaus published fine books such as Cascading Style Sheets: Separating Content from Presentation (2002: Owen Briggs, Steven Champeon, Eric Costello, Matt Patterson) and Constructing Accessible Web Sites (2002: Jim Thatcher, Michael Burks, Sarah Swierenga, Cynthia Waddell, Bob Regan, Paul Bohman, Shawn Lawton Henry, Mark Urban) among many others.

In a time of tragic upheaval and massive calamity, the collapse of a small UK publishing firm might easily go unnoticed. So let us observe it with respect. We never wrote for Glasshaus, but we liked them and we liked their books. All gone now. :::

14 March 2003 :::

11 am EST

New Riders has fast-tracked Designing With Web Standards. Our new book should hit stores in April or May.

CSS backgrounds and transparency

In yesterday’s Report, we began talking about the Fahrner Image Replacement (FIR) technique that uses the CSS background property instead of the img element to insert images on web pages. In this section we’ll discuss a tremendous advantage of using this technique – namely, the ability to compensate for lack of true transparency on the web. After that, we’ll discuss two unexpected drawbacks.

The Daily Report identifier at the top of this page is an h1 headline. The slug below it is a paragraph. (Arguably, the unit might make more sense as a definition list, with The Daily Report as a definition title and “Web design news ...” as definition data, but that’s not the point we’re making today, and frankly, semantic navel-gazing gives us hives.) The two components, headline and slug, are followed by an old-school rectangular image with no transparency.

As part of our ongoing redesign, we’ve long intended to replace the three components with a single, appropriately branded image. The image would use transparency so as to sit in the page instead of on top of it, while offsetting the boxiness of our CSS layout.

But transparency presents a seeming impasse. Among other things, this site’s style switcher lets readers choose a white or a dark orange background. It is impossible to create a transparent GIF image that will work against such widely different background colors. We could do it with PNG, if all browsers fully supported that non-proprietary image format, but they don’t.

The FIR CSS background technique could solve the problem. Instead of using img to insert a transparent GIF that works against one background color and looks hideous against the other, we might create two versions of our transparent GIF image – one antialiased against white, the other against dark orange. We could then insert the “white” image as a header background on the “white” style sheet, and insert the “orange” image on the “orange” style sheet.

This would work and we have long planned to do it. But two problems with this method, discussed next, have come to our attention. :::

CSS background problems

The FIR method was designed to deliver images to those who can see them and text content to those who can’t. In nearly all cases, it does exactly that. It works in Palm Pilots and web-enabled cell phones. It works in modern browsers under ordinary usage conditions. But it does not work in two situations:

1. If readers turn off images but leave CSS on, they will not see the replacement text because our style rules hide that text from CSS-capable browsers. A reader called this problem to our attention yesterday. We asked why he left CSS on; he told us the version of Mozilla on his operating system would not let him turn it off.
2. Douglas Bowman discovered that the JAWS screen reader renders web pages with screen media styles applied, even though those styles are meaningless to the visually disabled people who use JAWS. Thus, in this leading screen reader, text hidden by CSS is also hidden from the very people it was intended to serve. (For details, see Bowman’s write-up.) This flaw in JAWS also means that Skip Navigation links and other access enhancements will fail if you use CSS to hide them from ordinary browser users. We of course use CSS to hide such access enhancements from those who don’t need them, as do most designers who provide “Skip Navigation” and similar features. These enhancements still work in Palm Pilots and such, and as far as we know they also work in other screen readers. We would encourage the makers of JAWS to reconsider the value of observing CSS rules from which their users cannot possibly benefit short of divine intervention in the form of a miraculous restoration of sight (in which case, they would no longer need JAWS).

Any designer who wishes to use modern techniques to provide both design and accessibility must ask the question, should the two drawbacks described above prevent you from using the FIR method? Presently we use it on this site’s banner. But that banner’s function is duplicated by a sidebar Daily Report link that is accessible to any visitor – so no problem there.

We also use it to create the three sidebar banners linking to A List Apart, Happy Cog, and the WthRemix contest. Those who turn off images but can’t turn off CSS in conventional browsers – and those who use JAWS – will not see these banners or their associated link text. Is that okay? It’s a judgement call. What may make it okay is the fact that, when there is fresh content at Happy Cog, A List Apart, or the WThRemix contest, we will link to it in the body of this page, where everyone can see it.

Still unanswered is the question of whether it makes sense to replace our h1 headline with a CSS background image as discussed earlier in today’s Report, given that a tiny percentage of our visitors will not see either that background image or its textual equivalent. We’re leaning toward “yes,” because the page will work as pure content and because the Daily Report “button” in the sidebar indicates, however subtly, that the name of this page is The Daily Report. Leaning toward “yes” also because this site is for designers, few of whom are blind, and few of whom surf with images turned off. Leaning toward “yes,” but still thinking.

And naturally, the decision is easier on a personal site than it would be on a large, commercial project. :::

13 March 2003 :::

3 pm | 11 am EST

Oops.

Pictures for some, text for others

Based on a method proposed by Todd Fahrner, zeldman.com uses the CSS background property to insert images and create rollover effects while sending text instead of images to Lynx, screen readers, Palm Pilots, web-enabled cell phones, and so on. The benefit in a nutshell: total design control plus pure accessibility.

We’ve written about the technique in Designing With Web Standards (New Riders: 2003), which should hit book stores around August. Meanwhile, Douglas Bowman has written an excellent mini-tutorial on the subject. But wait, there’s more... :::

Preloading hover states in CSS rollovers

During the “CSS: Between the (Style) Sheets” panel we presented at SXSW with Eric Meyer and Tantek Çelik, the question arose: is it possible to preload the hover (rollover) state of an image? It sure is, and you don’t need to write non-semantic junk markup to do so.

Here’s the trick: first, use the hover state image as the background image on the containing element. Doing so will cause the hover state image to load while the page itself is loading. For instance:

#bannerwrap {
	background: url(/i/hoverstate.gif) no-repeat;
	}

Next, use the default state of the image as the background on the banner element:

#banner {
	display: block;
	background: url(/i/default.gif) no-repeat;
	}

Lastly, use the hover state again as the background on the a:hover pseudo-class rule for the element:

a#banner:hover {
	background: url(/i/hoverstate.gif) no-repeat;
	}

You may also be able to skip the containing element if you’re not doing the image/text mambo used here and described by Bowman. In theory you could apply the hover background to the element itself, apply the default background to the element’s a: linked state, and apply the hover background to the element’s a:hover pseudo-class state.

Additional resources: Tantek’s mini-presentation for the panel, which he began writing and formatting at 1:00 am the night before the panel (the man is a rock); our mini-presentation (1.4 MB zip) for the panel, which consists entirely of images (view in Photoshop, Preview, etc.); PhotoMatt’s notes from the panel; and the orange and white style sheets here that show the CSS preload in action. (Scroll down to the section of each style sheet labeled “Image-free logo banner with rollover.”)

We hope to be able to link to Eric Meyer’s mini-presentation soon. The three mini-presentations set the stage for a discussion of CSS in the context for which it was intended — namely, the context of clean, minimal, structural markup. :::

Copywrong

If we are concerned about protecting our civilization from those who would destroy it, we should scrutinize some of our own lawyers, who by extending copyright have made it far more difficult for libraries and museums to preserve cultural materials. Copyright extension makes it illegal for publishers to reprint formerly out-of-copyright books that are falling apart on shelves, and for museums and film organizations to preserve movies that are deteriorating in vaults. At SXSW, Cory Doctorow of Creative Commons encapsulated the problem as “the slow motion burning of the library of Alexandria.”

In an interview in The Guardian, Lawrence Lessig, founder of Creative Commons and author of The Future of Ideas, says: “The reason why it was so devastating to extend the term of existing copyrights is the huge amount of material that is basically unavailable right now because it’s out of print. It is simply material that’s locked up, unavailable, and ... extending the term of copyright for 20 more years means that for 20 more years it’s going to be unavailable.”

But as Doctorow points out, it’s not even that simple. By the time the material is legally available for reprinting or preservation, the source materials may be physically unavailable due to deterioration. Books, films, music: we may lose some of them forever. And why was U.S. copyright law changed? So Disney could keep Mickey Mouse from entering the public domain. :::

Why we still use copyright

We wholeheartedly support the mission of Creative Commons, who are performing some of the most important work being done in the arena of creative and intellectual freedom. CC is leading the fight to share information, collaborate with others, and preserve our cultural heritage. But we do not use a Creative Common license on this site or A List Apart because the existing CC license structure does not yet support what we do.

Specifically, it is perfectly okay for you to copy, modify, and use any CSS or JavaScript on this site, and any code at all on A List Apart. You may copy, modify, and use these files without attribution, on commercial or non-commercial sites, and need not ask permission to do so. A Creative Commons public domain license would seem to cover that aspect of ALA and zeldman.com’s content.

But you cannot reprint without permission ALA articles or the writing at zeldman.com, and you cannot claim to have written it yourself, as several third-party sites and print publications have done over the years. Copyright protects us and protects ALA’s authors from that kind of infringement.

It’s a tricky situation. Because of our copyright notice, some honest people are afraid to use the open source code here and at A List Apart, even though it is meant to be used by anyone. But without copyright protection, unscrupulous people might, for instance, submit Curt Cloninger’s “Usability Experts are From Mars, Graphic Designers are From Venus” to a magazine, pretending it was their own work.

We hope CC will create a hybrid license covering the kind of work we and many others, as diverse as Josh Davis and Porter Glendinning, do on the web. :::

Red Elvis

@NYTimes.com: Accusations of Theft Envelop Warhol Work – the strange saga of “Red Elvis.” (Free subscription required to log in.) :::

12 March 2003 :::

11 am EST

Fish not dead

Some years after Barney Miller went off the air, Abe Vigoda, the actor who’d played Fish on the show, placed an ad in Variety stating that he was not dead. This morning’s post serves a similar purpose. Last week, we helped judge the 82nd annual Art Director’s Club awards (“What is the ADC?”), then flew to Austin for SXSW. We did not update The Daily Report while engaged in these activities. We’re back now, and normal updates will resume shortly. :::

5 March 2003 :::

9 pm EST

The topic of browser differences is as interesting as lint. But as web designers, we need to know about these differences in the same way that photographers need to know about lenses, lights, and film.

Open the file, “Safari vs. Chimera” (360K PDF) and you’ll observe:

1. Their line-height (leading) differs significantly.
2. Their gamma (brightness) differs subtly.
3. Safari displays title text, but not the way any other modern browser does it.
4. The display of the non-standard – but popular – address window icon (.ico) differs greatly.

Differences in line-height

Look at the screen shot. This site’s CSS sets paragraph text at 11px/1.5, meaning 11px text size over leading of [ 1.5 x 11px = ] 16.5px. Safari’s line-height matches that of Opera 7/Win and IE5/Mac (not shown in the screen shot) and appears to be either the correct value (16.5px) or slightly less (16px). The line-height in IE6/Win is slightly more open than that; it may have been rounded up to 17px. But essentially, Safari, Opera, IE/Mac and IE/Win understand 11px/1.5 the same way.

Gecko browsers like Camino (formerly Chimera) and Netscape 7 interpret the rule differently. In Gecko, the line-height is over 20px (see screen shot). There may be a valid reason for Gecko's line-height calculation, but it seems wrong.

We could force all browsers to display the same amount of leading by specifying the line-height value in px rather than as a percentage of the font size, but doing so might create problems in browsers that let users scale font sizes. :::

No standard gamma

Look at the screen shot again. Safari is darker than Camino. Camino, in turn, is darker than IE5/Mac (not shown in the screen shot). And even though PCs are generally darker than Macs, the colors are actually lighter in IE6/Win and Opera 7/Win when viewed in Virtual PC. Why is this? All browsers adjust gamma before displaying web pages; no two browsers adjust it the same way; and all browsers darken web pages before displaying them on Macs. How much they darken them and with reference to which standard is anybody’s guess.

Browsers’ deliberate and non-standardized recalculation of color space is one reason it is impossible to precisely match colors on the web. For instance, if you create a color field in CSS, input the RGB value into Photoshop’s color picker, and export the result as a GIF image, the CSS color and GIF color will differ significantly. (They may not even resemble each other except as distant members of the same family.) :::

Title text in Safari

Look at the screen shot again. You may notice that Safari now displays title attribute text, though it places that text in the status bar at the bottom of the screen, instead of showing it in context as a floating tool tip, the way other modern browsers do:

Open “Title text is inserted here.” <url is inserted here> in a new window.

Though it is probably meant to be helpful to novice web users, the result is somewhat awkward. Among other things, Safari’s attempt to blend its own text with title text and the URL reads like a misfired translation from the owner’s manual of a Japanese VCR.

Safari’s treatment of title text is reminiscent of 1997 JavaScript status bar text hacks, though it avoids a usability problem associated with status bar hacks by displaying the URL in addition to the text. A bigger usability problem is the visual disconnect between the location of the link (which might be anywhere on the page) and the location of the tool tip (way down in the status bar, where the reader may never think to look for it).

On a more positive note, it’s great that Safari now supports title. :::

The address bar icon (.ico)

Lastly, in viewing the screen shot, you may notice that Safari displays the site’s address window icon (.ico) in limited 8-bit color whereas Camino displays it in 32-bit full color. Oddly enough, instead of matching its Gecko sibling Camino, Netscape 7 also displays the icon in limited 8-bit color. IE6/Win displays it in full 32-bit color, but only if you first bookmark the site. If you do not add the site to your bookmarks, IE6/Win will not display the icon at all.

IE5/Mac does not display the .ico file no matter what you do. This is not a huge deal (.ico is not a standard) but once you get used to seeing .ico files, it becomes hard to do without them. Opera 7 does not display it by default, but will do so if you explictly link to it via meta tag (thanks: Rijk van Geijtenbeek and Jeremy White):

<link rel="Shortcut Icon" type="image/ico" href="/path/favicon.ico">

We don’t know why some browsers display the .icos in limited 8-bit color whereas others display them in full 32-bit color. The issue has nothing to do with the browser’s underlying rendering engine. :::

4 March 2003 :::

6 pm EST

Frames fiasco, part two

Douglas Bowman’s spankin’ new frame border/spacing test demonstrates how many pixels each browser inserts between frames with various (essentially useless) attributes applied to the frameset element. Be sure to read his commentary as well. You may reach the conclusions Douglas did:

1. The W3C’s frameset specifications do not provide sufficient control over the display of frames.
2. If you need to use frames and you need to control your design (and every designer needs to do that), your site cannot validate.

Admittedly, like Vanilla Ice, frames reek embarrassingly of the 1990s – but some designs (and some web applications) need them. The problem is reminiscent of attempts to embed Flash or Quicktime content using only valid (X)HTML elements and attributes. It is possible to do so – but it’s not guaranteed to work in every browser, not even in mighty Mozilla. :::

3 March 2003 :::

10 am EST

In two days it will be two years since we met and the universe realigned.

Boys on the side

Added to the “Relevant Externals” department of our sidebar:

EasyRGB’s Color Harmonizer does a remarkable job of creating complements and harmonies for any RGB color you input. (Hat tip: Jeff Wilkinson.) It can’t take the place of a designer’s eye, but it can show you complementary colors you might not have come up with on your own.

Flyguy is a remarkable, Flash-based interactive artwork that breathes life into Trevor Van Meter’s stylishly whimsical black and white illustrations. It’s embarrassing to admit that we were unaware of Van Meter’s wonderful work until we spotted his site among the SXSW Website Competition Finalists.

Other overdue sidebar additions include Stonefishspine, Anil Dash, Oblivio, and Scene 360 (“Film. Art. Music. Literature.”). :::

Frames! They’re gonna live forever!

Neither CSS nor standard (X)HTML allows designers to control frame display and positioning. Designers who must use frames face an ugly choice: submit your layout to the random variations of each browser (no designer wants to do that – and few clients would pay for such sloppiness), or control the display via browser-specific, non-standard attributes (fewer and fewer designers feel comfortable doing that, either). Douglas Bowman of Wired redesign fame laments the needless woe of frame frustration. :::

More to come. Watch this space.

28 February 2003 :::

12 noon EST

Missed Manners

Like disclosing how much money you earn, it is in bad taste to talk about how many daily readers your site enjoys or how well it’s doing on Daypop or Blogwatch or wherever the self-publisher is measuring his popularity this week. When you brag about your site’s traffic, you make people with fewer visitors feel inferior and those with greater traffic chuckle at your misguided assumption of self-importance.

There are legitimate business reasons to trumpet your work’s reach and significance, but such notes should be played on your business site or on an About or Bio page of your personal site. When you fire a self-promotional volley in the context of providing information, you cast doubt on that information’s neutrality. You also break a contract with the reader by yanking her abruptly out of the experience your site was providing. It is like flashing “For your consideration” during a movie scene in hopes of garnering a nod from the Academy Awards.

You don’t have to sell your readers: they are already there. Out of millions of sites, they found yours, and they return to it because they value what you provide. The lily is a perfect flower; it does not need paint. Such is our opinion, and our 40 billion daily readers agree. :::

26 February 2003 :::

10 am | 9 am EST

Flash city rockers

Digital cameras, Canadian new media designers, and found sound: the Escalate project at Art Directors Anonymous combines these elements into fifteen Flash movies, several of which are beautiful to behold. The overall interface is also lovely and clean. Projects take time to load but they’re worth it. (Do yourself a favor: load Escalate in a new window, not in a tab, as the project enlarges to fill your whole monitor.) :::

No tables for Pixeltable

Pixeltable Communication Design is a new and fine-looking site. It’s also a table-free site built with valid CSS and HTML. From those wonderful people who brought you Netdiver. :::

Enkoder turns 2.0.4

Hiveware’s Email Address Enkoder 2.0.4 is a free application for Mac OS X 10.2+ (Jaguar) that does a better job of protecting your email address from spam than any other product we know. “Instead of merely breaking up and printing out a standard mailto: tag, the Enkoder generates a unique and random key and ties [it] to an encrypted array containing your address.”

A live web version is available for all operating systems, and a command line version is available for Windows, Linux, FreeBSD, and Mac OS X in its Unix mode. And as we may have mentioned, all versions are free. We used the Enkoder yesterday to protect a client email address on a quickie mini-site. It is easy to use and it works. :::

Sports section

Last week we reported on ESPN.com’s redesign using CSS layout. Additional comments on same are available at Todd Dominey’s What Do I Know (focus there: the ESPN CSS design works better in Safari than in any other tested browser) and 37signals (focus there: does the copy on the upgrade page really help users understand?). :::

So much for lingerie.js

We’ve changed the name of our default style sheet to stop corporate firewalls from blocking access to this site. The original name was “nu (as in new) default.” Blank spaces are illegal in CSS file names, so the two words were shoved together; the first four letters formed an unintended synonym for unclothed. Some companies block access to inappropriate sites, but this is the first we’ve heard of corporate web software scanning the names of external style sheets and blocking any site whose file names contain naughty character sequences. We wonder if they also have a problem with standard XHTML elements like title and button. :::

Waferbaby turns eight

On 23 February, Waferbaby, one of the web’s longest-running indie sites, celebrated its eighth anniversary online – or would have, if Daniel, the site’s creator, had been paying attention. Congratulations, boychick. :::

Macromedia and A List Apart

Macromedia has republished Drew McLellan’s Flash Satay in their DreamweaverMX Center. The article first appeared in A List Apart Issue 154. It describes a method of embedding Flash content in web pages that is standards-compliant and weighs about 80% less than markup generated by the normative technique of pushing a Publish button in Flash. :::

About face

Veer has updated its extensive library of typefaces, including the entire libraries of Adobe, Letraset Fontek, and the Atomic Media pixel font collection. :::

Better search

Search results here at zeldman.com have improved thanks to tweaks in an intermediate version of the Atomz search engine. We love this product and recommend it unconditionally. :::

25 February 2003 :::

9 am

Eating their own dog food 3.0

Now online for the third time, Marko Karppinen’s biannual standards compliancy test checks to see how many W3C member sites are actually using the standards the body develops and advocates.

The latest results show an increase of 75.7% from the initial test of February 2002. It sounds better than it is. In the initial tests, a mere 3.7% of W3C member sites used valid markup and (optionally) valid CSS. Today the number is up to 6.5% of member sites – still low.

“It is easy to see this as being somewhat representative of how the big businesses and leading academic institutions are adopting web standards,” says Marko. :::

From our Swedish connection

Our Swedish pal Peyo Almqvist shares some of the work he’s been doing lately. Pensum (Swedish language) is the good looking site of a banking co. – and it validates as XHTML 1.0 Frameset. Falcon.se (Swedish language) is a fancy-pants multimedia site that lets you bet on hockey games rendered as Flash movies. (Choose “Ja” to enter.) Port Elizabeth is a destination site with smart features and heavy front page image load times. Some of its subtler features don’t yet work in Mozilla or Kmeleon based browsers but they will. The site displays fine in these browsers, it’s just missing a few tricks due to scripting based on document.all and document.layers instead of document.getelementbyid. :::

24 February 2003 :::

11 am

A new look for an old dotcom

Fray.com has received its first facelift in six and a half years and is looking good. The Fray is a personal storytelling site and one of the web’s longest-running independent content sites. But you know that. The redesign retains familiar, lovable elements from the long running original designed in the mid 1990s, while successfully recasting them in a modern format. :::

Designing with standards

The first draft of Designing with Web Standards is finished, and all but six chapters have gone through final revision. A book like this must benefit designers who’ve worked with standards for years, but it must also speak to those who know lots about ASP or PHP or Flash and less about structured markup and logical CSS. Finding the right balance is tricky. Consider DOCTYPE switching.

Some of us assume that everyone knows about DOCTYPE switching by now, but this is not so. Many designers and content people I’ve spoken with recently had never heard of DOCTYPE switching, which is a toggling mechanism invented by Todd Fahrner in 1998 that lets browser makers support standards without breaking sites built the old-fashioned way.

Though the premise of DOCTYPE switching is simple, IE’s Standards mode differs from that of Gecko browsers like Mozilla, Netscape, and the user agent formerly known as Chimera. In true Standards mode, Gecko browsers assume an inline model for images, which can have unexpected consequences for some hybrid (CSS + table) layouts. To make things easier for designers, later Gecko browsers (Netscape 7, Mozilla 1.01+) added an “Almost Standards” mode that works like IE’s Standards mode. Of course there is more to it than that. There is an entire chapter’s worth of more to it than that.

It is necessary to explain it all without scaring standards novices by making it seem as confusing as, well, as it actually is. Yet it must be covered in sufficient detail to serve designers who are familiar with DOCTYPE switching but unaware of some nuance or other. Many such issues must be discussed without bogging down in tangents or losing focus. The book must be clear, precise, design- and results-oriented, and it must be fun to read. Time and readers will tell. :::

Candies for you

Dinc Type has always made great fonts “for people with computers.” Now they are all free. ::: Pixelgirl Presents OS X icons and desktop pix. ::: Chmork.net is pretty and campy. ::: Yesterme: pinup pix. :::

Bits from all over

Using Apache to serve XHTML as application/xhtml+xml for XHTML aware browsers, text/html for others. ::: How accessible is Safari? ::: Websites mit dem richtigen Doctype versehen (ALA article in translation). ::: Zeldman goes mobile. :::