W-Architectures

"W-Architectures is an architecture and urban-planning agency. The firm brings together a highly-qualified team of architects with international experience." This is how they introduce themselves and I couldn't have said it better myself.

I recently published their brand new website, designed by Christelle Bonnet and developed 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 WordPress and MooTools to develop it. Everything was designed to be light and subtle, 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 visually. 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 probably reading this from your RSS reader you should definitively come by and see how it looks. And share some feedback, if you feel like it.

Can't remember what it looked like before? I've archived screens over at Flickr.

A consistent look

Updating the blog's look is good, but a complete rewrite is better; for consistency, fool! I used to have a different look for every single page: home, projects, blog and so on. No more.

Long story short:

"Before: all different. Now: all good."

I've been into grids since the day I learned about Bluepint CSS and Josef Müller-Brockmann, this is why I wrote Boks. And this is why this site now heavily relies on a grid structure. For grid freaks out there, click here to toggle 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 different, but we'll get into that later.

Got a keyboard? Like shortcuts? Press that key!

I implemented a few keyboard shortcuts, from useful to useless. For example, if you liked the grid toggle, just press G (for grid) or W (for InDesign users) and you'll get the same effect. OK, that one is pretty useless.

But what about scrolling to the next article by pressing N (or the Down key)? And you guessed it already, P (or Up) will jump to the previous (inspired by AisleOne). You can also time-travel by pressing 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 discovered that technique on Hicksdesign and immediately thought I had to implement that: CSS Media Queries! The thing is pretty easy, you define your base CSS styles and then overwrite some declarations if the screen size matches some rules... I implemented 3 different layouts so the site should look good on about any device. Just resize your browser window 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 awesome

  • I've always wanted to use Webfonts 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 "Subtle Prompt". It happens when you use a keyboard shortcut or when you click the Contact link...
  • If you're on a WebKit browser (Safari or Chrome) you should see custom scrollbars, styled with CSS. Yeah.
  • I kind of don't support Internet Explorer. Yes, this IS an awesome feature!
  • Trackbacks are now separated from regular comments.
  • A blog post's author (my) comments appear differently, so you know who's the boss out there.

OpenSource

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

  • LazyScroller: turns your keyboard keys into a navigation dashboard.
  • SubtlePrompt: nice and gentle prompt for your sensitive users.
  • Lblr: form input in-context labeler.
  • ta-bg: allows a textarea's background image to scroll with its content.

I'll try to post docs/demos soon, I know this is probably a little 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 Challenge (that took place in Paris this week-end) looked like: lots of young and fresh folks ready to spend 24 hours building an AIR app.

Pretty happy the 3 apps I supported all made it to the podium and can't wait to play with Digitas' 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 latest and nicest AIR app to this day!

Always looking for help when writing AS3 for Flash, Flex and AIR? Think Adobe's reference is rich but browsing it sucks? Well, I did too. So I wrote this little 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 therefore may not be very interesting to others, I decided it should look good. So I tried my best and worked hard on those pixels and styles (colors and textures inspired by that sweet clock)... Jump to the project page for life-size screenshot!

This project is absolutely OpenSource, from top to bottom. AS3 classes, MXML, Illustrator and Photoshop files, PNGs and so on... Help yourself.

GRAFFYARD