Search the Zooiblog

Support this site.

Contest: Pushing CSS

Update: The pretty swell people of Color Schemer will be giving away their application (Windows or Mac OS X) to the number one. I’d say that’s worth giving it a shot, even if you already tried, like eight times or something (ey Trev?).

Okay, I’ve been working on this for a while, but here it is: my first contest for you and for the audience too. I wrote a simple HTML document with structural markup and some other stuff that makes sense. I present to you the markup: try and make something cool with CSS.


Because I think we all need challenges every now and then. Also, I guess there could be quite a lot to learn here.


Your tool? Just the CSS.

The idea I have is this: make the page easy to read, well-styled, efficient and reproducable. It’s up to you if you use graphics or not, if you use boxes or not. Just make it Good. Some rules do apply, and they make this the challenge it is: use a maximum of three images (read that correctly, please: three image files), make it work in modern web browsers (IE6 support would be nice, but it’s not a requirement) and go wild on the CSS3 you know. The funkier the better.

What’s in it for me?

Right now, that’s a small issue. I can only promise you fame and glory. If there’s anyone kind enough to give the winner(s) something, I’d be very happy. Contact me please. Mister winner will be receiving the swell Color Schemer app.

Okay, count me in

You can enter your submissions in the comments, but it’s okay if you mail me the link. Files will reside on your own server, but the best three will be hosted on my server.

What will happen to your design? It will end up in a list, with your name, website and maybe email. I’ll add a CC license to it as well. Of course, you may still do with your design whatever you want — tell me, so I can link to your specific CC or individual page.

Also, I’d like to inform the winner and numbers two and three that I’d love them to write a small bit about what CSS they used, and what stuff was really challenging. Just for the educational factor, I guess.

The jury

I found some people on the intarweb who I think are le cool and who were willing to be the jury on this contest. This jury consists of father and web developer John Oxton, great woman and minimalist designster Jina Bolton and kinky Kansas designer Jeff Croft. Impress them!

Well, let’s do this then!

The file is over here. Usage: /?file=http://youraddress.tld/style.css. There’s no deadline yet, but I give you at least one week. If that proves difficult, for whatever reason, I will make sure there’s enough time.

I added some markup to give just a couple more styling options and hooks, and to make it more realistic. Mister Dante will want to edit his submission. Sorry!

Slackery and other small tidbits

First of all, all of you who just plain loved my article on pleasing the user: the follow-up won’t be around for at least a week. In the meanwhile, read other great content.

On a more personal note, I got hit by a car last Monday. Painful experience. Also, school’s keeping me busy enough, but the good news is, I have less than 10 days to go. After that, I will be on a small trip to England for about four days. More on that next week though.

I finished some client work last week, and it seems that the results will be online soon. I will write a post on them when they’re both there (two sites I can talk about at least). Oh, and now the cat’s kind of out of the bag, my redesign will be quite nice, I think. If anything, blame Jeremy.

More from me tonight, when I have a new post with some nice stuff for all of us here.

The key to success is to make others succeed

The ultimate goal of every self-respecting interaction expert (encompassing job descriptions like interface design, information architecture and human-computer interaction) is to make the user happy. No, not just happy. A user must not only accomplish his task, he must feel that he does. Acknowledgement of his success is as important as actually succeeding. The user might not notice, but subconsciously he will be satisfied by what he did, and the opposite, if the user feels he failed, is a negative and much more powerful feeling. Best to avoid this. Yes, he got it done, but look how he got there.

To the user who’s not already heavily numbed by the bad interactive objects he encounters, does not believe that ‘the ends justify the means’. Nowadays, he is probably used to the mess that comes with many of the applications and other interactive objects we encounter. That does not mean improvement is useless. It never is. They don’t call it ‘improvement’ without a reason. If it’s impossible to fix it, it might still be possible to improve it.

Improvements often go by unnoticed. Many will agree with me, it’s in the details. Details make the difference. Heck, one tiny detail that doesn’t behave as it should can mean death to the whole object. It’s like that with everything. You may get away with something mind-boggling that lacks the more subtle interface details but does something extraordinary. Odds are that you won’t create something like that. That’s okay, but if you make something which is plain, work on detail. See it as The Road to Success, Mile One. It’s a long road, and users might get bored too. Hopping off the driving cart is an option.

Out with that metaphor. It’s weird. Okay, not yet. I envision it like that. The user is a passenger who wants to sit on the best seat. Either you make sure everyone sits comfortably or you figure they will put up with your crappy seating. Who cares if the passengers sit comfortably? Enough of that, people (both the metaphor and the behaviour).

To return to the subject at hand: the user wants confirmation. I’ve been told often that you should not want validation, but the user expects nothing less. It might sound like a cliché, but it’s very true: don’t ask what your user can do for you, ask what you can do to make the user experience a better one, one worthy of being called a User Experience™, if you’re into that kind of stuff. The point is, don’t disappoint a user. Wait, scratch that. Better: satisfy a user. Satisfaction is what makes the world go round, and that makes you wonder why so many interactive objects lack this.

Example: Gmail is a nice system. Few people realise how easy it is compared to such embarrassments like Hotmail. When you send a mail with Hotmail (it always takes me a bit to do it properly), you get (after searching for the Send button) a page with a confirmation that the mail is sent. That’s not too bad, but I’d rather go back from whence I came. Not the point here though. The element of the page you deem most important gets the least focus. I keep failing to see that it indeed has sent it, because all I see is this ball of clutter and an option to add the person I mailed to my contact list. Mailing someone through my Hotmail has become an awful chore—I can hardly say I enjoy that process.

The real solution to this all is very simple, and many around the world already get that. Constrain yourself to the following keywords: simplicity, sensible feedback, singularity. Simplicity is a classic, but it doesn’t mean you can deviate. Sensible feedback is a must. Take this made-up but highly plausible Windows error: “Error: an error E332-#8874 has occurred in Application. Please restart.” Obviously, this doesn’t help anyone save the programmer who wrote the line that declares that error, if any. Cue Gmail: “Your message has been sent.” Singularity, lastly, is highly underestimated. Where I get a completely new page in Hotmail confirming that I sent a mail plus several features I have never used, Gmail just tells me, in a yellow-ish bar at the top of the inbox, my mail has been sent. Focus. Keep functions separated. Clutter hasn’t done anyone any good.

How do you make sure your user will like the way you treat them? You can’t be sure about that for every user. It depends on the kind of user you expect, and even then, stuff is hard to figure out. I guess there is a lesson here for us all! We will have to learn from their feedback to improve ours to them. It’s a progressive step, but it will improve your execution of any user-related work, and that’s what’s important here.

What I’m really saying is, you better do your best at making the user succeed in his activities. If he actually does it without blemishes, then off goes my hat. Being able to serve the user well is a good thing to have up your sleeve.

Next time, I will try and find out how you can improve the feedback you blurt at your user, including some real-life examples.

(Thanks to Pete and Joen for checking and suggesting (and thus improving)!)