Skip to: Navigation | Content | Sidebar | Footer


Full Archives

24

December 21

A few of you have been curious about how all the new stuff works on this site. I'll likely write up some of the trickier bits in the new year (though given WDN planning, I'm not going to promise when in the new year).

In the meantime, Drew McLellan approached me near the end of November to write a little something for his web advent calendar, 24 Ways To Impress Your Friends. I thought by the time I got around to doing that, I'd have had this redesign launched, so it would be a perfect avenue to put out some details on what I'd done. Except Rachel Andrew kicked off the month with Faster Development with CSS Constants, which covered most of the ground I expected to. D'oh.

So instead I came at it from a different angle, and wrote up some of how I'm actually going about using photos to create fresh new palettes. Photographic Palettes is now up for your reading pleasure. Go forth, be merry, and impress your friends.

Permalink › | no comments

Icon't

December 20

Details are emerging about the forthcoming Adobe CS3 suite. Big news today: the icons were announced!

Adobe CS3 Icon Chart

Alright, now I'm sure every industry experiences this: from time to time, controversies brew up that appear to the outside observer as obsessive, myopic navel-gazing. Talking about application icons definitely falls under that banner; as a crime against humanity, it ranks somewhere around the level of accidentally using 1% milk instead of skim in someone's coffee. There are indeed more important things to worry about in this world. A lot of them. That said… what in the world led them down this path? Paint chips! For an entire suite of application icons! Did I sleep through the announcement where Pantone bought Adobe or something?

Hey, they probably looked great through a projector's lens during the meetings. And placing them on top of the ultimate designer's emblem, a colour wheel… maybe that Kool Aid wasn't too hard to swallow. I just can't imagine an actual icon designer was involved in those meetings, or maybe they simply got voted down.

Icons in Mac OS X dock and Windows Quick Launch bar

Figure: CS3 Icons mocked up in place within OS X dock and WinXP quick launch.

Because when you actually look at them in situ, it strikes me as glaringly obvious how poorly these work in the view that designers will be seeing every single day. I wasn't overly impressed with the new Office 2007 icons, but they're a world apart from these paint chips.

Commenters on John Nack's original post seem genuinely baffled that these are considered production-ready icons for the world's premiere design suite. Upon seeing the blue "Ps" icon slapped onto the Photoshop CS3 beta, most assumed they were looking at a placeholder.

Jason Santa Maria expressed his feelings quite elegantly:

When making icons, you usually try to design something simple and recognizable to identify things. At the expense of creating a family of icons, you’ve watered them down so much as to be unrecognizable at a glance. The variety of color, while great in theory, does little to help matters because of the sheer number of icons. The plain facts that monitor variations kill the subtle differences, and there are quite a few color blind people out there who can’t distinguish certain shades from one another, should have led you towards a backup plan. That may be what the periodic letters are for, but in choosing to go with one font, and one orientation, you’ve created enough noise that none of them would be recognizable among the others. Plus, baking in the action of having to read the icon just to decipher it adds an unnecessary step.

This is an utter design failure.

Alright, so maybe it's all subjective. Maybe most of the people who have seen them so far just simply don't like them, but everyone else will. No? No. There are ways to quantify how badly these icons work for their intended purpose.

They fail because there is no shape variation. Every icon is contained within an identical square. Nothing breaks the silhouette, the only shape variation occurs inside the square, in the form of the letters. But using a common typeface, stroke weight, and posture across every icon means the various letters have more in common with each other than they differ, and at a glance they all blend together. Since this is the sole shape differentiator, it's a big, big problem. Don't just take my word for it, go read Matt Queen's detailed article, Icon Analysis: Evaluating Low Spatial Frequency Compositions for enough detail about icon shapes to make your head spin.

And these icons fail because conveying important information through colour must be done with care; the current design appears to sample at random from the colour spectrum. More specifically, relying mainly on colour to distinguish between items is a basic HCI no-no, and something anyone who has ever glanced at WCAG knows by heart.

I'm rather wondering if this prominent colour issue won't open a Pandora's box of inept colour usage. "I know I'm using colour as a sole distinguishing factor here, but hey, Adobe did it too, so I'm in good company." Repeat ad nauseum.

There's hope, I suppose, that the situation will improve somewhat. John Dowdell of Adobe chimed in on his post with this, and a call for a bit of patience until the full picture is revealed:

For what it’s worth, I agree that it’s difficult to get the full picture from that single screenshot.

I’ve seen a more complete presentation of this design, though, and it makes a lot of sense to me, seems a lot more intuitive than feathers and such.

Okay, we'll see what that turns out to be when it happens, but I'm not recommending anyone hold their breath. Let me echo Jason once more: what a mess.

Permalink › | 86 comments

Merry DRM-mas

December 18

HBO recently produced a fantastic series of historical fiction called Rome, the first season of which is currently out on DVD. I grabbed a box off the shelf with the intention of buying it as a present, and nearly choked on the $90 CDN price tag for 12 episodes. But hey, it's Christmas, and what better time of year to over-spend on a loved one?

