Kilian Valkhof

Front-end & user experience developer, Jedi.

My first design is finally done

Design, 13 August 2008, 3 minute read

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! ;)

Polypane browser for responsive web development and design Hi, I'm Kilian. I make my living building Polypane, the browser for responsive web development and design. If you're reading this site, that's probably interesting to you. Please try it out!

  1. Absolutely loving the new design, so clean and efficient yet with that serif twist throughout. Going to have go back through your archives and peruse your previous articles. And hopefully this will motivate me to get off my own behind and get some work done on my site. Great work, hope you keep the informative posts coming.

  2. Like it.

    Inspired by ALA?

  3. Hey Sam, Not intentionally, but it’s possible. They have some very nice typography!

    I’m probably going to change all the implicit text-decorations here into border-bottom‘s to make it look slightly better as well :)

  4. Curtis

    You’re using way too many smiley faces!

  5. It looks great! Interesting typography, very clean design. When I first saw the homepage I thought “Wow!”. And the site does degrade well in IE :)

  6. Loving the new design!

  7. Nicely done! I’m proud of how fancy you’ve gotten with your CSS! My experimentation rarely goes beyond using colons and square brackets to single things out.

    You seem very fond of accenting the first lines and letters of paragraphs though :P

  8. Overall I really like your design. There’s a lot of nifty typography stuff going on but I agree with Ranjani’s remark about your obvious preference for messing around with the first character or first paragraph.

    What I really DON’T like is the uppercasing on first paragraphs. All-caps is simply really uncomfortable to read in my opinion. Other than that I think it’s a pretty cool and rather unusual design.

    Nice job!