Shared publicly  - 
 
They love typography, don't they?

It's a complete overhaul. I wrote the backend from scratch and went for a more flexible and cleaner design. It's still not quite a "mobile first" kind of a site, but it's getting there.

The problem I was trying to solve was that people rarely went past the first page of the site. They didn't play with it. Features like keyboard navigation, color search and random browsing have been there since the beginning, but I don't think most people noticed. The plan was to change everything that wasn't working and not touch anything that was.

The masthead is inspired by the "cutout ads" on A List Apart. For years I've wanted to do something useful with that technique. The idea is to have an image where the content is transparent. That way any color you put behind it shows through. You'll notice this when using the color search.

At first I wanted to remove the search feature entirely, based on poor usage statistics. +Able Parris convinced me that this was still a necessary feature, and that it needed to go to the top right corner of the page. Good call. He also asked "why would anyone want to go to the last page of the site", so now I just have plus and minus buttons for back and forth. The assumption is that everyone will just use the keyboard to do this anyway.

The grid controls help you fill your screen more efficiently. The sizes are based on Apple's screen resolutions, since most of our visitors use OS X and Safari. In fact, the use of non-WebKit browsers is so minimal I felt comfortable using CSS3 features for a lot of the styling.

One of the better ideas was to finally go for TypeKit. I couldn't believe how good FF Meta looks on the screen until I put it to use. Another one was to link to Dribbble tags on the single post view. Most of our tags are compatible and return good results. The color search is also a lot better now.

If you search for "video" you now get all YouTube and Vimeo clips we have. You can also play them within the site instead of just following a link out. I'm still working on Flickr videos.

For mobile, I started with just the iPhone and I'm still in the middle of fine-tuning the experience. You only get the content that can be displayed on the phone, without leaving Safari. The iPhone gets a grid of 2x2, so all content fits on the screen in portrait mode. Landscape is a bit wonky still, but I think it makes sense to use this site in portrait mode only. You can navigate by swiping left or right. The threshold is relatively hight — you'll have to swipe over half the screen. I'm trying to minimize the chances of accidentally jumping to another page.

Next up will be deferring the loading of JavaScript and doing the iPad layout. The site is relatively fast and gets a 94/100 grade from Google, but there's still room for improvement. And you can never be too fast for mobile.

Thanks to +John Boardley, +Able Parris and +Jacob Heftmann for their help.
3
Tilman Zitzmann's profile photo
Add a comment...