This DVD is copy protected and may be played only on licensed devices.

Then I made a nasty little discovery. On the back of the box, down in small type at the bottom, was a little logo and notification I had never seen before. It read, "This DVD is copy protected and may be played only on licensed devices."

This warning must have come about in the past year or two as my older DVDs are all free of it, but it's now on just about everything else in the store that I looked at to compare. And it set off all sorts of warning bells in my head. I asked the retail clerk — and then his manager — what the store policy would be if the DVDs were unplayable in whatever device the intended recipient had (which I would not know in advance). Would the store take them back opened?

Of course not, due to "copyright issues". I suppose that's in place if I were to copy the discs and then return them; isn't it interesting that the studios' confidence in their copyright-protection mechanism doesn't allow a change in that policy?

I then asked, since the only way to determine whether the DVDs are playable would be buying and opening them, and if it turns out they aren't, would I have ended up buying a completely useless $90 Christmas present? Yes, they agreed, that was about the size of it.

I realize that many people happily buy DVDs without giving the issue a second thought, and that in all likelihood this set would have worked on just about anything the intended recipient has today, since I doubt they possess any sort of DVD-writing device. What about in 2 years from now though… will that continue to be true? Is DRM so far off the general public's radar that people are really spending this kind of money on entertainment that may very well not be useable in a few years' time?

The escalating arms race between content providers and their customers leads me to seriously doubt the longevity of any sort of media that actively breaks compatibility today. And at $90, I'm not willing to find out. I shelved the set, walked out, and bought the intended recipient a DRM-free set of Henckels. I suspect we'll have a much merrier Christmas for it.

Permalink › | 46 comments

Fountain

December 14

It's time for a redesign. After 2.5 years of trusty use, Wintermint gets a much-needed rest.

Welcome to "Fountain", Mezzoblue v6! It's been long enough since I last did one around these parts, that I completely forgot how much work it is. It was a bit of a sprint to get this one done in amongst all the general craziness of this time of year, but here we are.

Design Notes

Two of the biggest ideas behind Fountain are the photo & colour matching, and the way archiving works. I'll explain those in a little bit, I just wanted to quickly cover a couple of other points first.

The width is now non-800x600 friendly. Long-time readers might remember that back in 2003, this site sported a similar-width design. While wide screens have gained a lot of ground in the past 3 years, I'm still of the general philosophy that narrower widths are better, due to the fact that almost no one browses full-screen. The fact that this design is now almost a thousand pixels wide is simply where the design took me; I ended up with the design that fit my requirements, and it happened to be large. That's how it works sometimes.

Never fear! Liquid layout aficionados, I've got you covered too. Way down at the bottom of the About page, you'll find a toggle to kick in an alternate style sheet that will make glorious use of your hugely wide browser, or eat my lovely photos to accommodate your puny wee browser. Either way, you're set.

And, at the moment, IE6 users are not going to like things very much. You can blame Apple for that. (No, really. My Parallels-enabled Macbook is in its third week of being out for repair.) I'll come back and patch up the IE6 issues as soon as I can, but I kinda wanted to launch before the new year, so, the PNGs are going to stay ugly for a while. (Have I mentioned that IE7 is out? Cause IE7 is out. You dinosaurs you.)

Okay, now on to the good stuff.

Archiving

The way archiving is done with this new design is a little different from normal. Let me resort to an analogy to describe it: think of how an issue of a magazine works. It's a series of articles on different topics published during a specific range of time, bound together in a single volume and given a cover image that draws attention while distinguishing that issue from past issues.

So this site works a little like a series of magazine issues. Each post on the site is bound up as part of a collection, along with other posts published around the same date. That collection is then given a photo, and a colour palette derived from that photo. All posts within that collection take on the photo and palette as core design elements, which visually groups them together.

Traditional weblog posts are usually organized by chronology, and perhaps categories. This idea of collections provides a much more visually obvious method of organization. The posts within don't generally relate to each other by subject matter, so chronology is more important, as each collection covers a specific time frame. This is not actually an unfamiliar way of organizing, again going back to the magazine analogy.

Each collection's window of time is arbitrary, and dictated more by whim than any set schedule; this is the web after all, technology enables me to play it loose, so why not take advantage of that. Instead of monthly archives, this collections idea lent itself to yearly archives. As soon as I committed to doing it that way, reverse chronological order stopped making sense, and thus my yearly archives are listed in chronological order.

Don't look for any topical connection between the photo and the collection, there usually isn't one. The photos are meant for visual interest rather than any sort of commentary.

