Aims
Primarily I wanted to design and build something from the ground-up. Having let me blog/portfolio fall by the wayside a few years ago I never got around to re-building it. But after finding myself getting more and more involved about industry-related stuff on Twitter; an outlet that extends beyond 140 characters was inevitable (eventually!).
In terms of top-level objectives, they were simple. Say what I’m about, show some things I’ve built and continue to share what I do or think. Design objectives were to create something contemporary with a focus on typography, that’s very readable on any device. Along with a suitably interesting portfolio page.
Design
You may have read that I am primarily a developer rather than a straight-up designer. Because I was my own client and wanted the site to be simple, I went straight to browser without even opening Fireworks once.
I think that factors such as layout, fluidity and typography mean doing a lot of prototyping or design progression in the browser is the right way to go. Re-creating stuff in a graphics app that you’re going to use CSS to build seems like a bit of a pointless step, so long as things have been planned properly.
Typography
As above, my main focus for the site was sound typography so it made sense to fire up Typekit and begin testing out fonts in the browser. I always had my heart set on a serif primary font. I love how they look at larger sizes and admire the approaches of people like Trent Walton and Jeffrey Zeldman, pushing font sizes up on their own sites and focusing primarily on content. FF Tisa Web Pro was the one for me.
- FF Tisa Web Pro
- Museo Sans Rounded
I had no intention of creating a graphical logo or developing a brand for the site (plus I can’t use Illustrator for the life of me!) so decided to go with a type-based logo-of-sorts. For this I wanted something more informal so chose Museo Sans Rounded which also paired well with the serif typeface.
Colour
I think it’s hard choosing colours and find by the end of a project you begin to hate what you’ve chosen. I decided to take a defined colour pallete and stick to it, choosing one created by swiss designer & architect Le Corbusier.
The KT 43 pallete was created during the 50′s and Le Corbusier is said to have been heavily influenced by Walter Gropius and the Bauhaus (an area that has always been an interest of mine). I picked a vivid green and maroon, followed up with the typical couple-of-grey tones and an off-black for body text.
Typesetting
The build started by examining the typography on my phone and an iPad, ensuring the gutters and font size were ample (always find both to be a bit too small on a lot of sites). I settled on a base of 18px for font-size with 30px line-height
html {
font: 112.5%/1.667 "ff-tisa-web-pro", serif; }
Generally I didn’t get mathematical about things; giving text elements a consistent margin-bottom and headings their own margin and line-height that looked right. I don’t think we should get too hung up over a strict vertical rhythm – I went more by eye than anything (let me know how you think it went!)
I then simply boosted the root font-size and let the flexible font measures (ems/rems) and unitless line-heights scale everything proportionally as screen size increases.
@media only screen and (min-width: 43.75em) {
html {
font-size: 125%; }
}
@media only screen and (min-width: 75em) {
html {
font-size: 137.5%; }
}
The breakpoints I came up with were all based around line length. When the character count hit 75, I increased the font-size and set a max-width on the content area so the single-column remained consistent and readable.
All of this was tested along with other layout elements on a single-page style guide. I worked largely on this page alone to define the site structure and give me various different layout options which I then transferred into other pages of the site.
Navigation
Although the nav was very simple, I decided to use the “jump down” navigation pattern with a back to the top link. This keeps everything tucked away in the footer and gives you somewhere to go when you’ve finished reading. It also makes everything nice and clickable on a phone when holding it and using your thumbs!
Everything else
I was in two minds whether to enable blog comments at all but figured a good middle ground is to have them hidden by default. I don’t want people commenting or reacting to comments before they have read the whole post, so hopefully this will avoid that! The lone sharing button (Twitter) is run through David Bushell’s Socialite.js plugin.
On the work page, I created my own lightweight jQuery plugin to toggle between screenshots. I’m gonna stick this up on Github at a later date, although I’ve recently found ResponsiveSlides.js which looks very similar!
I used the InstaPress and Twitter for WordPress plugins to display the latest items on the home page.
For code examples I have implemented Intelligist that will allow me to embed code from Github directly into a blog post. I am also using rainbow for syntax highlighting.
Lastly, I used the FontAwesome icon font to add a few icons here and there.
Let me know what you think to my efforts, all feedback appreciated (positive or negative!)