TOKI WOKI. 

“W-Architectures is an archi­tec­ture and urban-planning agency. The firm brings together a highly-qualified team of archi­tects with inter­na­tional expe­ri­ence.” This is how they intro­duce them­selves and I couldn’t have said it bet­ter myself.

I recently pub­lished their brand new web­site, designed by Chris­telle Bon­net and devel­oped by me. It’s been a pretty long process (they are very busy guys) but it’s here and I like it!

I used mostly Word­Press and MooTools to develop it. Every­thing was designed to be light and sub­tle, I think I can safely say that it is.

As a free­lancer I mostly work on AIR apps, but when friends asked me to develop their new web­site I hap­pily jumped aboard!

Le bureau baroque is an archi­tec­ture agency in Bor­deaux; play­ing with art, design and — of course — archi­tec­ture. They’re the ones that set up the Pecha Kucha event in Bor­deaux and who invited me to show off a bit! Of course they work on lots of other great projects so they needed a site to let the world know what’s up.

They wanted a highly visual site that would be easy to update, we con­sid­ered a few options but quickly came to the con­clu­sion that Index­hibit was exactly what we were look­ing for. But one thing that was really bug­ging us is how most (if not all) Index­hibit sites look the same. Indeed they’re a great way to show big images and the nav­i­ga­tion is damn sim­ple, but hey, why not keep these great qual­i­ties but in a more orig­i­nal layout?

Since we’re really keen on hor­i­zon­tal lay­outs we went for this. But some­thing both­ers me with this: you get a hor­i­zon­tal scroll­bar at the bot­tom of the page; which is hard to see, because it sits at the bot­tom of your screen and we — dumb humans — are not really used to it. So I thought: why not have a hor­i­zon­tal lay­out scrolled by a ver­ti­cal scroll­bar? That seemed a bit tricky at first, for two reasons:

1. Is that tech­ni­cally feasible?
2. Isn’t that too weird, for the end-user?

Both ques­tions could not be answered with­out try­ing, so I tried. And it looked cool!

When the pro­to­type was ready I started tak­ing a look at Indexhibit’s guts; and although it looked a bit ugly to me, I real­ized pimp­ing it was no big deal… A few e-mails and burger-meetings after we were happy with the newly cre­ated theme. Chris­telle Bon­net helped out with her great typographic/balance eye and we were ready to go!

Go see the site live, enjoy those nice projects, play with that side-scroll con­cept and tell me what you think!

While redesign­ing this blog I wanted to keep the “one color per post” con­cept I had in the pre­vi­ous ver­sion by chang­ing (tween­ing) the logo’s color accord­ingly to the arti­cle being viewed (or scrolled to). I rapidly real­ized I couldn’t achieve this with just HTML+CS+JS and I didn’t want to use Flash (mainly because of iOS devices but also to avoid load­ing a SWF file on every page).

I remem­bered hear­ing — a few months ear­lier — about Raphaël (a JS lib to ren­der vec­tor graph­ics). At that time I found the con­cept really inter­est­ing but couldn’t see where to use it.

OK, so I know what I want to do, I know the tools I’ll use, but how do we do that? Raphaël is cool, but its syn­tax looks a bit cryp­tic at first. It says it han­dles SVG, and — guess what — Illus­tra­tor can export to SVG. We’re get­ting closer…

SVG is XML, but Raphaël doesn’t eat XML, it eats a spe­cific syn­tax meant to be com­pat­i­ble with SVG and VML. Hum… This is when I fire Flash Builder and start writ­ing code. The goal: accept an SVG XML file as input and spit some “Raphaël-compatible script” out.

Boom (plus a lit­tle demo of an output).

I then sim­ply had to export my Ai logo to SVG, open it in SVG2RaphaelJS, copy paste the out­put, and wire all that to the scroll/color tween­ing logic. Pretty easy.

Every­thing worked and looked nice on all browsers and OS’s but I real­ized the sole idea of hav­ing a logo chang­ing col­ors didn’t work that well. For purely visual rea­sons. So I dropped it from my theme and rolled back to the black PNG ver­sion you can see right now.

The good thing is, the tool works pretty well (at least with Illus­tra­tor SVGs) and is Open­Source. Either use it or mod­ify it, and tell me what you think. I did this in a hasty fash­ion and I prob­a­bly won’t use it a lot, so don’t expect updates or bug fixes… But if you feel like improv­ing it, please do so!

I’ve had this blog for 2 and a half years now, and it never really evolved visu­ally. So I decided to update it a bit, from scratch.

