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!