Archive for May, 2010

Redesigns Pending!

Wednesday, May 19th, 2010

Wow, this design is getting a bit musty. I coded it up sometime last year, probably more than nine months ago. That was before I’d really fallen into typography, so almost every scrap of text on this site is rather… default.

You know how redesigns go. Look forward to my newest iteration in about a year.

I’m also redesigning the website for The Embroidery House. Admittedly, it’s a bit crappy, right now, and somewhat unfinished.
The site was built on a set of styles and structures I built back in the early parts of 2009, when I had no clue what I was doing. I had managed to improve a few pieces of it, but it’s still large and bloated and clunky.

Layout aside, I realized the site also lacked any sort of real design philosophy—for example, keeping links out of the way by creating bands of darker and lighter colours to hide a portion of the page from scanning eyes.
I’m reading more about content strategy, thinking about design principles, and experimenting with ways to collapse much of the page structure into a few different files. I’m going to implement more speedy features, like asynchronous script loading and cache-control headers. I’ve also been meaning to try some @media queries.

I’ve found myself with an emerging frame of mind: Everything needs to be alive. The moment something you create stands still, it’s dead, and will eventually decay. Everything needs constant upkeep, and the eventual overhaul, so that it stays fresh for as long as possible.

There is no such thing as perfection. A beautiful, functional design is only as good as the spirit of the times, and will quickly feel dated. The closer you get to fashion, the easier it is for something to fall behind on the trends. Design is particularly susceptible to this quick aging.

And so: redesign. And redesign, and redesign. Keep everything sparkling, and it’ll remain in the here-and-now.

Zeldman’s’Three-Legged Stool’Approach to Web Standards

Wednesday, May 19th, 2010

Zeldman’s ‘Three-Legged Stool’ Approach to Web Standards


Anyone who’s spent time in web design/development, and who belives in the magical (some would say ‘fairie-induced’) nature of web standards, knows about Jeffrey Zeldman. As one of the original standardistas, he’s given much thought to good content and correct markup.

The three-legged stool approach goes like this: First, you write your content. This is the stuff that the people are coming to your site to visit. Then, you support that content base with the three legs: Use HTML to structurize your content, to differentiate between emphases, titles, lists, paragraphs, and other important indicators of the content’s purpose. Use CSS to target each element and give your page its presentation with colour, depth, shape, layout, and uncannily-fabulous taste. Finally, use JavaScript to add behaviour to the site, so that it reacts dynamically to the needs of its users.

So there’s your introduction. It’s a well-thought-out approach to building your websites in a modular fashion, so that the pieces are easy to update and can be used across pages to reduce bandwidth.
This separation results in websites that are adaptable across many different browsers, platforms, and devices.

And then it gets tricky

There is no such thing as black or white. Using the <em> element to mark up emphases automatically styles it, as with most other elements. Some CSS pseudo-selectors change the page based on user input, as scripts should. JavaScript can very well do anything, which puts developers at risk of using it to set things that should have gone into HTML or CSS.

Where are the lines? Does it matter?

Practical Examples

In the HTML5 Working Group, there’s been a lot of fuss over some of the new elements being thought up. Accordion-style content? Progress bars? Calendar widgets? “Don’t those belong in jQuery?”

In CSS3, there’s also a bit of hubbub over the animations and transformations. When you can effectively code a movie using only CSS and a bit of HTML, are you going too far?

My Own Thoughts

Obviously, it would be snobbish to ban any cross-over between the three pillars. The question, then, becomes “why do we cross?” and “how much can we cross?”

Why use features in an unrelated stool-leg? Why, indeed. Hover effects or the like could be triggered with script, except that takes programming skill. The greatest argument I can think off the top of my head is that CSS is much simpler, in both syntax and complexity. Making simple animation loops is far easier in CSS3 than it is with JavaScript.
As well, those seemingly-action-based animations or hover or transformations may be entirely presentational, so it makes sense to put them in CSS.

When you get right down to it, the question is one of intent: Why is this element doing that thing? “Because it looks pretty.” Or, more realistically, “Because it fulfills a design requirement.”

So how much can we cross the streams? As designers and developers, it really isn’t up to us. Use class changes in your JavaScript to change the styles of elements, and use :hover if it fulfills an objective, but there’s little else to keep in mind. For the working groups, though, it’s an entirely different question.

Really, it comes back to the question of needs and uses. Canvas is a prime example; it’s only a big graphic, which makes it presentational, but it’ll likely hold valuable content, so it’s a main part of your page, but it’s implemented entirely with JavaScript.
And you can do so much with it.


We should be very careful when adding new mixes to the specification, but there’s no reason to ban that outright. Meanwhile, developers need only keep mindful of their reasons for implementing things the way they are.

Steam Punk

Friday, May 14th, 2010

I can’t remember the first time I saw some sort of steam-punk accessory, but I fell in love instantly. There’s something about naked metal adorning stripped-down mechanics that pulls at my geek nature.

There’s one glaring problem, though; I couldn’t find any examples where steam-punk was anything but pure fashion, without any function to speak of.

Show me the Light

Last month, while visiting the uncle of a friend, I tried playing his cello. While acquainting myself with it, I noticed that the strings weren’t tuned by turning pegs directly attached to the bit the string was wrapped around; rather, a cog was in its place, and a sort of thick-threaded screw coming from behind turned the cog to tune the string.

Finally, he could keep the thing in tune, and I found a beautiful example of working steam-punk.


Since then, I’ve been looking around and examining some issues:

  • There are usually better ways : With today’s technology, we very rarely have the chance to use victorian engineering effectively. Steam is out of the question, with electricity virtually everywhere, and mechanical sytems are being replaced by solid-state technologies.
  • Different Aesthetics : Modern-day design tends to reduce everything to its simplest components, which really doesn’t help those big clunky steam-punk attributes.
  • Everything is Manufactured : In today’s world, everything comes ready-built. You can sometimes move a couple parts, but overall the only thing you can do is re-case it. It seems kind of backwards to rip something apart and rebuild it differently if the new build isn’t actually better.

Marriage of Mechanic and Electric

The obvious question, then, is “What can we do to keep the charm of the mechanical while using electricity?”

  • Think Outside the Circuitbox : The most obvious use for steam-punk is in things that require engineering and mechanics. The clock on your wall, your cabinets, your doors, and all manner of appliances have a multitude of mechanical bits.
  • Jewelery : Try not to. Dangling cogs from your ears or wearing vacuum-tube necklaces can be gaudy and rarely works well. Gears are supposed to make things move, so use them for that purpose if you use them in ornamentation.
  • Strip it Down : Forget mechanics for a while. Half the beauty of steam-punk is the display. Strip off as much of the casing as you can; perhaps bolt the pieces together if they fall apart without the case. Never again will your toast get stuck in the toaster.
  • Always look for Opportunites : Keep an eye out for anything which could be solved using gears or widgets. Keep in mind that a solid engineering mind is needed to get everything working as intended.
  • Other Victorian Fashions : Engineering wasn’t all the Victorians were good for! Some of the patents from that era are stupendous: couches and beds and desks, all in one, and combinations of all sorts of household furniture into compact, transformable pieces. As they say, convergence technologies are coming strong!

New Possibilities

So I’m optimistic for the future. I think I’ll find a great number of things that could be made steam-punk, and I’ll eventually find myself with a full complement.