Skip to: Navigation | Content | Sidebar | Footer


Full Archives

Redesign Technical Notes

May 30

Next in the series of follow-ups to this past week's redesign is a look at some of the technical changes for the new mezzoblue.

Meta Data

Meta data is now showing up in the right-hand sidebar on pages where it feels appropriate. Each individual article has a special yellow "Context" box that informs the reader of what they're looking at in plain English. These auto-generated pseudo-summaries are mainly for the sake of those coming in off Google, but I'll be interested in seeing how valuable I find them myself when I hunt back through the archives for older entries. (I have to use this site too, after all).

The extended-sidebar concept is continued on monthly archive pages, where the space is used to host the calendar, entry list, and previous month listing. The old structure saw them cramped into the content area as a kludge and left unresolved for entirely too long. Problem now solved, and the new category archives continue the paradigm. I've been diligently categorizing each article for a year and a half; finally there's a front end for viewing past articles this way.

Comments

Of course we've been over the new comment highlighting system which has seen some tweaking, and will no doubt continue to improve. The other change to comments on this site involved moving them away from the main article onto their own page. There are still a few technical issues to figure out to make this system work properly; at the moment posting a new comment dumps you back onto the article page and not the comments page as you'd expect, and I'm still working out how to use my standard templating given Movable Type's reliance on .cgi pages for previewing and comment errors. (Shaun Inman and "M. Perakis" have suggested solutions which may lend themselves to this problem.)

But these are details, and this isn't an experiment—I'm choosing to keep a degree of separation between the original article and the comments that go along with it. This is no bandwidth issue, it's about perception and managability. Though I'm not opposed to a gentle shift off-topic provided there's value in the discussion, when a web standards primer aiming to wean absolute beginners off of tables starts bandying about the phrase 'MIME type', we have a problem; one example, but more exist.

This is my way of allowing myself to care less, which means ultimately I'm placing more responsibility in your hands to keep the discussions relevant. If the comment pages become a typical message forum wasteland of inanity they will just go away.

Browser Compatibility

I'll go into the CSS changes in the next article but there are a couple of browser support issues to highlight here. While I tested widely, the fringe cases popped up anyway. Win/IE5.5 renders properly, Win/IE5.0 is a mess. My testing in Opera 7.x checked out, but the menus didn't function. This is an acceptable degradation, but some have pointed out they do work though not as expected. I don't know why I continue to write code that Opera interprets differently than everything else, including IE6, but this is my curse. There should be a solution (indeed, one has been suggested) so a bit more testing should resolve this issue.

And then there are the IE6 problems. The first reared its head after commenters pasted long URIs into their comments. It has since been fixed. overflow: hidden isn't an ideal solution, but it's effective. The second came as a result of my effort to allow the top menu :hovers to function in IE. Since I didn't need the whole IE7 suite for this I grabbed Peter Nederlof's whatever:hover hack and after tying it into the style sheet, didn't need to do anything else to get them working. But it seems the hack needs to parse the entire style sheet on each page load. Given my large CSS files the slowdown is unacceptable so we're back to square one. No menus for IE users.

Content Management

The site is still running Movable Type and I've even upgraded to 3.0. During the redesign process (well before the MT fallout [large page load, may crash browser]) I began a conversion to WordPress. It's way easier to say "me too" after the fact, but the more I use open source the more I want to use open source. (Not to mention the convenience of having the lead developer on my iChat list)

Figuring out my new templates and learning a new templating system at the same time proved to be too much of an uphill battle, so it fell by the wayside. Something has to be done sooner or later though, all's not well. I'm unable to re-build archives past a certain point due to errors, and going back too far in the archives leads to breakage in both Radar and Proton thanks to an inability to propogate the new structure.

Whether this is a template error, a Movable Type error, a server error, or whatever else, I simply don't know. Either I figure it out, I pay someone to figure it out, or I switch tools. Purely circumstantial: our intranet runs on MySQL (which is fast, I'm told), and the main weblog has upwards of 1100 posts. Posting a new comment takes 30 seconds to a minute, but other weblogs run by the same installation of MT are far quicker. It appears MT has growth issues, perhaps the 330 posts and 4750+ comments on this site are causing it to choke. Perhaps not. I simply don't know.

Next up: CSS features, functionality, and tweaks.

Permalink › | 31 comments

Reply Highlighting

May 25

Replies to mezzoblue's redesign have been, well, let's say 'polarizing'. The various issues that have been raised will be analyzed in more depth over the coming week or two. First on the list is the new 'Reply Legend' on the comments pages since it's bound to be the most controversial.

There are two issues here, the technical implementation, and the social aspect. Let's tackle the easier of the two first: how I did it.

There's no XFN going on—although if I'd figured out a way that would have been a neat option, and now that it has been suggested someone should—all that's happening is that a PHP regular expression is being run against the URI a commenter leaves behind.

