Bringing everything up to date.

First off, we're now a family - my wife and I had a baby girl, born on December 20th, 2005, and that in itself has developed into a full-time job. Anthea is now four months old and a lot of fun to be around. She learns something new every day.

Secondly (and based on the firstly), I've decided to leave the day job and concentrate on freelance work full-time. Now that Daragh is back at work and Anthea is going to daycare, it seemed to make sense to have more flexinility in my schedule. There are professional reasons as well — I want more ownership of my work, and I want to work on smaller, more dynamic projects.

2006 is going to be a big year one way or the other, and I'm pretty excited about it. I'm going to try and get back to blogging as well, and writing more about design. I've updated my portfolio, although this site in general is pretty rudimentary, but it felt better to just get something — anything — up, and then deal with it as I go along.

So if you have any leads for me, let me know. :)

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.

One from column A, one from column B...

The idea is to make specific small rules and then attach them using multiple classes in order to create a sort of menu of options for displaying different elements.

For example:

.small {font-size:10px}
.medium {font-size:12px}
.large {font-size:14px}

.red {color:red}
.green {color:green}
.blue {color:blue}
.white {color:white}

.bg-pink {background:pink}
.bg-blue {background:blue}
.bg-black {background:black}

and then paragraphs defined like so:

<p class="small white bg-black">Here is a paragraph with small white text on a black background.</p>

<p class="medium bg-pink">Here is a paragraph with medium text on a pink background.</p>

<p class="large blue bg-black">Here is a paragraph with large blue text on a black background.<span class="medium white bg-purple">Here is some smaller white text on a purple background enclosed in <span> tags.</span></p>

See the results here.

Obviously, this is pretty simple stuff, and could be taken to a much greater extreme. What I find appealing about the idea is coding the HTML in a fairly human readable fashion, and having a set of attributes ready rather than creating separate cases for each. Since the classes are not assigned contextually, they could also be used across any elements in a page — headers, paragraphs, spans, divs, etc.

Of course, for these examples, it would be simple to create unique styles for each paragraph type. The advantage might come when you are working on a larger project with a variety of different styles, applied across many different elements.

On reflection, it seems liek the equivalent of a back to the land movement, doesn't it?

Not that I'm a big gun.

That said, it's been a while for me.

Feeling neglected?

Work has been incredibly busy, between freelance and that pesky 9–5. I've been involved in a number of things big and small.

Cloud King has been recognized by both the Web Standards Awards and Plastic Pilots. More submissions keep coming in and we're trying to think of new ways to improve the site and extend its usefulness.

Meanwhile, it seems to me that CSS acceptance is coming along rather nicely — clients are certainly more open to it than ever, especially when you show them a few tricks. Validation is tougher though — in a larger development environment it seems hard to find the time, not to mention the fact that the many hands that touch the code inevitably degrades it from the pristine source templates you lovingly crafted.

And I have to mention that I am typing this entry on a new Powerbook G4, which is a work of art.

I'm hoping that the ability to work from bed will give me more time to update the site. :)

In this kind of work I've been taking my modifier classes up higher and higher in the document — for example, a container is wrapped around all of the content, and changing its class causes changes further down the structure to individual modules of code.

Here's a quick example I have whipped up using a trick I recently found for text wrapping. This is more contextually based rather than the trickle-down idea, but it illustrates the general idea.

By viewing the source, you can see that the code for each block is exactly the same:

<div class="modParent">
<h3>I am the Giant Man</h3>
<div class="imgBox"><img src="images/a38.gif" width="90" height="90" alt="" /></div>
<div class="text">
<p>Andre was born Andre Rene Roussimoff in Grenoble, France on May 19, 1946. His parents, Boris and Marian Roussimoff, and four siblings were of average size. Andre, however, suffered from acromegaly, a disease that results in an over abundance of growth hormones. Also known as Giantism, this disease caused Andre's body to continue growing his whole life, and by the time he was 17 he stood 6'7".</p>
<p>Due to his immense stature it seemed inevitable that Andre would excel in the wrestling world. He had just started to make a name for himself in the ring as "Monster Eiffel Tower" or "Monster Roussimoff" when French-Canadian wrestler Edouard Carpentier first laid eyes on him. Carpentier was impressed with Andre's raw talent and decided to bring him to North America. Andre began wrestling under the name Jean Ferre in Canada for Grand Prix Promotions. In a short time Andre went from the undercard to being a headlining name. Inspired by the movie King Kong he acquired the nickname, "The 8th Wonder of the World," which stayed with him for the rest of his career.</p>
<p class="source">Source: <a href="http://www.andrethegiant.com/">http://
www.andrethegiant.com/</a></p>
</div>
</div>

Each block is contained in a div from which it inherits its width. Here's the entire CSS for the page:

body {font-family:tahoma;}
div.content {position:absolute; width:603px; left:50%; margin-left:-250px;border:1px solid #333;}
div.oneCol {background:#fffcf3;float:left;width:200px;}
div.twoCol {background:#fff;float:right;width:400px;
clear:none;}
div.modParent {padding:10px;}
div.modParent h3 {font-size:14px;text-transform:uppercase;
margin-top:0;}
div.modParent div.imgBox {float:left;margin:0 .5em .5em 0;}
div.modParent div.text p {font-size:10px;}
div.modParent div.text p.source {font-size:9px;font-style:italic;}
div.twoCol div.modParent div.text {font-size:10px;font-family:tahoma;float:left;
width:280px}
div.twoCol div.modParent div.text p:first-child {margin-top:0}

As we can see, default styles are targetted at div.modParent, and then the modified contextual styles are more specifically targetted using the parent div.twoCol. The greater specificity of the selector means that the rule takes precedence over the default style.

The wrapping trick is pretty simple — it is achieved by toggling floats on the div surrounding the text blocks. If the style is float:none; the text wraps naturally around the floated image, but if the style is float:left, the text neatly aligns flush left against the margin of the image.

From this it's easy to see how this strategy could be exapnded to provide vastly different looks for different placements of the same HTML. Furthermore, by using "trigger" classes further up the ladder to a page container or even the body, we can change the looks based on any number of variables.