It's beautiful to look at and hold; it's solid and glossy. The screen looks amazing. Animations seem smooth and effortless compared to my 3G iPhone.

I came away from the first session annoyed with it, however. Perhaps it is because it is not mine, and so I did not attempt to personalize it. My annoyance came in two forms: irritation with the constant upsell while in use, and the lack of real network capability in what should be a perfect network device.

When it is first powered on, it requires plugging the device into iTunes. Obviously this is a personalization thing, but the drive to register and associate it with a MobileMe account soured me right away. Why can't I just fire it up and configure it on the device, with a similar wizard as you find on a new Mac laptop? I want to use it, and the sense that it had to be blessed first felt like a nag.

Once you get it going, it works well as a web browsing device. The few sites I visited were surprisingly compatible, and it's clear that work has been done to move to HTML5 video by a number of sites.

The upsell feeling kicked in when I attempted to watch a video on MLB.com which is easily viewable on a computer with Flash. MLB have clearly taken the lack of Flash as an upsell point and redirect you to a page to tut the new MLB iPad app, which looks amazing, but it's $14.99.

$14.99? And it's a completely separate sale from the app you might buy for the iPhone. The App Store prices for the iPad have been kicked up a notch, and as you get farther into it the feeling of being a consumer rather than a user is pervasive.

My biggest disappointment is on the networking side, however. I've just recently set up a small Western Digital network drive to serve music and video in the apartment, as you do in the modern media hub (remember that?) sense. The iPad has none of that, though — to get music or video you have to connect it to a computer and put media on it in the old-fashioned way.

I'd pay good money for an app that would allow me to plop my iPhone into the Onkyo dock connected to my receiver, and browse and play music wirelessly from the iTunes server on my NAS. It seems so painfully obvious, and the iPad would be similarly amazing if I could play the video being served throughout my home network.

I also tweeted last night after trying out the MobileMe Gallery app, which allows you to view image galleries that are hosted by MobileMe. It's yet another example of an Apple network failure: the app isn't updated to iPad resolution and so the interface is a blocky mess at 2x. The photos look fine, since MobileMe stores a relatively high resolution, but it just makes me think that Apple's media hub/cloud strategy is half baked, intentionally or not.

I don't really understand how Apple could have all the pieces (media servers, wireless hardware, small wireless devices, etc) and completely miss out on how to link it all together. They're not obtuse, and so you must return to the idea that they are just driving you to consume content sold by Apple.

The final bit of upsell annoyance occurred when we tried to check my wife's email through the Me.com webmail site. MobileMe.com is blocked when you attempt to view it with Safari on the iPhone or iPad: it redirects to a page which encourages you to use apps to view your account. And so the upshot is that you can't really even use an iPad in a household with multiple MobileMe users — which I would imagine is common with the Family Pack scenario. The ultimate upsell: you'll just have to buy another iPad.

Problem: Install OS X Leopard on iMac G4.

I got one of the old lamp-style iMacs for my daughter to play with; I love the design as well, so it's a nice thing to have around. Even though it's rather old, I thought it might run a little better with Leopard installed rather than Tiger, which seemed quite pokey. However, the Leopard installation requirements state that the machine must be a G4/867MHz or faster, and this model is a mere 800MHz. The installer refuses to proceed.

Solution: Install via Firewire Target Mode.

After some research, I thought I could trick it into installing via Target mode, so I hooked it up to my MacBook Pro and duly started the installation. The partition manager demanded that I format the iMac HDD as a GUID partition, which I did, and the install proceeded.

Problem: iMac G4 cannot boot from GUID partition.

So I restart the iMac after the install completed, and it displays the question-mark folder, meaning that it cannot find a bootable disk. I realize that the GUID partition is only usable for booting an Intel Mac. I then retrieve my older Powerbook G4, thinking that will allow me to install to an older Macintosh partition type.

Problem: Powerbook G4 has broken DVD drive.

I put the install disc in, and click-click-click-click it starts up, but fails to mount (and sounds horrible.) This gave me pause, but then I thought, why not put the Macbook Pro into target mode, attach it to the Powerbook, and use its DVD drive to boot the installer from.

Problem: Powerbook G4 has only one Firewire 400 port, and I have no Firewire 800 cables.

Gah! Now what do I do? Wait a minute! Firewire supports daisy chaining, and the imac has 2 Firewire 400 ports.

Solution: Plug Macbook Pro, in target mode, into iMac G4,, and plug iMac G4, in target mode, into Powerbook G4.

