Effectively the design equivalent of a Haiku, Vormator...

...is the ultimate challenge of your creativity: the aim of the book is to give each artist the chance to show his abilities to create a stunning piece with limited means. The contributing artists each get the exact same set of 8 shapes, the Elements. With these shapes they are challenged to create their own unique page for the book, within the limitations provided in the Rulebook. Designers are thus challenged to create a unique piece within a strict set of rules. It all comes down to pure skills and creativity in this competition.

What a very cool idea. Here are the 8 basic shapes:

I recently got a shock the other day. Calgary Transit has decided to update their website, and giv eit something of a face lift. Specifically, the "Schedules" section is being completely changed.

This. Sucks.

Currently, if you want to find out when your next bus comes, you enter in your stop number, route number, and click submit, and you're taken to a page with a list of the next 5 stop times. The stop times are easy to read, and the font size is just the perfect size. It also displays an arrow with how long before the next bus comes. Furthermore, if your next bus comes within 20 minutes there is an icon of a guy walking to the bus. If it comes in 10 minutes, then the iconthere is a running guy. With one quick glance, you can see when your next bus comes. The interface is easy to see, easy to use and easy to consume—especially if you are in a hurry.

Come July 3rd, this will be replaced with an "improved" interface. This interface is so bad that I will be finding out my next bus via telephone from that point forward. What makes it so bad? First of all, the typeface is too hard to read. The type-size is too small, and the color is a tad obnoxious. Second of all, there is no friendly icons to show you, at a glance, where you are in time, in relation to missing your bus. And the final thing, and quite possibly the worst, it tells you what time the bus comes, but according to who? The bus comes at 8:35AM. Is that 8:35 on the CT server? The time set on CT's CEO's watch? An atomic clock? My computers time? Very annoying.

This is a good example of what to do, and what not to do. Sadly, it seems CT is moving backwards.

Update: I could hardly trash-talk the CT website and not actually send them an email stating how I felt (Thanks to my baby who also made a suggestion). If I want the new CT website to be usable, I needed to take responsibility for it, so I did in fact send them an email right after posting this entry. They sent back an email saying that they forwarded my email to the supervisor. With any luck, this story will have a happy ending—I'll keep ya posted.

Badges are popular. What are badges? They are the funky little 80 x 15 graphics. They usually exist to point to RSS feeds, or brag about which blogging software is being used, or how valid a given page is. They are most popularly used by bloggers the world over. So today I ran into a link about how to make HTML + CSS only (no image) W3C validated buttons. I thought, why not apply this to badges?

These badges come in two flavours, absolute and relative. The absolute badges are, erm, absolutely sized, and fit within the 80x15 pixel constraints. The relative positioned badges size up and down with the font. There is no 'semantically-null' markup here either, assuming you agree with the proposition that divs can contain semantic meaning, for instance, when they are used as containers.

When you want to use this, give the left and right hrefs their own classes, and style them as you will (different foreground and background colors, etc.).

I think that my choice of fonts is reasonable, but I would love to hear from mac and linux users as to a good choice for a monospace font.

The buttons

Increase and decrease your text size, to see the difference between absolute and relative

Other badges

The code

<style>
.badge
{
    overflow: hidden;
    margin: 3px;
    border: 1px solid #000;
    padding: 1px;
    
    color: #000;
    background-color: #fff;
    font-family: Silkscreen, "Andale Mono", "Lucida Console", "Courier New", Courier, mono;
    font-weight: bold;
}

.badge a
{
    display: block;
    padding: 2px 3px 1px 3px;
    text-decoration: none;
}

a.badgeLeft
{
    float: left;
    
    margin: 0px;
    margin-right: 3px;
    border: 0px solid #fff;
    border-right-width: 1px;

    color: #000;
    background-color: #fff;
    text-decoration: none;
}

a.badgeRight
{
    color: #fff;
    background-color: #000;
}

.badgeRelative
{
    max-width: 11em;
    font-size: xx-small;
}

.badgeAbsolute
{
    max-width: 80px;
    max-height: 15px;
    
    font-size: 7px;
}
</style>

Usage

Here is the basic markup:

<div class="badge badgeRelative">
     <a class="badgeLeft" href="#">???</a>
     <a class="badgeRight" href="#">DEFAULT</a>
</div>

Depending on what you want, you will want to use the badgeRelative or badgeAbsolute class. This will give you:

Then it is just a case of customizing the left and right classes. The best way to do it is to add a class, and style for it, for instance:

<style>
a.s9y
{
    color: #fff;
    background-color: #986;
}

a.power
{
    color: #000;
    background-color: #FEA;
}
</style>
<div class="badge badgeRelative">
    <a class="badgeLeft s9y" href="#">S9y</a>
     <a class="badgeRight power" href="#">POWERED BY</a>
</div>

Which will give you this:

There ya go. Have fun with the code, it's released to the public domain.

As you can see, I'm updating the look of the website. It's a whole lot better then the last design. Thanks to shell for some awesome help with this. We make a great team.

I call this skin, "Midi Buffer is Full". Amazingly enough.

I went with an absolutely sized site, which is probably going to piss some people off, but with this design, I opted for precision pixel control. Maybe I will revisit it for accessibility later.

I used Colr to choose my initial colorscheme, and then Shell helped with the tweaking, to make it all just right. Colr is a hella cool app. Go check it out.

There is still plenty of work to be done, I have to tweak the styles a bunch more. Watch this space for updates.

Leave me a comment and tell me what you think, or to give me any suggestions.

Update 1: Styling work is going well. The site looks good in Firefox. Looks not so great in Internet Explorer. If you are using IE, just hold your horses, or get a real browser.

Minor Web Zen.

Bwahahahah

Leto II: Infinity.
Reader: Ouch, my head just exploded.

Design Is Kinky (damn right)

Starship Dimentions

Droooool

Boxes and Arrows is an excellent website/magazine. Lots of meaty info in there. I think its a ripe for pluckin! From their "About" section:

Boxes and Arrows is the definitive source for the complex task of bringing architecture and design to the digital landscape. There are various titles and professions associated with this undertaking—information architecture, information design, interaction design, interface design—but when we looked at the work that we were actually doing, we found a “community of practice” with similarities in outlook and approach that far outweighed our differences.