Kilian Valkhof

My first design is finally done

After over a year and a half, I finally have a design of my own. It’s been announced way too many times, but now it’s really here. Find out what happened to the tagline, after the break!

Design wise

This is actually the first design I made on a Linux machine (nerd), and the first design that went directly from sketch to html. My sketches were more detailed because of this, and I might add them to the article later, when I have a good camera at hand. In any case it means I didn’t buy fancy pencils for nothing :) Most of the typography was actually sketched out, instead of added as an afterthought. The header is set in Asturias.

Besides that, the whole website adheres to a vertical rhythm of 18px (even my form elements!), largely the cause of the awesome SenCSs. There is a pretty strict grid as well. It might seem quite small if you have a fancy 24″ monitor, but since I have an Asus EEE, I wanted it to work on there as well. I can create 1, 2, 3 or 4 columns within my style, with space to the right of the design where I can put extra stuff. I might experiment with that in time.

I’m using my Context Hover javascript trick as well, I think it works very nice on this site.

I liked the idea of having as little administrative cruft available as possible, and initially didn’t have a search form at all. This is functionality I wanted to offer though, so I settled for what you currently see. It’s in the top right corner with position:fixed, more part of the browser window (right below your google search bar) than my website. Huzzah! I also removed the sharing options, and made the meta information as small and invisible as possible.

Oh, and about the tagline, it’s still there for those who look :)

Code Wise

Yep, I used SenCSs for this design, and that took away about 50% of the styling needs. I’m so happy with developing it :) There are probably some things here and there that I’m going to change in SenCSs 0.4.7, or, if I can finish the form part, they’ll go straight into 0.5 :) (0.5 being the first version to include form styling).

HTML-wise it’s quite boring. xhtml strict, nothing spectacular. I went down a scale in headings in articles. (So what was h2 with the old design will be h3 in the new design.) Will be interesting to see what Google thinks of that…

I’m also happy to tell you that this site is made with a screw IE attitude. I can do this, because IE users are only about 15% of my visitors. Most of the site will work for them, the fancy stuff won’t. What fancy stuff, you ask? Well, That would be fancy CSS selectors such as these:

h2 + p:first-line
.first-post > p:first-line
.comment-form .left ~ button
li:not([class=pingback]) .comment-content p:first-child:first-letter

I’m using the similar posts plugin to display related posts at the bottom of my articles, which works pretty well and I find myself browsing through my backlog, so I hope you will, too. :)

On the homepage I have the three most popular posts. Anyone that has searched for a plugin to take care of that and works with WordPress 2.6 probably found out there isn’t one. So I had to make my own little snippet* that uses the post options plugin. I’ll post an article with the code in the next couple of days. *my WordPress-fu isn’t good enough to develop plugins yet

More than a weblog

I like the idea of this just being a weblog, but I am also a freelancer, and wouldn’t mind showcasing that on my site a bit more. So the projects page will include both open source and client work. I got some cool things lined up for release. On the homepage I’m displaying a list of projects I developed or am involved with. Currently that’s just SenCSs, but expect that to fill up in the near future.

Your Thoughts?

I’m quite interested in your thoughts on the design and the website in general, let me know in the comments and if you’re browser is hot enough, I’ll give you a sweet :first-letter and first-line effect! ;)