Success! The Powerbook G4 sees all the drives, dutifully boots from the Macbook Pro DVD drive, and the installation proceeds, albeit slowly.

The iMac G4 actually runs Leopard quite nicely, in the end. It seems well suited as a kid computer — it's solidly constructed, plays DVDs quite well and the swing arm can be manipulated into different positions for different uses. Now I just need to figure out Simple Finder.

1. You will notice that I am using the pleasant but ubiquitous default Wordpress theme at the moment for this part of the site. I've decided to just go with it for the moment, while I work out a new design for the site. The last one just wasn't working. Trying to keep the site alive has been a long a frustrating endeavor over the last few months — I'm committing new energy to it now and hope to have it fully functional again soon. I'll write up the full story and post it soon, for those few who might be interested.

A truly valuable experience.

2. OK, so I'm late with my wrapup, but others were as well, and I have a pretty good excuse since I immediately upon returning developed excruciating tooth pain that culminated in a root canal yesterday. That sort of killed the buzz of winning the award, for sure.

On with the wrapup...

Talking Points
Two of the most interesting points came up during the How to Inform Design panel, hosted by Nick Finck, Jeffrey Veen, and Kit Seeborg.

Jeffrey is a very engaging speaker, and obviously a born salesman. It's easy to believe in the things he imparts with such enthusiasm. His USDA Hay Net interface example was fun and illuminating, pointing out how to get the user straight to the point of the site — by simply selecting "Have Hay" or "Need Hay".

The part I found more compelling was a flow-chart breakdown of the Blogger site before the recent redesign. Jeffrey explained that the previous flow to get a new user to their first post on a new blog involved some 8-10 steps, and that by cutting this down to a three step process they could eliminate a lot of places where a user would say "screw this" and just fall off. I'd never quite thought of flow in that manner before — usually you dream out a scheme and then it gets amended and extended as people add more and more "musts" to it.

Kit's point about the money trail of a potential site is interesting as well. Figuring out where the client gets their business is a great idea for zeroing in on the most important interface elements in a site.

The independents rule
It was very inspiring to be out among all these people who do pretty much the same things I do, and see so many success stories. It just goes to show that the web is a great tool for those who have ideas, and that you can totally bypass mainstream methods of promotion and distribution. In fact, it was amazing how few people were actually affiliated with larger corporate entities.

Another side of this is the aspect of independent promotion and revenue streams — promotion is so often by viral means or by what was referred to as open-source marketing, where the materials are simply released into the wild and the users do the marketing for you. Revenue streams in a lot of these businesses seem to come from collateral rather than the main product, as in HomeStarRunner getting revenue from t-shirts and DVDs rather than their "main" product, the cartoons.

The meet-up
The best part was putting faces to names, I met (in no particular order) Jeffrey Zeldman, Andy Budd, Dave Shea, the HomeStarRunner crew, the Maxis folks, the MadeInMTL guys, Ryan Sims, Thomas Fulp (Alien Hominid) and countless other people in the business.

I'm looking forward to next year already.

Cloud King wins at SXSW.

Anyway, we're incredibly gratified to be recognized and its definitely a thrill. We owe a huge thank-you to the artists who contribute their work, because we obviously wouldn't have a site without them, and I hope it is working out as well for them as it has for us.

Last night was a good one for putting names to faces as well - it's been fun to meet the people I have heard of before, as well as some that I hadn't, but I'll get into more of that later.

Get to panels early.
If you can manage, get there an hour before. Or sleep in the room. It seems that everyone is going to the same talks, and there's not enough seats allocated, so if you're not on top of it you're going to be standing, or not even able to get in the room.

Hint. Not much about work.

I say this from experience, because right now I'm sitting on the floor outside of Malcolm Gladwell's talk. Due to (ahem) circumstances, I'm not feeling up to standing for long periods, so I'm missing out. I presume he's discussing his book though, so if I pick up a copy I won't miss too much.

Gel caplets rock.
No need to go into details, but I'm loving Advil gel caplets. Indispensable. Definitely a required hotel room item, along with a large bottle of water.

Everybody is shorter than I thought
It's like the web adds a foot or so, like they used to say about television adding ten pounds. For some reason everybody I am finally meeting is much shorter than I imagined. Maybe a large web presence creates the illusion of a large physical presence or something, or maybe it's just tough to extrapolate from headshots.

--------

1. The Zen of CSS
Dave Shea's new book on the CSS Zen Garden came out, and it looks pretty good.