So that means a new theme?

Yay! Since the blog has been redesigned and you’re prob­a­bly read­ing this from your RSS reader you should defin­i­tively come by and see how it looks. And share some feed­back, if you feel like it.

Can’t remem­ber what it looked like before? I’ve archived screens over at Flickr.

A con­sis­tent look

Updat­ing the blog’s look is good, but a com­plete rewrite is bet­ter; for con­sis­tency, fool! I used to have a dif­fer­ent look for every sin­gle page: home, projects, blog and so on. No more.

Long story short:

“Before: all dif­fer­ent. Now: all good.”

I’ve been into grids since the day I learned about Blue­pint CSS and Josef Müller-Brockmann, this is why I wrote Boks. And this is why this site now heav­ily relies on a grid struc­ture. For grid freaks out there, click here to tog­gle the columns and see what I mean. Of course if you’re on a small device (such as a phone) the UI is a bit dif­fer­ent, but we’ll get into that later.

Got a key­board? Like short­cuts? Press that key!

I imple­mented a few key­board short­cuts, from use­ful to use­less. For exam­ple, if you liked the grid tog­gle, just press G (for grid) or W (for InDe­sign users) and you’ll get the same effect. OK, that one is pretty useless.

But what about scrolling to the next arti­cle by press­ing N (or the Down key)? And you guessed it already, P (or Up) will jump to the pre­vi­ous (inspired by AisleOne). You can also time-travel by press­ing Shift+P (for Past) or Shift+F (Future). Handy? Yep.

Feel like you’re stuck in the blog? Just press 1 to go to the Home page, or 2 for Projects. 3 is for the Blog and 4 is the About page.

My screen is smaller than yours

I dis­cov­ered that tech­nique on Hicks­de­sign and imme­di­ately thought I had to imple­ment that: CSS Media Queries! The thing is pretty easy, you define your base CSS styles and then over­write some dec­la­ra­tions if the screen size matches some rules… I imple­mented 3 dif­fer­ent lay­outs so the site should look good on about any device. Just resize your browser win­dow and see things move. How cool is that?

My brother (and his iPhone 4) helped me test the retina-display-ready logo, too. Optional but cool.

More awe­some

• I’ve always wanted to use Web­fonts but never really knew where. Here it is, you’ll find a nice OFL Sorts Mill Goudy TT on the home page. Thanks Google.
• Another tiny thing is the “Sub­tle Prompt”. It hap­pens when you use a key­board short­cut or when you click the Con­tact link…
• If you’re on a WebKit browser (Safari or Chrome) you should see cus­tom scroll­bars, styled with CSS. Yeah.
• I kind of don’t sup­port Inter­net Explorer. Yes, this IS an awe­some feature!
• Track­backs are now sep­a­rated from reg­u­lar comments.
• A blog post’s author (my) com­ments appear dif­fer­ently, so you know who’s the boss out there.

Open­Source

I always try my best to share the use­ful and reusable bits. Here are some JavaScript (MooTools required) goodies:

• LazyScroller: turns your key­board keys into a nav­i­ga­tion dashboard.
• Sub­tlePrompt: nice and gen­tle prompt for your sen­si­tive users.
• Lblr: form input in-context labeler.
• ta-bg: allows a textarea’s back­ground image to scroll with its content.

I’ll try to post docs/demos soon, I know this is prob­a­bly a lit­tle bit rough right now…

What now?

Well, you tell me! I’m pretty happy with it, but things can evolve—just share feedback!

This post is a techy one, so if you don’t write AIR apps or if you think this wouldn’t be enough to show off dur­ing cof­fee break I rec­om­mend some­thing fun­nier.

Work­ing on a big fat AIR app (more than 400 Mb) I noticed some­thing quite strange: using Encrypt­ed­Lo­cal­Store get/setItem meth­ods hap­pened to be slow, I mean very slow, but like, slow as hell (like 5 to 10 sec­onds per call) but only after launch­ing the app, and not after. Some­thing that I never noticed before ; nei­ther with other AIR apps, nor for this one before I added its heavy con­tent… And the tricky part is that it only occurred with a com­piled app, but not within ADL.

I googled a bit and found this thread which is mainly about the strongly­Bound para­me­ter for setItem, but its last post by Oliver Gold­man rang my bell:

The first time ELS is accessed the application’s sig­na­ture needs to be ver­i­fied, regard­less of whether or not strongly­Bound is set. If strongly­Bound is set, then the sig­na­ture is re-verified as the appli­ca­tion is run­ning. Either way, it’s expen­sive if you have a big application.

