Zoomable UI

Modeless Zoomable UI

Zoomable UI for the Web

Grid Systems

Bi-directional Layout

A two-way scrolling layout used on a previous version of this site. (2013)

Frameless

A recipe for building an infinitely adapting fixed-width grid (2011).

Golden Grid System

A folding grid system for responsive design (2011).

Less Framework

An early adaptive CSS grid system (2010–2011).

Old Writing

My Bachelor’s Thesis

Basically like a long blog post about the state of responsive design in 2011–2012.

Leaving the OldInternet Explorer Behind

Using media queries to make a clean break from legacy browsers. (2011)

A Smoother Page Load

An unexpected opportunity to control how the page loads, using Typekit. (2011)

(This post refers to a previous version of this site.)

I finally have a blog. For the longest time I haven't been able to let out the endless rambles about all the little design detail and theories bouncing around in my head. Now I can, and will.

I'm going to start by going over a little trick I discovered when designing this site. When you opened this page, you may noticed that it took a moment longer to load than usual, and that it didn't just blink into existence, but faded in.

The culprit behind the extra loading time is the asynchronous Typekit snippet, which loads the web fonts used on this site. Unlike the regular Typekit snippet, the asynchronous one doesn't automatically protect you against the Flash of Unstyled Content that can happen if the fonts don't load quickly enough, so I had to take care of that manually.

I had to make sure no text elements on the page would show until the fonts have finished loading. To accomplish this, I simply set the opacity of all text on the page to zero using the .wf-loading class provided by the Typekit snippet. I also added a fallback for versions of IE that don't support opacity.

This should work in most modern desktop and mobile browsers, including IE9. The fade-in might feel a bit laggy on underpowered computers and mobile devices that don't use GPU rendering, but that's okay, since it'll feel more or less just like a regular blinking-into-existence page load.

There was one downside though: hiding the content made the initial load seem slower. Even though the site is progressively rendering into existence in the background, we can't see it, which makes the load time feel longer.

To alleviate this effect, I added a little loading spinner as a GIF image. Since the spinner needed to appear immediately, I embedded it into my stylesheet using a data URI. I used Opinionated Geek's Base 64 encoder to encode image and embedded it as follows:

This should work just fine in all modern browsers, including IE8–9. IE6–7 will simply ignore it, which is fine by me. This is just a minor detail after all.

The resulting effect is pretty interesting, isn't it? It doesn't feel like a regular HTML page load, but not exactly like an AJAX load either.

This technique could also be applied to images or even the entire page. Theoretically you could even create all sorts of Powerpoint-esque transitions using CSS transforms. It's good to practice restraint though, as these effects can be quite performance-intensive. Also, the simpler and faster the transition is, the less likely it is to annoy anyone — good transitions are felt, not noticed. Personally, I think this one turned out pretty good, but I'd love to hear your opinions about it on Twitter.

Update on 23 Jul 2011: The IE fallback was causing the fade-in to feel jerky in Safari, so I split it off into a separate declaration using an IE conditional class. It will probably not work in IE6, but will in IE7–8.

Update on 2 Aug 2011: The fade-in on this site is currently disabled while I'm investigating whether it has something to do with the mysterious plummeting of this site's Google ranking.

Update on 10 Aug 2011: The fade-in is back in action. It doesn't seem to have caused my ranking problems.

Adaptive Static Design

This is an article I wrote in 2011, for .net Magazine #211. I’m rehosting it here, since they’ve since made their old issues inaccessible on the web.