A Tour de Force!

Anyway, both What Lies Beneath and Dead or Alive are featured pretty prominently, accompanied by some some fine and complimentary analysis by Dave. There's a lot of other great work too (obviously). It's well worth picking up for some inspiration.

2. SXSW Interactive
Cloud King has been nominated as a Finalist in the CSS category, and we're going to be there. I'm looking forward to seeing Austin as I have never been, and it will be cool to meet a lot of the old peers in the flesh.

3. Nuclide launches
I've been working on a new site for the Belgian video game company Nuclide for a (long) while now in my spare time, and its finally launched. There are bugs (of course) but it's pretty cool, in (mostly) validating XHTML and utilizing a Flash-based navigation scheme driven by XML. Take a look at Nuclide!

--------

redesign rebuild redirect

The new design is a work in progress. The site is going to be running on WordPress, which is exciting, except that I know nothing about it and so I am left learning an entirely new system (and language, for that matter.)

Still, here's hoping it goes smoothly. Sorry for the bumps along the way.

11.22.04 - Still plugging away. Added a huge pile of redirects to a secret server file to account for the switch to a more sane URL structure. Hopefully old links aren't broken at this point, though I'm sure few people show up here now. Next job: portfolio.

12.23.04 - Woop. Been waaaay too busy to do anything about this lately. Hopefully I'll get it fixed by the new year, but at any rate it is hooked up through the front page now. Still trying to find my way around Wordpress, and I am wondering how to adapt it to do some of the things I want it to do. Anyway, it'll be a step by step process.

--------

It's 3:30 in the morning. Somehow a flight to Ottawa has ended up taking me all night. Right now, there's an annoying medium flat tone being emitted from the PA system; it's fairly loud, although at least not at a pitch to make your teeth hurt, but its giving me an earache nonetheless.

Stranded in Toronto.

OMFG, the pitch of the tone has gone up an octave. If I actually felt like sleeping, I wouldn't be able to anyway.

I was supposed to leave New York on an Air Canada flight at 8:30PM and get into Ottawa around 10:30, which was already a drag after a full, deadline-is-looming kind of day at work. Then the flight to Ottawa gets cancelled and I spend a stressful half hour waiting in line to get rerouted through Toronto, and dash immediately onto the waiting plane.

The plane then immediately taxis out of the gate and shuts down for an hour while we wait to take off.

OK, fine, we finally get going. When we get close to Toronto, two hours later, the flight attendant comes on to inform us that we will have a half hour to clear customs and dash to the waiting flight to Ottawa. Somebody will be waiting at the gate to help us along, supposedly.

So we pour out of the gate and... there's nobody there. Nobody knows what the gate is. A cleaning guy finally tells us that we have to take a shuttle to the other terminal. We get to the other terminal. Where's the gate? Security doors are locked. It appears we have missed the flight. There are about 100 passengers standing around and not a single living Air Canada employee within a mile. Some guy won't shut his yap about his NGO work in Sierra Leone and I think that if this were to stretch on for a week and become Alive, he'd be an early candidate for culling so we wouldn't have to listen to his whiny Canadian accented bullshit anymore, but we wouldn't eat the bastard just to spite him.

After a couple of hours of waiting in line, I've got a boarding pass for 7AM to Ottawa. At this point its 3AM, so it wouldn't be worth it to go to a hotel anyway, even if they would give me a room, except they won't because I booked through United. I could point out that it wasn't United's incompetence that had me sitting on the tarmac for an hour and wandering around looking for my flight with these dopes like we're the crew of the fucking Minnow on the island for the first time, but it's late, I'm exhausted and I don't have the heart to yell at this lady who has to take a metric ton (it's Canada, after all) of shit every day for what is obviously a doomed operation.

I need a drink, but the bar is closed. Damnit.

Regressing to paper.

But wait, you say. What exactly is the problem? CSS offers an easy method of altering all of your style rules as you wish, by simply importing or linking the appropriate file.

Well, not quite.

As everyone knows, backgrounds don't print, unless the user turns on background printing for the site. This turns into a huge deal when combined with some of the advanced techniques we use today, like the various image-replacement techniques for screen reader compatibility and CSS-based rollovers.

But that's no big deal, is it? We simply massage the CSS to give us a clean text-based version of the site. In this way, we can provide a clean and optimized version of the site, to deliver the content most effectively, in theory.

Except, that's not what clients want in a print version.

