In today’s Report:

Hot socks from Reboot

Three favorites from the May 1st Reboot. These sites might stimulate your creativity.

Bug fix

IE5/Mac users, rejoice. How a single carriage return fixed 47 display errors.

Hot socks from Reboot

The annual May 1st Reboot encourages digital authors around the world to redesign their sites and relaunch them on the same day — not for any business reason, but to encourage creative diversity and foster a sense of community. This year it was my honor to serve as one of the event’s judges. Here are three sites I liked a lot:

Jeedoubleu – the portfolio of Greg M. Washington

Most portfolios showcase the work without giving much away about the person behind it. Jeedoubleu inverts that paradigm, using the head and hands of the artist as the means by which you view his work. It’s funny, memorable, and definitely qualifies as an art directional concept. Jeedoubleu is imaginatively and technically impressive, yet its self-deprecating humor keeps it from becoming precious. Clever touches (eye movements, changing expressions linked to site sections, “breath” on the glass of your monitor screen) add depth to the metaphor and keep it fresh.

Technical note: Although the Flash-based site claims that you need IE5/Win to view it, that is not the case. I had no trouble experiencing Jeedoubleu in a variety of non-IE, non-Windows browsers.

CMN

Another portfolio site (almost all Reboot participants are agency sites or personal portfolios). Designed to showcase the creator’s expertise at illustration and graphic design, it also reveals a strong sense of color and the ability to balance several kinds of content on a single page. The color scheme, shapes used, and deliberate distressing of key elements show that the designer is aware of current trends but not a slave to them: he works them into his own style.

If I could recommend one change, it would be to make the designer’s name and contact information more obvious. I’m guessing the designer is named Claudio something, but even his bio doesn’t seem to make that clear.

Playground Blues – the blog of Nathan Paul Borror

After the technical wizardry of Jeedoubleu and the ornate visual touches of CMN, Playground Blues might seem a bit rudimentary at first glance. It is anything but. What Playground Blues achieves is simplicity — one of the toughest things to do well.

As one would hope for in a word-driven site, Playground Blues focuses on your interaction with its content instead of dazzling you with an overt display of graphic design chops. Yet the chops are evident in the way every design detail communicates. Just as good writing works hard to convey ideas — and not to impress you with the writer’s vocabulary — good design sometimes renders itself almost invisible, simply by doing its job well.

So it is with Playground Blues. The care given to size relationships, the subtlety of the navigational interface, the delicious color scheme, and the surprising yet understated interactive effects are all there for visual pleasure seekers, yet they all serve an overarching goal of presenting information simply and effectively. All that, plus web standards and accessibility. Hopefully next year’s Reboot will include more content-driven, standards-based sites; but that is up to you.

Other fine sites participated in this year’s Reboot, but why take my word for it? Visit May 1st Reboot and see for yourself.

Bug fix

IE5/Mac users, this site should display correctly now, aside from the known sidebar banner issue described in the colophon.

Before launching the May 3rd redesign of zeldman.com, I tested every page in IE5/Mac, and everything (except the sidebar banner) worked perfectly. But immediately after the launch, the site fell apart in that browser.

A whitespace bug was to blame. If you’re designing in CSS, and if IE5/Mac users are part of your audience (and millions still use that browser), you might want to know about this simple problem and even simpler solution.

As most developers and all Designing With Web Standards readers know, a whitespace bug in all versions of Internet Explorer for Windows destroys layouts that use lists to create menus. To avoid triggering the bug, most of us have gotten into the habit of removing whitespace from our lists. Thus we write:

<ul><li>item one</li><li>item two</li></ul>

... instead of ...

	<ul>
<li>item one</li>
<li>item two</li>
	</ul>

After crafting and testing the templates that drive this site, I broke out components into Apache includes (the shoestring designer’s CMS), so I could change site-wide elements at any time, simply by editing one file. All standard procedure.

After pasting the menu area into its own include file, I noticed that a carriage return preceded the </div> that ended the top navigation. Without thinking about it, I deleted that carriage return.

If I had tested in IE5/Mac immediately after doing so, I might have realized that that carriage return protected IE5/Mac from one of its bugs — a bug that broke my nice new layout in 47 places. But I was editing several files just then, and by the time I checked the site in IE5/Mac, it was not clear what had gone wrong.

A reader who calls himself Gulliver, acknowledging that what he was proposing was a “hack that shouldn’t be necessary,” pointed out that the addition of a non-breaking space between the end of the list and the closing of the div solved all of IE5/Mac’s problems with my redesigned layout. Gulliver’s tip gave me the clue that led to my not-technically-a-hack solution of inserting a carriage return before the </div>.

And all is now well in Puppet Land.

If you find this kind of dull technical stuff useful, in the near-future I’ll write up CSS layout bugs that cripple IE/Win and Mozilla Firefox, along with simple workarounds I developed to fix those fumbles prior to the relaunch. But enough for one day.

Previously in The Daily Report...

Blog This

Now anyone, at virtually any experience level, can own and manage an attractive and standards-compliant personal site. With input from Adaptive Path and Stopdesign, Blogger reinvents itself (and we lend a hand).

What is Art Direction?

Stephen Hay tackles the question in this week’s A List Apart. This week’s New Yorker shows how art direction provides a framework for understanding written content.

Contrast-o-meter and other adjustments

The zeldman.com redesign continues, with a new feature for laptop users and other adjustments.

Yet Another Fine Job Opportunity

IconNicholson seeks client-side developer.

Design opportunity: Free the Slaves

Better design for a better world.

Campbell-Ewald wants you

Work in the standards-friendly digital division of the ad agency that produced Elmore Leonard.