The Daily Report
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. :::
30 April 2003 :::
1 pm | 11 am est
At What Do I Know: How to Link to Items in the iTunes Store.
Rules-based design
Grids are used to balance the design of books, ads, posters, and paintings. They are also often used in web design, particularly when it is executed via HTML tables or Flash. The grid has a long and noble history in the design of two dimensional media. But it is not the only way to design web pages and it is certainly not the webbiest way.
A modular approach, wherein the display of each element on the page is controlled by rules that take serial adjacency into account, may be better suited to the web as a medium. We call this approach Rules-Based Design. Instead of basing size and positioning according to an inflexible grid, rules-based design takes the environment of each element into account before determining how that element should be displayed. As a simple example, a header may have one margin when preceded by an image, and a different margin when preceded by a paragraph.
Simple it is. And CSS2 makes it painlessly easy to execute. But only when browsers understand CSS2. When they don’t, you may need to compromise. We did so today. If your primary browser is IE/Win, this site will now look a wee bit better. It will look slightly worse (though not terrible) in any other browser. We’ve changed our style sheets to accommodate IE/Win’s lack of support for adjacent sibling selectors.
Adjacent sibling selectors in CSS enable designers to create flexible rules without slapping classes on every element and without having to manually change those class attributes as they update their page’s content.
Let’s say you want 25px of white space above every content entry except the first. You’d start by creating an h3 rule that turns off vertical white space:
h3 {
margin: 0;
padding: 0;
}
Next, using adjacent sibling selectors, you’d create a rule like this:
p+h3 {
margin-top: 25px;
}
This rule says: if an h3 header is preceded by a paragraph, insert 25px of vertical white space above that h3 header.
The effect of the two rules is pretty simple. An h3 preceded by nothing (or preceded by an image, or preceded by an h2, or a list) will have no additional vertical margin above it. An h3 preceded by a paragraph, in contrast, will have 25px of white space above it. This will work in any browser that supports adjacent sibling selectors. In other words, it will work in IE5/Mac, Opera, Netscape 6/7, Safari, Camino, Mozilla, Konqueror, and so on. But it will not work in IE/Win.
The alternative method – the one used on most sites – is to slap a class attribute on ’most every element on the page. For instance, using old-school techniques, you might create the following rules:
h3 {
margin: 0;
padding: 0;
}
.vs25 {
margin: 0;
padding: 25px 0 0 0;
}
You would then have to write <h3 class="vs25"> wherever you wanted your h3 header to be preceded by 25px of vertical white space.
If you update your site frequently, an h3 that initially contained no extra class attribute (because no white space was needed) would have to be rewritten as it moved further down on the page (because it would now require 25px of white space and would therefore need a class attribute).
Manually changing class attributes in this way is kind of dumb: computers are supposed to automate tasks, not force us to work harder. Using adjacent sibling selectors frees you from wasting brain cells on this kind of manual authoring. It also reduces bandwidth and clutter and allows you to focus your markup on underlying semantics instead of presentational nuances. But it doesn’t work in IE/Win.
Some people say it doesn’t work in IE6/Win because that browser is nearly three years old. But it works in IE5/Mac and Mozilla, which are older than IE6/Win.
We were initially unwilling to compromise with IE/Win, but we got tired of seeing our headlines jammed up against each day’s opening header graphic, and we figured some of you were tired of it as well. So we’ve bent a little, assigning all h3s 5px of vertical white space and using adjacent sibling selectors to expand that white space by an additional 20px in browsers that understand more CSS than IE/Win presently does. The site is imperfect in IE/Win but looks better than it used to. On the other hand, the extra 5px of white space makes the site look a bit looser in more conformant browsers.
Some web users say they only care about access to information; they claim to be absolutely indifferent to visual presentation. This may even be true for some of them, although it would be nothing to brag about if so.
But design matters, even to people who think it doesn’t (perhaps because they don’t know the difference between design and style). Have you ever owned a car where the seat belt clasps were just a few inches “off” from where they should have been? Did you hurt your hand every time you buckled up? That is bad design and that is why design matters.
We will not be able to do our job well, and neither will you, until browsers finish delivering on the promise of CSS1 and CSS2. :::
Up our sleeve
Happy Cog Studios’ front page and news page have been updated to reflect a few of our recent activities. The news page contains an inner sleeve blurb from Designing With Web Standards. Mr Håkon Wium Lie, CTO of Opera and co-architect of CSS, wrote the blurb. :::
50 ways
From his book, Designing CSS Web Pages, Christopher Schmitt of High Five and the Babble List presents fifty ways to style generic headlines via CSS. :::
Designing with standards at Web Design World
At Web Design World Seattle, 28–30 July 2003, Zeldman will keynote on designing with web standards. The conference’s finely tuned speaker roster includes Kelly Goto, Curt Cloninger, Mark Newhouse, Joe Marini, Andrew Kirkpatrick, Carrie Bickner, Nick Usborne, Steve Mulder, Barbara Coll, Sandee Cohen, Michael Ninness, John Nack, Joseph Lowery, and Dave DeVisser. :::
29 April 2003 :::
5 pm | noon | 10 am est
You sure don’t look it. Happy 40, amiga.
No end of free
Brighton, England’s Skillswap offers free new media design training, with a focus on web standards. The first session was on accessibility; the next, on CSS design, will feature Jeremy Keith of Adactio. Andy Budd conceived and implemented Skillswap and designed its website (and quite handsomely, too).
Speaking of free, here’s another reminder about the free seminar on accessibility and usability on 2 May 2003 at NYC’s Hilton Hotel, featuring a keynote by Andrew Kirkpatrick of WGBH’s Rich Media Access Project, a parcel of other fine speakers and panelists, and a no kidding free lunch. :::
Movie time
To celebrate the release of Quicktime 6.2 for Mac and Windows, we’ve created a little movie for you. (WARNING: Contains rapidly flashing images. Not safe for epileptics.) Quicktime 6.2 is a free download and so is our little flick, which can be used as a low-fi screensaver if you so desire. :::
Ten years of graphical desktop browsers
Wired News remembers: “Grunge was fashionable. Version 1.0 of the Linux kernel was about ready to make its debut. Intel’s snappy new 66-MHz Pentium processor had just been introduced” in April of 1993 when Mark Andreessen and Eric Bina released beta copies of Mosaic, the browser that allowed regular people to discover the World Wide Web. :::
Peerless? iTunes 4 first look roundup
As anyone reading this already knows, Apple has released iTunes 4, featuring a song purchasing system that might satisfy consumers, artists, and record companies alike. Dr Dre said: “Man, somebody finally got it right” (quoted in Fortune). Dennis Mudd, CEO of Music Match: “It’s the first pay-music service that’s better than illegal music services” (quoted in HotWired).
At What Do I Know, Todd Dominey discusses the unobtrusive way the “Music Store” is incorporated into the application:
Quite possibly the best part of the Music Store is what you don’t see – the pop-up ads, annoying news feeds, or other ‘push’ data that any other company with a similar service would have shoved down their users’ throats. iTunes was, and always will be, a standalone application for ripping, burning, organizing, and listening to your mp3 collection – period. It is not a shopping cart, or marketing vehicle for Apple (or any record company) to push unwanted advertising onto your desktop. The store ‘entrance’ is a small, innocuous link in the source window. No reminders. No ads. No annoying crap.
Steven F. shares his first take: “People who are saying ‘I think I’ll stick with free!’ are lost customers. They will not pay at any price. The question is, of the remaining users, will the return be sufficient to make the service worthwhile?” Jeremy Keith avers, “I also wouldn’t be surprised if the price per song, currently $0.99, came down, probably to coincide with the service being opened up to Windows users (perhaps through a website rather than a desktop application). For now, it’s an enjoyable, convenient, and above all, guilt-free way to download music.”
Talk about iTunes at What Do I Know, Waferbaby or MacMerc. :::