Small app: fast, fat app: slow as hell. Les­son learned…

And this is true both for Flash and HTML/JS AIR apps. So if you don’t need your data to be encrypted I highly rec­om­mend using Share­dOb­ject (or else) instead. As far as I’m con­cerned the first calls dropped from 5/10 sec­onds to a few milliseconds.

Bingo.

Using Google Chrome? Using Meebo? Annoyed by the ad at the bot­tom and the blog win­dow when you log in?

I just wrote and pub­lished my first Chrome Exten­sion — Meebo Cleaner, to clean that up!

Pretty sim­ple code, noth­ing rev­o­lu­tion­ary here. Go get it and let me know what you think, or if you have suggestions/ideas…

Facts

So the other day I had an hour to waste, I decided to learn how to use MooTools classes and, as the best way to learn some­thing is to play with it, I played with it.

About 30 min­utes after, I had some­thing  run­ning. Dirty and buggy but still, look­ing cool. It took me an extra 30 min­utes to clean that up, make sure it was work­ing on most browsers, add the Google Ana­lyt­ics tracker, push it online and add it to the projects page…

You prob­a­bly guessed it already, I’m talk­ing about the Scroll Clock. Well this hour might be the least wasted one of my life. Think I’m rad­i­cal? Read on!

Results

After tweet­ing about it twice (once to some­one who’s inter­ested in netart, and once to the MooTools team) things went big. I don’t know exactly how this hap­pened but it (the Scroll Clock page) got love from Giz­modo, swiss­miss, QBN, Ajax­ian, Neatorama and many more. Wow.

A few days after the tsunami, here’s what my Ana­lyt­ics page looks like. My daily aver­age of 600 page views has seri­ously been put to shame, with a cli­max on the 19th of Novem­ber: 313,000+.

Side effects

This is prob­a­bly the fun­ni­est part, not only did I worry for the server the site is hosted on, but a few things happened…

I got 3 job offers ; many friend requests on Face­book, Flickr, Vimeo and so on ; received a dona­tion ; was con­tacted by a Google guy to add the project to chromeexperiments.com, which I did ; and of course had to bother my friends and col­leagues about my new web-fame…

Con­clu­sion

The short one: don’t spit on Twit­ter, it might make you a star. Just jok­ing, keep spit­ting on it.

The long one: the sim­plest and short­est project of mine is the one which received the most vis­i­tors and love, ironic right? What does that mean? Should I stop work­ing on full-fledged AIR apps?

Prove me wrong!

Intro­duc­ing my lat­est project: TW Paper, a sim­ple iPhone/iPod touch wall­pa­per gallery+collection.

A lit­tle bit of JavaScript and some Photoshop/CSS trick­ery to present a grow­ing col­lec­tion of images designed for your favorite piece of technology!

The page also works on iPhone/iPod touch but looks a lit­tle dif­fer­ent for bet­ter usabil­ity. Just tap+hold on the image to save it.

Expect the gallery to evolve, with new images and quotes!

I played with MooTools a bit and did that. Use­less, open­source, nerdy.

I also set up a gallery, so if you’ve got nice scroll­bars that aren’t here yet, send’ em right away!

I wanted to do this for quite some time: a place that logs tracks I lis­ten to.

Intro­duc­ing TWPlaylist! Thanks to Twit­ter and a Winamp Plu­gin, all tracks that I lis­ten to (at work) are stored on a dummy account (if you know a plu­gin that does the same for iTunes, please let me know). And to keep things nice and smooth, I set up a quick page that pulls this data and dis­plays it thanks to some AJAX magic… Tracks link to a Discogs search page to find more about them.

As you can read the project page’s bot­tom, every­thing I wrote is open­source. HTML, CSS and JS ; help your­self. Noth­ing too fancy, but it could pre­vent you from wast­ing time… By the way, the code should be self-explanatory, but if it’s not I can help.

You will prob­a­bly notice the some tracks’ data look weird, in fact the Winamp plu­gin chokes on spe­cial char­ac­ters such as “&” and accented let­ters… I hope this gets fixed one day.

I’ve never been a big fan of Twit­ter as I think most user don’t use it the way it should be used, for exam­ple by hav­ing pri­vate dis­cus­sions or retweet­ing too much. How­ever it’s a pretty inter­est­ing plat­form for exper­i­men­ta­tion and art projects. What do you think?

[Sept. 2011 Update] I “donated” the twplaylist Twit­ter account to a char­ity cam­paign, so I moved the account archives to twplaylist_bckp.