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.
- 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.
- 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...
Well, you tell me! I'm pretty happy with it, but things can evolve—just share feedback!