Version 10 of this site is back to a minimal type design. I go back and forth between wanting to design fun stuff and wanting the design to get out of my way. Obviously, I’m back in the mode of wanting my writing to stand out and look as good as possible. I spent a decent amount of time looking at typefaces for this design, which I’ve never really put a whole lot of thought into — at least not from the beginning like this. I decided to go with Chaparral Pro for the headings (which is scary close to being a Serif face) and FF Meta Pro for the body type. Some of the smaller, uppercase headings are Helvetica. The download buttons like those on the Network Favicons post are also Helvetica. The typefaces are being provided by Typekit, naturally.
There’s still stuff that needs to be finished. I’ve got an entire list on a piece of 11×17 poster board in my apartment. The design is mostly finished. I need to look at the single pages of the portfolio again, but other than that I’m pretty happy with this. Most of the changes I need to make are administrative things, like figuring out how to track my short domain with Google Analytics.
It’s fully responsive. When it’s really small you lose the logo, but other than that it’s all there. A branding expert would probably tell me it’s important to put the logo in people’s faces on mobile as well, but it didn’t fit and I’m not really interested in pushing the content down any more than it already is. I’m using
min-height along with the standard
min-width for the media queries because of the height of the sidebar. The portfolio is always in “mobile” mode because I wanted to show thumbnails in the full width of the browser, which meant moving the sidebar.
This is the first project that I use LESS start to finish and it was a dream. First, if you have problems keeping your CSS organized like I usually do, LESS (or SASS) forces you to fix that — not in a way that’s more work, but just because of how nesting works. Second, apps like CodeKit1 automatically compile & compress your CSS and reload your browser window when you save. Sometimes it doesn’t even have to reload, the CSS just gets injected into the page.
I introduced link posts, which I introduced last week. The CF Post Format Plugin is awesome for managing post formats. I plan to use this to post some of the links that I find around that web that are particularly interesting.
I’m pretty happy with how this design has turned out, but I’d love to hear any thoughts or suggestions.
- In addition to compiling & compressing a huge list of languages including LESS, SASS, and CoffeeScript, CodeKit does syntax checking, lets you define frameworks (like the vendor prefix framework I use), and will compress images. It’s my favorite app for this sort of thing and definitely worth checking out. ↩