Low-tech, insecure, but hopefully managable. The easy way to game this system is to leave someone else's URI instead of your own, but I'm counting on the magic of PageRank and the desire for overflow links to keep everyone honest. There's absolutely nothing now (short of TypeKey) stopping one from spoofing another on anyone's site, but the payoff is a tiny little bit more in this case. Obviously this won't scale, and will probably break sooner than I'd expect, but for now it works.

The first thing I did was build an array of domains. This is where there's marked room for improvement, but since I just wanted something that would work, I literally dropped a big list options into an array. This is how the Zen Garden runs, this is how the 'Recommending' booklist on this site runs, and now this is how the Reply highlighting runs. When you've got a good thing...

<?
$item[0] = "1976design.com";
$item[1] = "andybudd.com";
$item[2] = "7nights.com";
$item[3] = "wholelottanothing.org";
$item[4] = "cssvault.com";
$item[5] = "designbyfire.com";

And so on. The next step was to set a final count of how many are in the list, something I should be able to do automatically, but don't:

$itemCount = 6;

And finally the PHP that does the search and replace looks like this:

function importantVoice($authorURL) {
 global $itemCount, $item;
 if ($authorURL == "http://www.mezzoblue.com/") {
  return " dave";
 }
 for ($i = 1; $i < $itemCount; $i++) {
  if (eregi(($item[$i]), $authorURL)) {
   if ($authorURL != "") return " voce";
  }
 }
 if ($authorURL == "http://none/") {
  return " troll";
 }
 if ($authorURL == "") {
  return " anon";
 }
}
?>

First it checks if the comment author is me. If so, it returns the value " dave". Next it checks for the list of 'Important Voices' and if there's a match, returns " voce". The troll/off-topic check basically won't work unless I manually change a commenter's URI in MT, so I don't expect to use it a lot, but I want to see if it will prove useful. Finally, if there is no URI, the comment is considered semi-anonymous and " anon" is returned.

If you strip out the comments interspersed above and drop all code between <? and ?> into a PHP file, you've got the basic setup. The last step is to tie it in. When the container for each comment is being generated, the function above is passed the author's URI as an argument:

<div class="reply<?=
 importantVoice("<$MTCommentURL$>");
?>">

In this case, Movable Type generates the URI and then importantVoice parses it. The final output is a <div> with two classes:

<div class="reply dave">

From there it's easy to hook my CSS into the <div> and style it as-needed.

Now that we have the technical stuff down, let's move on to the other issue, the social aspect. The problem that this is solving is that I have less and less time to keep up with the comments on this site. When any new post easily gathers 30 or 40 within a few days, the options are threefold. First, disable all comments. Second, play the absentee landlord and let the comments take on a life of their own. Third, do something to make cruising the list more fun.

I have my own opinions on why the first and second aren't a good idea, so I've decided to try something different. My choices of those who I often read manifest themselves in various ways; my newsreader, for example, and the list of links on the right-hand side of many pages on this site (not all pages anymore, just most). In the same way, I'd like to see my comments pages filtered a bit by who I find stimulating.

I'm still resolving how the highlighting should work. I began the idea by listing only seven or eight commenters I felt to be 'experts' in their chosen specialty, but the list grew to about 20 by the time I launched. So now there's a taxonomy problem, since the distinction between 'important' and 'regular' comments is off-putting. I don't mean to create a hierarchy, I just still not sure what to call each. Further, I didn't have any system at all for determining those 20, so from now on the list of who is marked in orange is pulled from the link list in the right-hand column of this site's home page. The list is public, so you know ahead of time who's orange, and now I use the same criteria for building both lists. What are those criteria? Probably the same as you use to build your own blogroll or newsreader feed list or whatever you choose.

Note that domains have to match too, so for example when a certain Mr. Clark comments and leaves his joeclark.org domain, the highlighting doesn't pick it up because it expects his fawny.org domain. (Of course, now the opposite is true, since I'll assume that's what he'll use for future comments.)

Semi-Anonymous comments are, as most have noticed, comments that are made without a URI attached. I don't mean to imply that those without their own sites have less worthwhile things to say, but at the same time, most issues discussed on this site are about building for the web. If you're here to discuss that, I don't understand why you wouldn't have a site of your own. It's partially a credibility issue, but partially an accountability issue too—it's easier to be snide when you're hiding behind a facade of anonymity.

I don't really intend to turn everything inside-out, so I'll leave it at this. I don't expect everyone to love this system, and I may end up completely overhauling it, but for now it's something new to play with. Good? Bad? We'll certainly find out.


Addendum: I've already decided to change the way it works, mainly in response to the feedback I've been receiving. Instead of auto-highlighting a pre-select list of commenters, I've changed it so that only those individual comments I choose to highlight will receive the yellow box. More work for me, so don't expect much yellow. We'll see how this goes.

Permalink › | 80 comments

