Essentials

Art direction vs. design: noncommunication arts.

Rules-based design: beyond grids, below spec.

Hot cache: teaching your browser to load changed style sheets.

Preloading hover states in CSS rollovers.

The Daily Report

7 May 2003 :::

8 pm est

CSS updated. If the sidebar looks funky, please reload.

The allure of Allaire

This week at Meet the Makers, MTM founder and Happy Cog partner Brian Alvey interviews Jeremy Allaire. Yes, that Jeremy Allaire. :::

Designing With Web Standards: mini-site up

New Riders’s mini-site for Designing With Web Standards has gone live. Some copy kinks are still being worked out, but you can already download two hands-on book chapters in PDF format. One is about applying compact markup to a hybrid site; the other is about styling that same site with CSS. :::

The beauty within

We’ve retooled this site’s interior landing pages, giving them proper graphic headers and in some cases updating text. (About now lists popular episodes of My Glamorous Life, while Essentials provides summaries of Daily Report topics of note.) Classics, Contact, Tour and Publications have also been visually retooled.

In redesigning our interior landing pages we used but a few of the many excellent and free bitmap fonts available for download at BitmapMania. Some free fonts are overpriced, but we would pay cash money for BitmapMania’s, and probably so would you. They’re that good.

One little-discussed advantage of using bitmap fonts is that, because they don’t antialias, you won’t run into edge pixel problems when using them on a site that allows visitors to change the background color (like this site, for instance). :::

Great minds think alike i

On Monday, we shared Jacques Distler’s XHTML 1.1 plus Target 1.0 DOCTYPE workaround for the ban in XHTML 1.0 Strict and XHTML 1.1 on the target attribute to the anchor element. (Try saying that with a mouthful of peanut butter.) Coincidentally, Dave Hodder proposed the same thing in March 2002. Sometimes an idea is in the air, just waiting for the right person to discover it, and sometimes more than one right person does. :::

Great minds think alike ii

In our May Day discussion of art direction versus design, we cited the recent Mao-in-a-SARS-mask cover of The Economist Magazine. Turns out our web pal Randall van der Woning (co-founder of Soul of the Web) had the same visual idea and published it before The Economist cover went live. Also a coincidence. These things happen. One day we will tell you about our $83,000 prize winning entry in the “Hebrew National Salami needs a slogan” competition. Unfortunately someone else came up with the same slogan we did, and they got the cash. That’s how it goes. :::

5 May 2003 :::

6 pm | 11 am est

Do you really mean every July?

Peas grow there

Film genius Orson Welles supported himself and his projects by doing voiceover work. We first heard this tape fifteen years ago; now you can hear it too. (Requires Shockwave. Hat tip: Jim Heid, who located the online version of this much-circulated underground tape.)

Update: For more entertainment like this, see Demos From Hell (hat tip: Anil). :::

Media conglomeration

On 2 June 2003, the FCC proposes to remove laws that prevent any single company from owning every TV channel or newspaper in your city. If these regulations change, a company with a right- or left-wing agenda could eliminate your access to opposing views. One with no political agenda could eliminate intelligent programming and replace it with sewage that sells ad time. Don’t let one conglomerate control what you and your family can watch, read, or hear. See this or that and contact your representatives. :::

One in five clicks

For every five people who visit this page, only one will follow a given link. (Sites so well known that few would bother clicking through to them have been excluded from this ratio.) If we say FictionPixel is an elegantly understated portfolio site with a restrained color palette and great use of white space, four out of five readers will be content to take our word for it. Likewise, if we say Simian Design’s Character Entity Reference chart deserves a place in your bookmarks, only one in five readers will click through.

Although the ratio of readers to clickers doubtless varies, the same principle seems to hold true for other sites. On daily periodicals that provide on-page comment forms, you can tell some commenters have not read or seen the linked piece that gave rise to the original post. They are responding to the blurb, not to the thing it describes. Just another mystery of web readership. :::

Strictly speaking

Over the weekend we mentioned SitePoint’s workaround for the ban on target attributes in XHTML Strict and reminded readers who want to open new windows that the simplest way to do so while following W3C guidelines is to use XHTML Transitional. Jacques Distler takes issue with SitePoint’s approach: “If you want the target="" attribute in XHTML 1.1, all you need is the right DTD:”

<!ENTITY % XHTML.version
      "-//golem.ph.utexas.edu//DTD XHTML 1.1 plus Target 1.0//EN" >
    <!ENTITY % xhtml11.mod
      PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
    %xhtml11.mod;
    <!ENTITY % xhtml-target.mod
      PUBLIC "-//W3C//ELEMENTS XHTML Target 1.0//EN"
      "http://www.w3.org/TR/xhtml-modularization/DTD/xhtml-target-1.mod" >
    %xhtml-target.mod;

He continues: “Save that on your site, load it in with your DOCTYPE declaration, and, presto!, instant validation.” Jacques proves his point by creating an XHTML 1.1 page that includes the target attribute and validates. Bravo!

This approach is very much in the spirit of XHTML extensibility but leaves open the question of whether browsers that use DOCTYPE switching will render such a page in Standards or Quirks mode. Such browsers (IE, Mozilla/Netscape, and now Opera 7) do not download and parse DTDs; they rely on known DOCTYPE declarations stored in an internal database to determine how a page should be rendered.