Is any of this relevant in the age of RSS? I sure think so. People still have to visit the site to comment, or if someone links to it, or coming in off Google. And hey, it may be possible that mental connections develop between the content and the visuals, enabling easier retrieval of older posts. (Okay, so that's tenuous thinking at best, and probably not at all likely.) Mostly this is just a fun way of keep the visuals fresh over time, and a non-standard way of tying in my Flickr account. That's all.

Colour Schemes

There is now no set colour scheme for this site; as the photos change over time, so too do the colours. Each collection gets its own photo, and a colour scheme to match. The colours are sampled directly from the photo, and various light/dark combinations are automatically produced. Once I have a base list of colours, I give them a name and plug them into a PHP file, then some simple scripts do the rest of the heavy lifting for me.

Sampling colours from photos is an idea that works well in print design, due to an implicit enabler — once a page is printed, it never changes. On the web, this is a much more elusive practice. Thanks to content management systems and rotating image scripts and daily updates and the like, there are a number of reasons why it's not practical to consider applying this concept to an entire web site. One great example of this being done well in the past is Nazarin Hamid's Absenter, a beautifully sparse photoblog.

The obvious question here is, with a continuously-changing colour scheme, how diluted does the brand identity become? There are certainly plenty of other unifying factors that diminish the difference in colour, from typography to layout to logo. Ultimately this is a personal site though, so I'm not so concerned about brand, and willing to take the risk for the sake of trying something new.

Inspiration

I think it's fairly obvious, but I took a lot of cues from magazine design when putting together this site. The layout, typography, and photo-derived colour schemes owe their existence to flipping through back issues of some of my favourite cooking mags.

The archiving idea was also a magazine-inspired derivation, but I can't say I would have made the connection if it hadn't been for recent archival experiments by Shaun Inman, with his Heap, and Khoi Vinh and his interest in illustrating archive pages. While I doubt anyone could make the case that our respective archival methods are closely related, the fact that these two gents set out down the road of extending our basic ideas on what a weblog archive page should look like proved useful to my own thought process, so hats off.

Photo Credits

Yep, the photos are all my own. Each links to its respective Flickr page for further description and metadata as warranted.

Comment Avatars

Once upon a time there was a centralized avatar service for weblog comments called Gravatar. The people loved it. It was great. When it worked. But it stopped working.

Maybe it will come back one day; I decided not to wait for one day. I've kludged together something else in the meantime. When you comment, if your URL matches that you've listed in your Flickr profile, you might just be recognized on this site with your Flickr avatar.

For now it's entirely manual; I grabbed avatars of people who have listed me as a contact over on Flickr, who are actually somewhat likely to comment on this site. Please, please don't do things like ask me to add your avatar here, this is only temporary, until I can get a more automated method working in the meantime. (I might manually update the list periodically, but only from those who count me as a contact on Flickr, that I actually recognize as commenters on this site.)

Wrap it Up

Okay, I'll finish the summary here, but obviously there's a lot more to talk about. You have questions/comments, maybe?

Permalink › | 129 comments

Iranian Type

December 13

During a recent trip to Moorish-tinged southern Spain, I re-discovered the beautiful calligraphy of Arabic type.

Turns out there's a resurgent interest in typography by Iranian designers, and some incredible work is coming out of that country. "Iranian Typography Now" is one of the best articles I've seen from PingMag recently, and it covers a lot of ground. It's really worth a look.

Permalink › | no comments

Opacity Bugs

December 12

Given its relative new-ness of implementation, I hadn't put the CSS opacity property through its paces yet. I found a situation today where it seemed to fit, and was a little surprised by the results.

Seems that of the three browsers that attempt to support it, only Opera really does it justice. Check out this test page and you'll see what I mean. Hover the image to see the effects I'm describing:

Firefox 2.0 and Camino
The heading and paragraph appear to be oddly affected by the opacity property, but on hover they restore their proper values. On first glance it appeared they were picking up the image's opacity value of 0.8 as well, but when I bumped that down to 0.1 they didn't adjust accordingly. So it seems more like the anti-aliasing level is different between normal and hover states. There's no logical reason for this, it's a big old bug, and I suspect somehow related to Gecko's poor italic handling due to both possibly being the result of poor anti-aliasing handling.
Safari
Well, it just plain freaks out. As you move the mouse over the image, it flashes between visible and... not so much. The actual hover opacity value doesn't even apply. Weird.

Shame. IE7 just gave us PNG opacity, but we're going to need this one too. I see them as flip sides of the same coin.

Update: Whoops, guess I should clarify, this is OS X only.

Update 2: Check out this revised example. A few commenters pointed out that setting the opacity value to 0.9999 instead of 1 would alleviate the problem, and it did the trick in both browsers. Though not ideal, it seems like a relatively harmless and future-friendly trick to enable opacity today. Yay!

Permalink › | 26 comments

Firebug

December 8

All the stuff I said about Xylescope a while ago? Throw in Javascript debugging and live server editing, and you get a sense of what Firebug can do.

In the past two days since installing it, it's helped me track down a half-dozen CSS headaches and some DOM issues that were driving me crazy. It's getting a lot of buzz, but that appears entirely justified; Firebug may just be the web developer tool of the year.

Check out the screencast for a better-than-text explanation of how you might use it. Great stuff, and definitely the prodding I needed to switch back to Firefox for development.

Permalink › | 17 comments