mezzoblue v4

May 24

If you've been on this site any time over the last couple of days, you might have noticed a small sign at the top saying that mezzoblue was getting a minor structural upgrade, and things would be back to normal today. That was a lie and a half.

In fact the structural upgrade was major, and things won't be going back to normal. mezzoblue redesign №4, dubbed 'Proton' is here to stay.

Some of you will love it, some of you will hate it. Over time those with strong feelings for the old design (known as 'Radar' from now on) will come to appreciate the new one for what it is. Thanks to the magic of Cascading Style Sheets, Radar isn't going anywhere, so feel free to continue using it as your default view of this site.

What's new in Proton? A ton. The design itself came to be on my metaphorical drawing board in November of 2003. It was meant to launch early in the new year, so take that as indicative of how busy the intervening 5 months were. Of course the scope creep didn't help either, as I decided to peg more and more of the problems I was aware of on the old site. This involved re-thinking the way my post/comments system works, re-doing the 'Recommending' list, re-structuring my heading order (most headers were bumped up two spots, ie. old <h3>s are now [more appropriately] <h1>s), and much more.

For now, rest assured that there are all sorts of new bits waiting for you to discover; things like the obvious menu treatment, the not-so-obvious tab treatment, the liquid layout treatment, and plenty more I'll write up in the coming months.

This is far from the end of the process though. I still have to figure out what to do with those 'Latest Projects' links, which have lived long past their prime. I need to do something about the big link list on the home page (and many interior pages). The comment preview pages are still stuck on Radar until I figure out how to get Movable Type's .cgi-extension files to run PHP. I have a lot more general tinkering to do, but such is the nature of a site like this—it's never really 'done', just 'good enough for now'.

Proton lives. And with that, I welcome feedback and complaints. How do you like the new look?

Permalink › | 188 comments

What is RSS/XML/Atom/Syndication?

May 19