Put simply, you might not get the rendering you expect. Plus, if you use XHTML 1.1 and serve it up correctly as application/xhtml+xml for Gecko browsers, you have to rejigger your web server to send the same page using two different MIME types (the correct one for Mozilla and Netscape, and the incorrect one for other browsers). Rather than open these multiple cans of worms, we still advise designers who want to open new windows via the target attribute to use XHTML 1.0 Transitional. :::

Web standards, mon ami

Last week Matthew Mullenweg was kind enough to inform us that the mother of all motherboard makers, American Megatrends, has redesigned using CSS for layout, XHTML 1.1 for structure. The site is attractive, easy to use, and has posted its reasons for redesigning to support web standards – among them, reduced download time for images and text, increased accessibility, a more flexible interface, simpler search and navigation tools, and greater portability. A known display issue in Safari should be fixed soon. :::

Gawdawful slogan of the week

A bus poster for a local New York morning news show reads: “NYC’s Wake Up Call.” Sorry, but those words make us think of 9-11, Abner Louima, the budget crisis, the MTA scandal, and a proposed double digit rent increase that could leave thousands homeless. A peppy AM news team is the last thing those words call to mind. :::

3–4 May 2003 :::

weekend edition

Boom! Shocka locka locka.

We see a pattern here

Repeating background patterns, once the shame of web design, have recently made a tasteful comeback. (Background patterns are the new grey.) If you can’t design your own patterns, Squidfingers offers over 120 lovely background patterns you can use on your site. Go get ’em. If you can design your own backgrounds, K10k has launched a Pixel Pattern Exhibition and invites you to submit your designs.

Joe Gillespie’s free Simple Setter, a pixel font typesetting utility for Mac or Windows, can help you create patterns. Of course it can also help you set bitmapped pixel typefaces, such as the WebIcon series (great for ecommerce interface design) or Tenacity, which we find excellent for menu label design. Joe also offers two fonts designed to let you create over 180 seamless background textures and patterns. :::

CSS tabs

Bookmark this page at Webgraphics, which links to numerous tabbed interface experiments created in CSS. :::

Close that thing! Open that thing!

We’ve opened third party links in a named new window since HTML first made it possible to do so. Some readers like this; others not. (No additional mail is needed on that subject.) New window haters, Blogzilla tells how to suppress new windows by hacking a file in your browser. It’s easy, takes a few seconds, and unexpected new windows will never torture you again.

While some technologically literate web users object to new window links, a few web designers have been sticking forks in their eyes since (X)HTML Strict forbade the use of the target attribute to the anchor element, thus seeming to doom new window links. This is a non-issue, as XHTML 1.0 Transitional permits the target attribute to the anchor tag. If you’re doing transitional things, use transitional markup. That’s why the W3C created it.

But a few designers want to use XHTML Strict and open third-party links in new windows. A recent tutorial at SitePoint tells one way to do that. Several such schemes have floated about since Strict was introduced. We think if you want to open new windows you want to use XHTML Transitional. Point is, you can do as you like. :::

1 May 2003 :::

noon | 11 am est

Art direction vs. design

If you want to know what art direction is, pick up the 26 April–2 May 2003 issue of The Economist Magazine and regard its cover image. Two icons recognized around the world – one old, one new – have been merged to create an arresting visual statement. That is art direction. The design part consists of typography, color, size and placement relationships, and the design is low key compared to the image it supports.

In most visual communication media, art direction is as important as graphic design, although over the past decade or so, print media has increasingly emphasized design over art direction. On the web, art direction is rare, partly because much of the work is about guiding users rather than telegraphing concepts, but also because few design schools teach art direction.

Many design curricula encourage their students to develop a unique visual vocabulary (a style) that can be grafted onto any real-world project, regardless of its audience or message. Most superstars of print or web design have followed that advice. Their work is about their sensibility, not about the product or service. It communicates, at most, that the product or service is cool or edgy.

Design no longer serves the product; the product serves the design. The product is merely a vehicle allowing the designer to express his vision. Thus design becomes a commodified version of fine art (and practically the only version of fine art that pays).

The good news is, talented stylists continually enrich the world’s visual vocabulary. The bad news is, we are decorating instead of communicating. :::

Which twin has the Toni?

Vincent Flanders referred us to BrowserCam, a neat online tool that creates screen captures of your site as seen “in any browser, and on any operating system.” BrowserCam doesn’t handle ecommerce site forms perfectly yet, and it doesn’t show full screens, but it is already a useful and thought-provoking utility.

In sharing it, Vincent asked, “Which is the ‘more correct’ version of your front page?”, thereby opening a can of wriggling invertebrates.

The short answer is that no version is correct because the design was compromised slightly to accommodate the limitations of the world’s most used browser. The longer answer is that there is no “correct” presentation on the web. Even if you design to spec (what W3C and ECMA standards say you can do), and even if all desktop browsers supported those specs perfectly, your presentation would vary because of differences in gamma, monitor size, available OS typefaces, system-wide antialiasing or lack thereof, and so on.

Every webslinger knows this; hence cross-platform testing. Most also know that their work must reach beyond the desktop, where support for standards is often problematic. Rules-based design accepts that there is no perfect viewing environment. Its goal is to create good presentations across differently enabled environments.

But there is such a thing as correctly implementing rules specified in a standard design language. If CSS says “insert 25px of white space above any h3 if that h3 follows a paragraph ... otherwise don’t,” any browser should be able to follow that instruction. Most do already; all will eventually. Meanwhile we fidget and fudge. :::