I've run into this more often than not, lately — the client wants to print the site exactly how it appears on the screen. So, that means that all of my carefully placed background images don't show, which means that the site renders in text-only, or that significant parts are missing.

The problems obviously lie in the browser preferences that turn off printing of background images. To get the site to look the same, you turn on background image printing, except it doesn't always work exactly right, and its a difficult preference to find in a certain market leading browser. Asking the user to do this is rather a tall order.

The problem is compounded if you use the various image replacement techniques. Let's say that for the print version, I have switched the rule for the header tags so that nice clean text shows instead. Now if the user has background printing turned on, they get both.

The solution is obviously regression, or bringing the images that have been moved to the background with CSS back inline in the HTML.

But who are we doing this for? The strange thing is, I get the feeling that it's actually really the client who wants to print the site as it is on the screen. They have just paid you a bunch of money to make a site, and now they want to show their colleagues the site by printing it out on paper.

Obviously there's some sort of disconnect here, since the images won't look as good in print. Even further, it's as if people can't quite operate without having something physical to hold onto, or that clients feel as though they haven't gotten an actual thing for their money, even if in reality most users probably don't care how the site looks on paper, as long as the information is readable.

Or do they? Here's an Ask Metafilter Question that Tim and I posed on the very topic. Turns out the consensus weighs surprisingly toward wanting the site to look the same, even if it looks better and/or cleaner.

This isn't a call to go back to the separate file for a print-friendly version, exactly, but it is definitely an area that needs focus when you are discussing the project initially with a client. At the very least, you can save yourself some headache down the road by figuring out what your client requires in a print version.

Leave my headers alone.

I just wonder what seems so difficult — in visual design, headers are often defined by text size and weight, giving the reader the ability to understand the heirarchy of information at a glance.

Of course, visually, I can set type sizes and so forth with CSS and without any particular tags — using header tags, to me, is to establish the document heirarchy to machines, or also so that browsers that don't understand the styles can visually establish the heirarchy to the client.

So what's with all this talk of keeping them in order, or nesting them, or establish a set of rules to govern the use of them, or a standard of heirarchy, or whatever? Why must we adhere to a set structure that emphasizes anal markup habits where in fact the heirarchy ought to be based on the information that is contained in the documents we are handling?

I think the structure nuts take it too far sometimes, but I guess that's their right. Separating content from layout and structure is an admirable goal, but in the end, the content is the most important thing, and the markup and structure has to be flexible enough to suit any type of document structure we may need it for. You can structure your document any way you like — there's no need to establish a set of arbitrary rules to make everybody else do it the same way.

I'm sure many enterprising people out there have discovered this already, but for those of you who haven't, read on.

Dealing with image thumbnails.

The general approach to building a web gallery is to have a large image on the page and a batch of thumbnails that the user can choose from when they want to view another image.

The problem is that images are not always the same orientation or dimensions. As designers we like things to be neat and tidy, and therefore all the images are ideally arranged in a little grid. Therein lies the problem - if the images are of different dimensions and orientations, how do we keep them neat and tidy?

The easy answer is to make little cropped thumbnails for every image. This takes thought, and work.

The solution that Tim and I started to use on Cloud KIng is to put each image into it's own little grid space. The image is cropped proportionally and centered in the little box. Rollover effects are added to taste.

The code for the thumbnails is really very simple.

First, the HTML:

<a class="thumbnail" href="#" style="background-image:url(path/to/image.gif)"><span>image alt tag</span></a>

and the CSS:

a.thumbnail {display:block;width:80px;height:80px;background-position:center;background-repeat:no-repeat;}
a.thumbnail span {visibility:hidden;}

The anchor tag is set to block and given a border and background color if desired, and the background position and repeat is also set in the main CSS.

The image is then added using inline style. The image alt tag, or title, is enclosed in a span tag which can be hidden for CSS-enabled users.

Here's an example from a recent project with the addition of some JavaScript to swap the images.

The code is much the same as above, with the addition of a hover state for the border of the thumbnail box.

Taking this even further, we can use the hover state to expose the thumbnail alt text that is enclosed in the thumbnail anchor span tag.

Above is a sample of the thumbnails from Cloud King, which expose the image name on hover, with a cute cloud PNG background.

Pretty simple stuff, but it proves useful for arranging thumbnails, and could easily be automated using a CMS. It's not a perfect solution, but I've found it handy in a few situations now.

A surprising amount of people photograph their dachshunds as a faux hot dog.