The little orange buttons that are starting to litter the web have no doubt caused mass confusion. What are they good for? Why are they there? And why don't they work? While I and others are starting to look into suggestions for developers to alleviate this design flaw, I thought I'd take a minute to talk about what this technology potentially means to you, the user. (If you already know what RSS stands for, this article won't tell you anything new, but feel free to reference when you need to explain syndication.)

RSS/XML/Atom are technologies, but syndication is a process. RSS and Atom are two flavours of what is more or less the same thing: a 'feed' which is a wrapper for pieces of regularly and sequentially-updated content, be they news articles, weblog posts, a series of photographs, and more. For the purposes of this article, consider the terms interchangable. XML is the base technology both are built on, but that's almost totally irrelevant; the orange buttons are mislabelled, and should read 'RSS' or 'Atom' instead. Strange, but true.

Syndication is the process of using RSS/Atom for automated updates, another way of getting the information you want. You no doubt have a list of web sites you browse daily for updates, whether they're stored in your bookmarks or your head. If you find yourself loading 20 or 30 sites a day, and you notice if a few stop updating as frequently, you'll inevitably stop checking them.

What if there were instead some way to have your list of bookmarks notify you when the sites you read have been updated? You wouldn't waste time checking those that haven't. Instead of loading 30 sites a day, you might only need to load 13. Cutting your time in half would enable you to start monitoring more sites, so for the same amount of time you originally invested in checking each site manually, you may just end up end up following twice as many.

Syndication provides the tools to do this. A news reader, or aggregator as they're also known, is a program or a web site that automatically checks your list of bookmarks (which you only have to set up once) and lets you know what's new on each site in your list.

It goes beyond simple updates though—the news reader works by pulling in the feeds of your various bookmarks. As we covered above, a feed is a wrapper for content items, so on top of notification, a feed delivers the content that has been updated itself. You may choose to read the new content in the news reader, or you may choose to leave the reader and visit the site. Some authors will only provide summaries of the content, forcing you to visit anyway.

Newsreader screenshot with labels

As an analogy, the news reader acts like a customizable newspaper. You can pull a variety of content from a growing number of sources into one place, to be read however you choose. Sources like major news media outlets (BBC, Reuters, Washington Post) to non-news content providers (Apple's iTunes Music Store, the Government of Canada, USGS' World Earthquake updates) to smaller independent voices (BoingBoing, VanEats, Sidesh0w). The only stipulation is that the source must provide a feed; many are.

Beyond day to day use, a particularly nice feature is that you're able to take your news with you on the go. Have your newsreader grab the latest feeds before you rush to the airport, then check out of the in-flight movie to catch up on the most recent goings-on. Of course the author has to be providing full content for this to work, and some only provide summaries—it's about 50/50. Leave the summaries unread, and you can come back to them later when you're connected again. In this regard, news readers also function like temporary bookmarks. Unread items will stay flagged until you're near a connection or have more time to read them. No more forgetting what it was you wanted to check up on your lunch break, it'll be there waiting for you.

If this introduction has whet your appetite, the next step is to grab a news reader and start playing. Popular at the moment are FeedDemon for Windows, NetNewsWire for Mac OS X, and Bloglines which is a platform-neutral, web-based news reader.

If you're interested in more information about the mechanics of it, much more technical overviews are available, complete with RSS/Atom specs to help you implement them in your own work if you so choose. And of course, as syndication spreads across the net, more and more choices of content are available. Soon you'll have a whole new problem on your hands: how many feeds are too many?

Permalink › | 36 comments

Tables? Oh, the horror!

May 15

Apparently there remains some confusion after my Thursday-afternoon rumination on the potential use of tables, as opposed to pure CSS-based layouts. I'm going to share some of my experience to help clear this up.

Some of the comments on this site were discouraging, it sounds like the original piece was interpreted to advocate laziness. Some of the replies on other sites perpetuated this interpretation, so once more, tables should be considered only with the proper education to use them responsibly. This means attention to accessibility, as well as offloading all other presentational attributes to the CSS, leaving the simplest of layout-structural tables.

The point I was clear to make was that I am not talking about dropping CSS and going back to 1997-era coding techniques. Standards-based coding practices aren't so fragile that a small injection of common sense and/or objective analysis will excuse full-scale dismissal, so let's not pretend like the world is going to use this discussion as a springboard to revert; chances are the people who would are doing so anyway.

I am suggesting merely that in some cases, it might make sense to explore a layout table. Again, I do not mean three-level-deep nested tables rife with the required colspans. I mean a light table with two or three columns to keep a layout together, sans all other presentational markup. This is what I have in mind:

<table cellspacing="0">
 <tr>
  <td>
    (Column One)
  </td>
  <td>
   (Column Two)
  </td>
  <td>
   (Column Three)
  </td>
 </tr>
</table>

The cellspacing remains simply because the CSS equivalent (margin: 0 applied to <td>s er, that is, border-spacing is what I was looking for here [thanks to those who clarified]) isn't well supported. The <tr> remains merely because it's still required. The important piece of this table is that three columns keep the layout together, as expected.

Why am I saying this might be preferable over floats or absolute positioning? First of all, the pitfall of absolute positioning is that placing a footer below the three columns is near impossible. Creating this layout using absolute positioning causes a reliance on one of the columns to be longer than the others; given a dynamic site, if you build this reliance in to your work you'll get bitten by it sooner or later. Pages will start looking funny when a column grows longer than intended, as the content area grows shorter.

Floats, then, are the more reliable way to achieve your three columns. Except that they have their own glitches too. The most popular browser on earth, IE6, has spectacularly inconvenient error-handling in this regard. Anyone who has built more than one or two sites with floats knows what I'm talking about: a placed element too wide for its container, be it an <img> or a <pre>-wrapped chunk of text, will cause the parent element to grow to contain it. Other browsers let the content overflow to no ill effect other than a bit of overlapping, but because the parent element resizes in IE, the column gets bumped all the way below the others and you have a situation no one is happy with.

I'm hearing contention against the claim that proper CSS design is hard. Okay, fair enough, learning the basics isn't terribly difficult. Learning the basics well so that you know how to keep the above scenarios from happening is a different matter, and requires browser-specific tricks that go against the nature of what CSS is meant for. Anyone can build a fixed-pixel layout in CSS with known font sizes, that's easy stuff. Build me a liquid three column layout that allows for text scaling in Internet Explorer, and watch how easy it is to break by increasing your font size. Especially once the code leaves your hands. This is where it gets hard, folks.

Which brings me to my next point—working with other team members and clients. I mentioned this on Thursday, but it bears repeating. There are many different working conditions out there which don't match your own. Assuming because you know how to maintain your layout integrity with CSS that everyone else can is a leap of faith, or the by-product of a cozy environment that doesn't test your endurance.

I've worked in settings both where I've dictated all markup start to finish, and where I've had to rely on others to continue producing valid, well-formed, structural markup. The first scenario makes it dead simple to assure a site's continued abstraction of presentation, the second does not. Even if you have the most responsive team members, you're still limited to what they know. Like it or not, many people look at markup from a presentational standpoint, ie. "this form element needs to sit below this label, insert <br /> here." Either you have to clean this up after them, or more likely, you've moved on to other projects by this point and don't have the time to.

A little bit of presentational markup isn't going to hurt things, and probably, alone, isn't a justification for a structural table. What is is how likely the chances are that anyone not-you is going to trigger something like the IE float problem mentioned above. Anecdote: I built a site earlier this year that worked fine with my sample data. When passed off to the client for implementation, breakage occured. The culprit turned out to be a small piece of non-semantic markup that was used in various spots over years of accumulated content. I was not contracted to clean up the content; the client had no desire to fix years worth of material. The seemingly easiest fix was to throw the page into a structural table. I knew a CSS hack or two to work around this, and we didn't end up using it after all; but would everyone?

Let's also not forget that we're talking amongst people who have spent a lot of time working with this stuff, and that there are those who haven't. For a beginner transitioning to CSS-based design, a few iterations of table layouts that move more and more presentation to the CSS is one of the better ways to learn. Even once the intricacies of positioning are fully understood, it takes time to become comfortable with them. Let's cut these folks some slack; their continued use of a table is just fine if they're continuing their education so one day they don't have to.

And finally, let's talk semantics. I hate discussing semantics, personal interpretations (unavoidably) shade the conversations. But let's do it anyway. This is the point that's going to get me into the most trouble because everyone is going to have a different take, but I'm going to throw it out there. Using a table for tabular data is universally accepted as being proper use of a table. Which carries with it the assumption that the table is structural and not presentational in that case. Fair enough.

But if tabular data is structurally tabular, then what inherently (besides a fear of the past) makes a two- or three-column layout structurally non-tabular? Two columns invariably end up in a pair of <div>s, or a pair of <td>s. What makes the former structural, but the latter any less so? A pair of <div>s implies two distinct, separated blocks of structure; a pair of <td>s does the same, and carries with it the further implication that the blocks are structurally side-by-side columns. Two columns may be presentational to some, but they may be structural to others.

I'm not committed to the notion, but it's something to think about. There are those who would advocate multiple nested lists (scroll down to Tantek's technique) as a structural replacement for the <div>s we use today, so if there are two ways to look at semantic representation of data, there are just as easily three.

Anyway, at the risk of sparking a howl over the last point and ignoring what went before it, I'll finish by saying this is based on the sum of my experiences in real-world situations. There are many factors at play here, and boiling this discussion down to "tables bad, CSS good" is counter-productive at best.

I'll end with the contentious quote of the day, coming from Joe Clark:

If smart, informed people are using b or i, its because they have made smart, informed decisions to do so. Were not slacking off; were not making a mistake; were not harming the grand ideals of semantics or accessibility. Were not doing anything but using b or i.

Different argument, misappropriated quote, but similar sentiment. Semantics only get you so far; at some point, you have to compromise and just use the tools you have at your disposal.

Permalink › | 53 comments

Colour Schemes

May 14

A designer's 'style' is made up of a number of different factors, though colour plays a large role. Everyone has their own method of coming up with a good colour scheme, which will inevitably affect the results.

Technical

A 'technical' method of colour-selection involves choosing one or two dominant colours from the colour wheel, to be used with a small set of complementary colours. Basic colour theory concepts like split complementary and triadic colour schemes offer a wide range of variation, particularly when you start throwing in shades, tints, and saturation adjustments.

Technical colour scheme samples

Pro: An easy way to start with good, workable colour. Con: being too technical can lead to dull and uninspired colour choice.

Matching

Matching involves starting with an image or an object (usually a photograph) and picking colours from within to generate a colour scheme. Boxes and Arrows ran a great article a while ago about selecting colours from nature.

Matching colour scheme samples

Pro: Naturalistic, familiar-feeling colour schemes that appeal. Con: it's easy to select the wrong colours from a photo.

Intuition

Probably my most frequently-used method. I begin with a blank canvas and fill it with whatever colours seem appropriate. Naturally my mind computes the corresponding compliementary and similar colours on the fly, but now and then I'll ignore solid colour theory just to see where it gets me. Hence this site's colour scheme, among others.

Pro: Fresh and surprising colour schemes. Con: dangerous without a solid knowledge of colour theory. Dangerous even with.

These are a few of my own methods, and what influences my design sensibility. Others will differ, of course. Tell me about your own methods, comments are open.

Permalink › | 44 comments

Gasp! Tables!

May 13

Andy Budd, a name some of you will recognize as a proponent of CSS-based design, has decided to take a long, hard objective look at the arguments made in favor of CSS.

I'm sure we've all found ourselves writing fairly complicated CSS to do something that would be trivial using tables. Take form styling for example. It's possible to lay out even very tricky forms using tables in just a few minutes. You can achieve similar results by floating elements with CSS, but it's a lot more involved

The rest of Andy's points are lucid, level-headed, and enforce something that you may or may not personally believe: CSS-based design under all circumstances, while a goal to strive for, is hard. Using a table for layout may at times be the best way to get the job done.

For example, it's (relatively) easy to keep a CSS-based design functioning on a simple 10 page, custom-designed site; you're designing for rigid and known conditions. There's almost never a need to fall back to tables under those circumstances.

But it's a whole new level to keep a large 500 page CMS-driven site functioning, which could potentially see large images dropped in the content area (thus breaking your floats), or multiple hands involved in creating markup (including those that are markup-illiterate), or any number of other conditions beyond your direct control. More and more of us are learning this from direct experience, myself included. Just because you know how to code without a table in sight doesn't mean the rest of the stakeholders in your project will.

None of this is permission to go wild. One simple table stripped of presentational markup should almost always suffice in these circumstances. And please, leave the multiple nested tables in 1999.

But claiming structural tables are wrong under any and all circumstances is too much of an ideal at this moment in time. The practical reality of today's web is that learning curves and browser support can sometimes raise the bar too high for full-out CSS design in certain scenarios. A designer using proper discretion who pays special attention to accessibility, essentially a designer who is educated and capable of using tables well, may consider the layout table a still-valuable tool.

Reactions will be mixed. Vive la difference!

Update: The thinking behind this post has been expanded on and clarified here.

Permalink › | 46 comments

Self Promotion Day

May 10

A whole lot has been busting through the pipeline lately, to the point where I can start talking about what I've been working on recently. Here's a bit of a roundup to get some of this out there. (If you can't get away with horn-blowing like this on a Monday, then honestly, when can you?)

First, the Blogger thing . Yep, Blogger.com just upgraded to a shiny new Adaptive Path/StopDesign collaboration of a site, and wow is it hot. As you'd expect. I played a tiny little role in the news too (making this photo not as entirely ironic as it looks, though still somewhat so), with my contribution of a new Blogger default template I call 'Snapshot'. Since we're still not sure whether we can link to these or how much we can promote them, here's a sample screenshot . As Steven Garrity has already noted , Snapshot has a personality of its own. This was something I debated during the design process, as a 'template' generally should be just that—generic. Doug Bowman (the project coordinator from my standpoint) and I went back and forth a bit, but we concluded that a bit of personality in this case was a good thing. If a user is savvy, he or she can update the header graphic themself. If they're not, they have 23 other templates to choose from. The 'We' in the paragraphs above, of course, refers to my cohorts Doug , Dan , Dan , Jeffrey , and Todd . A heck of a team, and a heck of a lot of good work from these guys (and me) await new and existing users of Blogger. I'll save for others any further reflection on what the new, simplified signup process means for web users, but suffice it to say it's all good stuff. Second, I'd like to point out that Web Essentials '04 is happening from 30 Sept – 1 Oct 2004 in Sydney, Australia. I'll be there to speak, along with the afore-mentioned Doug Bowman , and the inimitable Joe Clark , alongside a handful of local Australian presenters (including John Allsopp of WestCiv and Russ Weakley of MaxDesign ). I'm sure I can speak for the three of us non-Australians when I say we're absolutely thrilled to be a part of what's shaping up to be an amazing two-day event. WE04 is open for early bird registration . Get your name in before July 1st, and you save a hundred bucks per person. Also keep in mind that the Australian dollar is on par with the Canadian dollar, making it much cheaper for those in the US and UK. It might be worth a look no matter where you live, I hear Australia in the springtime is beautiful. Third, Bright Creative is now live. This is the premiere launch of my new design studio's site, replacing the old placeholder. Though I've been doing business under the name since the beginning of the year, working for clients has kept me busy enough that the business site fell off my radar immediately. The placeholder graphic had promised as early as January the launch would be a distant mid-2004. Optimistically it should have been up in early March. Realistically it ended up happening in May, right on target. Where's the blue? Stowed away in the box of crayons for now. Bright Creative indicates a new direction for my work, and a new beginning for my life. Old habits die hard, but they can be put to rest with effort. Bright Creative is red and cream with grey and white highlights. Header type is set in Gill Sans, with Trebuchet MS for body copy. Photos rich in texture were used for section headers to add a tactile feel, heavy lines and solid blocks of colour were used to visually distinguish background from foreground. Line continuation effects were used to place the header in relation to the background stripes, and a jarring discontinuation was used to affect the home page in a somewhat disconcerting, but intentional variation from the internal pages. A light touch of Flash was applied to the home page for that extra oomph. Flash is a nice tool for the toolbox if done right. Technical notes: should be validating XHTML Strict, with a CSS-based layout. Tested across the major browsers, but rendering glitches are inevitable in some of the fringe browsers at the moment. A migraine knocked me out of commission on the weekend, so Mac IE5 users will have to ignore the wierdness, which will be attended to in short order. There's another factor in the continuing quest for standards-based design that hasn't been touched on: wellness and mood. Bright Creative: Brilliant Design Solutions. Come see what 'we' do. And finally, the company I spend part of my week with during non-Bright hours has relaunched a site of their own. Navarik Corp. , here in Vancouver, is a software company building solutions for the shipping industry. They're an open source shop using all the coolest acronyms (PHP, MySQL, XML, MT) for large clients in a focussed industry, one that I know next to nothing about yet. I won't generally be able to talk about the work I'm doing with them. Suffice it to say some very large companies that you have heard of are starting to get standards-based solutions for their internal systems, and more will do so. It's exciting work, but locked heavily under NDA's. What I can say is that the company site has been coalescing for the past few months after a slow start late last year, and thanks to some extra effort by the staff and myself we've launched what we're calling a starting point. Over the next few months more content will be added through the Movable Type posting system we've built (Movable Type also runs all the internal weblogs that form the Navarik intranet) and more focus will be given to telling the story of what the company is all about. Team member Derek Miller, a local copywriter and editor, has written up the process in more detail. His notes are a good case study of a company that understands why web standards are important, and how said company has put them into practice. Building a standards-compliant site, Part 1 , Part 2 , Part 3 . Good reading. And that concludes this Monday update. Hope your weekend was better than mine, but I also hope your week has started as well as mine did. ]]>

Permalink › | no comments

One Year

May 7

One year ago today:

With a few caveats and a bit of apprehension, I present to you my latest pet project: The CSS Zen Garden.

Since I just about missed it (I could have sworn it was May 8th, 2003, but my archives don't lie) I don't have anything much planned to mark the occasion. So lacking that, I'll take you through some of my design process when I was building 'Tranquille', the default template.

Zen Garden title

Everything but the type in 'Tranquille' was hand-painted in Photoshop, similar to the process I used for design #013, 'Coastal Breeze'. (The images for the latter were done years ago for another long-dead site of mine)

It began on a sketchpad, which I don't have anymore unfortunately. The title text was important to me, since I was interested in a calligraphic, natural brush stroke look. A paintbrush, some india ink, and an hour spent in concentration determined that I just can't do calligraphy. Lesson learned.

Instead I ended up using some random font I had on hand that seemed to work, 'Calligraphic 421' from Bitstream. I'd probably use a different choice if I were doing it again, but that's just changing tastes for you.

Example Kanji

I spent a bit of time researching the Kanji in the 'scroll' that hangs down from the top left corner. Rather than pull a 'Westerner' and use a bunch of random characters that would quickly prove my ignorance, I tried to find something with meaning, however tenuous.

The symbols I chose represent, roughly, 'A beginning', 'Complete' or 'Whole', and 'Skill'. I suppose I wanted to say something like 'We're trying something new' or similar, and maybe that even works in some contexts. But if it does it's more luck than anything.

Pagoda

The pagoda in the top right was also researched, though not heavily. I flipped through Google image search for some inspiration, and ended up finding exactly what I was looking for, completely coincidentally, in a Mozilla Lizard illustration on DMOZ. Somehow that seems appropriate. I traced the shapes with the pen tool in Photoshop and then applied some texture and shading to tie it into the Tranquille style. Stealing? Please. Let's call it 'creative misappropriation'.

Tree: first draft

Remember the project in grade school that had you dump some india ink onto a sheet of white paper, then blow it with a drinking straw to create a black tree-like shape, and finally paste on crumpled pieces of tissue paper as 'blossoms'?

The tree in the bottom right corner grew out of fond memories of that project. As you can see from the above example, it had to go through a few revisions to start looking right. The simple, solid tree above just didn't cut it, obviously. So back to my Photoshop painting techniques to flesh it out.

Tree: working drafts

As you can see, the process involves sketching a rough outline with simple colours, then building up layered detail over top. There are many different ways to achieve this, involving burns and dodges and colour/level/saturation adjustment layers.

My preference is to build every new highlight/shadow/shape/whatever on its own layer, so that I can adjust later without affecting anything else. This leads to plenty of layers of course, so the new nested layer folders in Photoshop CS are a welcome addition. (for an extreme example, Coastal Breeze ended up having well over 300 layers by the time it was done)

So there you go, Tranquille in a nutshell. Happy first year, baby.

Permalink › | 50 comments

Javascript Bonsai, Conclusion

May 5

What have we learned in the last 24 hours? When you've got a good thing going, don't tinker with it.

My initial reaction to hearing Rares' proposal was an immediate 'no way': it's too late in the game to start thinking about changing the rules. I was, however, curious enough to wish to see a proof-of-concept, so a big thank you to Rares for taking the time to build the beautiful demo. (which, if you feel like tinkering a bit more Rares, should be added to the Garden-proper sans script)

My feelings still leaned towards 'no' for all the reasons I summarized yesterday, and some more that I didn't (which were adequately covered in the comments). But in the interest of progress, I was curious to see what the consensus was. And most felt the same as I did.

Do I think the idea has merit? Of course, otherwise I wouldn't have posted it. Do I think there's some good opportunity for experimentation of separation of behaviour and structure? No doubt. But it just doesn't fit with what we're doing now.

I still get suggestions for improvements over the existing Garden. A lot of them are good ideas. Many of them are incremental, although some could be revolutionary if they were done right. I'll keep advocating anyone who has a spark of an idea to run with it and see where it goes; I don't discourage anyone from creating a similar project. But changing our established goals for the Garden obviously isn't a good idea now.

Oh, and I did delete quite a few comments—don't take it personally, some were valid, just off-topic; hence the warning. I'm playing with methods of making the comments on this site a little more relevant. More on that later.

Permalink › | no comments

Javascript Bonsai Tree

May 4

I had an interesting question put to me the other week: what about making use of the null <script> element in the Zen Garden's markup (so placed to avoid the flash of unstyled content IE bug) and open that up for submission as well?

The idea goes like this: separating presentation from structure is a good thing, and makes for better accessiblity (and all the other benefits of standards-based code, of course). Taking this separation a step further, and filtering out the behaviour as well should surely be a step in the right direction.

Peter-Paul Koch advocated just this in a recent Digital Web article that details the process, a practice I find myself compelled to. If it's important to separate the style layer from the structure layer, it stands to reason that the same separation applies to the behaviour layer.

So I think there's merit in the idea itself, and after I pressed, Rares Portan (the asker of the original question) put together this demo of how it works and what it can do. Since the behaviour is truly separated, you can see that it still works with strange results by applying it to some of the other existing designs.

Adding this extra feature to the Garden is dead simple. Administering it is a bit trickier—there are no automated tools to validate Javascript, and my knowledge of the standard DOM isn't nearly solid enough for me to start making judgement calls. Should adding a design with script enhancement put the design on the same level as existing (and future) designs sans-script, or should they be featured separately?

But the main problem isn't really administration. It's focus: this changes the scope of a pretty well-established project. The Zen Garden has a nice and succinct mission statement: to highlight the beauty of CSS design. It worked out well in large part because people didn't know what CSS could do; by now, most are aware of what Javascript is capable of. Are we proving something new with this?

Along the same lines, what new worlds would this open up? The test example adds animation, which is nice, but is that all a bit of scripting will buy us? I know there are applications I can't even think of, but the behaviour layer is usually there to add functionality which is more hidden than visual.

So I'm opening this up for discussion. I'd like to get some reactions, but please note that today's comment thread will be high-level: I'll liberally delete off-topic and useless comments. Thanks, looking forward to the feedback.

Permalink › | 34 comments

Thunderbird 0.6

May 3

While I've been using Thunderbird as a mail client since version 0.2, today's 0.6 release feels less of a toy and more like the first really solid revision.

Installation required the same rename-the-old-one then drag-n-drop-the-new-one that's proving to be a trademark of early software releases from the Mozilla Foundation. It's easy, but not for the masses. We'll see an installer soon, no doubt.

Upon launch, the first thing noticed is the brand new visual theme. Jon Hicks' fabulous Thunderbird icon is a welcome improvement over the old blue flame, and the pinstripe theme is top notch.

Dock with new icon

I'm not convinced the continuity is quite there yet between Firefox and Thunderbird but both updates make for a much more pleasant experience than the old look. Firefox uses small, greyscaled icons that feel vaguely vectorish, while Thunderbird uses larger colour icons that feel more pixellated. I'm not sure if consistency is even a goal, but I can't see what harm it would do.

Visual comparison between Thunderbird and Firefox

The speed improvements are incredible, although I'm not sure they deserve that much credit—switching between folders in my old version (0.4 in this case, I've [unintentionally] skipped the odd-numbered versions) used to lag intolerably. Now it's lightning fast, at least given my few-hundred-messages-per folders.

But a few annoyances remain. The first is most likely due to the new theme, and will be resolved in time—when mail came in that was routed to a non-Inbox folder (thanks to one of my custom filters) the folder's icon would indicate new messages with a little highlight. Also I just discovered recently that when mail was sitting on the server but not yet downloaded, the account's icon would indicate this state with a similar highlight. 0.6 doesn't do either of these, but that's more of a disappointment than a genuine inconvenience. And though they are missing, a welcome new addition is a Mac OS X dock indicator when new email is received. Perfect!

Thunderbird 0.4 vs. 0.6

Addendum: Well, scratch that. Looks like folders containing new messages turn blue, sans icon. Good enough!

SSL warning dialogue

Two of my accounts are SSL-friendly, but the certificate belongs to the hosting service instead of my domain so I'm just 'borrowing'. Thunderbird prompts me with a warning... every time I check my mail. Admittedly, it's usually smart enough to remember if I hit 'OK' during a single session, but as soon as I re-start the client it's back. I wouldn't mind at least being offered the option of never being asked about this again.

Amongst my folders lives a special top-level folder called 'Templates' which I will never use, and another called 'Drafts' which I just about never use either. I can't delete this. That annoys me. And why aren't 'Junk' and 'Trash' together in a collapsible grouping? I want all this is because vertical space is at a premium given my folder hierarchy, and I have three email accounts set up which all compound the problem.

But that's a surprisingly small list of annoyances for pre-release software. The improved visuals are no doubt strongly influencing my impression of the program, but then again I sort of base a career off that possibility. I'm a happy Thunderbird user, and I continue to become happier with each new release.

Permalink › | no comments