New Site Design!

This is maybe the fourth or fifth incarnation of dtott.com. This time around I tried to simplify everything, do away with (mostly) useless features, and concentrate on the reading experience. Here's some notes on the site. Hope you enjoy it!

Craft

I had been kicking around a couple static-site generators (including Jekyll and the very cool static.ly), but I decided I really wanted the ability to add posts from other machines other than my own (like my iPad, for example). So, I decided to stick with a traditional CMS.

I really had been wanting to try out Pixel & Tonic's new CMS, Craft, and boy am I glad I did. Everything has been incredibly easy, from templating ( twig is the bomb diggity) to server setup and migration. One-click updating, even! It's been such a pleasure working with it, I can't wait to use it for client work.

Sass, Grunt

I moved to Sass/ Compass from Less, which has overall been a positive experience. This site doesn't have too much going on in the way of complicated CSS aside from some relative unit trickiness (see below), but using Sass (and Grunt for building) makes everything just a little easier and nicer.

Webfonts by H&FJ

Type foundry Hoefler & Frere-Jones recently released their own webfont service , which I jumped on as soon as I could. They make beautiful fonts, and their service includes a ton of nice tools. Currently this site is using Gotham Narrow and Whitney Pro.

Relative CSS Units: rem, vw, and vh

For browsers that support it, this site now makes full-use of relative font-size units as well as viewport-relative font-size units. Using these together allows me to do some neat things when responding to different screen sizes. The font-size of everything is set to use rem, which means basically a percentage of whatever the font-size is of the html element. Then, I can set the html element's font-size in vw, which allows the entire site to respond to the width of the viewport! It's sort of fun stuff. Then all I have to do is set some breakpoints where things start looking a little funky. The only downside is that there is a webkit bug that prevents vw units from responding when a user drags their window around. So, I threw in a little javascript to help out with that.

Anyway, this has been a fun little project, and I'm looking forward to iterating on it and, hopefully, writing more. Thanks for checking it out!