On making this website

This is my website. There are many like it, but this one is mine. The source code is available on GitHub.

Typography

The typeface used on this site is the lovely FF Tundra by Ludwig Übele.1 I’m in love with FF Tundra. I came across it a few months ago, became totally obsessed with it, and couldn’t wait for an excuse to use it. When I decided to build this website, I immediately knew the time had come to use Tundra. It was the first design choice for this site, and the first time I ever purchased a font. I thought about using a second font with it and tried out a bunch of combinations, but ultimately decided to stick with Tundra for everything.2

I wanted a comfortable font size—large but not Zeldman or Trent Walton large3—and settled on 22px at the largest breakpoint. Funny story: For the week I spent developing this site, I was viewing it at 110% zoom. Made for an interesting surprise when I deployed it.

I used a modular scale for the site, using the ratio of a major third in music (4:5 or 1.25). Because who doesn’t like a major third? And I double stop major tenths on the bass all the damn time.4

Code

This website uses Middleman, my static site generator of choice. Jekyll seems to be getting more attention these days, but I feel most at home with Ruby and ERB templating, so I’m sticking with Middleman for now. It’s written in HTML5 and Sass, generally adhering to SMACSS and BEM principles as far as splitting things up into partials and naming classes descriptively.

I feel like the OOCSS/BEM thing can lead to an unnecessarily cluttered DOM with all of the class names, although I love the idea of abstracting reusable patterns. Preferring clean HTML, I tend to use extend instead of applying a class to every element. For now, anyway.

Layout

This site was built mobile first using Susy as the grid framework. I’m using the nifty magic grid thing that applies a breakpoint as soon as the specified number of columns can fit in the viewport.

I sketched some mockups at 7am one morning during Patterns then put them away to work on the content. I played with some more complicated ideas for the home page before ending up with the simple layout it has now.

First mockup of nadav.is
The first mockup of this website.

Writing

Articles are written in Markdown. They usually start in Byword on the Mac or Editorial on the iPad5 until I’m ready to see them in context, at which point they’re moved into the development branch in the repo and into Sublime Text for editing.

I’d like to give a special shout out to Brett Tersptra amazing SearchLink OS X Service for making Markdown links so much easier.

Getting the (unofficial) Markdown footnote syntax to work was kind of a bitch. I started out using the redcarpet engine but it didn’t support them. I tried a few others and almost settled on kramdown except it was stupidly difficult to get the figure/img/figcaption pattern to parse right. Eventually I got redcarpet working for footnotes—and automatic smart quotes—within Middleman by pulling the gem directly from GitHub. Yay.6 The footnotes display inline thanks to the awesome Bigfoot jQuery plugin.

  1. Here’s a cool article by Ludwig on the making of FF Tundra. ↩

  2. Honorable mentions for Museo Sans, FF Milo, Brandon Grotesque, and Tungsten. ↩

  3. Not that there’s anything wrong with that. ↩

  4. Thanks, Red Mitchell. I love you! ↩

  5. Well, half of the Miles Davis post was scribbled in a Field Notes notebook on the Subway—because sometimes you can’t interrupt the flow, but still have to get places. ↩

  6. I took a detour trying to make a Middleman helper function to generate my figure/img/figcaption blocks—borrowing from Middleman Sushiplate—but that stuff seems to broken right now. Will try again some time. There’s a working plugin for jekyll. :-( ↩