W-Architectures

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.

Redesign

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!

Elsewhere III

Blu — Pickpockets

Mario Hugo

Bike by Me

#air24h

This is how the Adobe AIR Chal­lenge (that took place in Paris this week-end) looked like: lots of young and fresh folks ready to spend 24 hours build­ing an AIR app.

Pretty happy the 3 apps I sup­ported all made it to the podium and can’t wait to play with Dig­i­tas’ Flickr app! Nice job, fellows.

See pics at Flickr, vids at Vimeo and wait for the apps: they should be out really soon.

Les spécialistes

Dok — AS3 Doc. UI

Meet Dok, my lat­est and nicest AIR app to this day!

Always look­ing for help when writ­ing AS3 for Flash, Flex and AIR? Think Adobe’s ref­er­ence is rich but brows­ing it sucks? Well, I did too. So I wrote this lit­tle thingy that loads, parses and caches help pages and then presents them in a slick and quick UI!

Since this app is only intended for devs and there­fore may not be very inter­est­ing to oth­ers, I decided it should look good. So I tried my best and worked hard on those pix­els and styles (col­ors and tex­tures inspired by that sweet clock)… Jump to the project page for life-size screenshot!

This project is absolutely Open­Source, from top to bot­tom. AS3 classes, MXML, Illus­tra­tor and Pho­to­shop files, PNGs and so on… Help your­self.

GRAFFYARD