You Are Such a Clever Cat.

Our brains are hardwired to attribute human features and behaviour to many things we know not to have them. From pets (they really aren't clever), to abstract things like countries, simple things like plug sockets, and the UI of digital products.

Despite being able to rationally detach these human characteristics, we can't help but see them anyway. We see faces everywhere we look.

Working for us

This condition (anthropomorphism for those who like to sound clever) can be used by designers to give inanimate objects personality and to guide a positive user experience around digital products and services, which we not only come to see as allies, but in many cases as friends.

Can you imagine treating this little dude as you might treat your desktop printer? (which im my case is a toxic combination of disdain and rage)

Or throwing a cup this cute in a non-recycling bin?

Nope though not. These designs can strongly infulence our reactions and behaviour toward the objects around us.

So, should I draw a face on my next website?

Yes this is a rhetorical question. Clearly there are levels, and not everything needs a face.

I’ve made use of this in my own work in more subtly ways, recently on a website for Cliff Design where the open/close functionality uses animation to transform a 50 pixel green square into a little character who fetches content at your call.

I did experiment using an face instead of the text and arrow combination, but found it wasn't required, the character coming from the animation (as well as making the functionality less obvious).

What am I taking home here?

This is a powerful technique to infulence people's behaviour. It can be used subtly, or overtly, but should be used carefully as it could easily become a turn-off. It could also just be an unecessary distraction.

What is certain is that we are going to see a lot more of this, and (like any overused technique) we could find ourselves in the middle of a backlash.

Percentages & Pixels Sitting in a Tree

When building a properly responsive layout, gutters set in % become inappropriately sized at both large and small window sizes. Using some simple and pretty well supported CSS (IE8+) we can damn well fix that.

The obvious CSS for a liquid layout might be something like this;

.sidebar {
    width: 20%;
    padding-left: 10%;
    float: left;
}
.content {
    width: 60%;
    padding-left: 10%;
    float: left;
}

View demo

The problem being; at iPad size the gap between columns is too small, and on your shiny new cinema display, it's gonna be too damn big!

Are we just gonna take this?

(Hell no)

What we actually need is the IE6 box model in Quirks mode, and (here's one I prepared earlier!) CSS has that very option!

.sidebar, .content {
    box-sizing: border-box;
    padding-left: 24px;
    float: left;
}
.sidebar {
    width: 30%;
}
.content {
    width: 70%;
}

View demo

This is gonna to give us a liquid layout, with fixed pixel gutters.

To be fair this isn't perfectly supported. It requires the following prefixes;

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;

and doesn't work in IE7 (although there is a polyfil for that).

Only you can decide how much of a problem this is, although I would say is that if you are using this technique for fluid responsive websites, serve it up inside a media query and the poor little devil gets fat nothing.

There is an alternative; using display: table which does actually emulate this behaviour, but although this property is slightly better supported, I've found it to be a little unhelful due to additional effects; accessibility problems and jQuery issues.

Can we do better than pixels?

We could use alternative pixel padding values within a series of media queries, so we could make use of the space afforded by larger screens with appropriate padding.

My personal preference however is to set gutters in ems, and control the gutter widths using the base font size.

body {
    font-size: 16px;
}
@media screen and (min-width: 768px) {
    body {
        font-size: 18px;
    }
}
/* and onwards */

.sidebar, .content {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 2em; /* either 32px, or 36px */
    float: left;
}

View demo

Boom. Go build.

Bacon In The Sky ... With Diamonds.

Hot damn I've only launched a personal website! As something of a serial scrapper, I've burnt through my fair share of designs, all preferable to the fat nothing my domain has worn for the last 5 years.

Recently I've begun to consider why I even want a website, and I believe this thought process has tipped me over the edge. Thus as an eternal reminder of my own personal solution to scrapping, I shall now scratch my reasons into this HTML.

Learn by doing

I want to experiment with the bleeding edge techniques which I love about my job (more to come, but responsive and SVG are go). I shall also improve something I feel is a weakness; my writing, which whilst not a disaster, needs the polish which only consistently doing can bring.

Make waves

No, not that kind. The Web is constantly shifting. I will use Clearbar to document the work I am proud of, before it's inevitable demise.

Give something back

I've been making websites for about a decade, during which time I've consumed vast quantities of content, created by supremely talented people. Yet I never contribute, I don't even leave comments.

This will change. Hold me to it.