At my new job as web developer at Hogeschool Rotterdam, specifically for the school magazine “Profielen” I redesigned their website based on several request from the editorial. For the Dutch readers you can read all the details here.

The website used to be in tables without any separation between content and presentation. The website was really slow on the school computers which run on Windows XP with IE8 as standard browser.

Old table based website

This was my first try at responsive design, learning along the way. It may not be mobile first or ‘real’ responsive, but it gets the job done. It’s still a work in progress, and I have a lot planned for this website.

I used Typekit for this project, I liked it so much I’m contemplating a subscription myself for my own websites. The paid versions are way more attractive than the free one I tried once.

I have been reading Early Onset of Night for months now. One of the most honest no nonsense weblog I have read in a very long time. The weblog is written y Michael Kindt who also published a book, Early Onset of Night, Volume One.

Poetry, satire, absurdity, and death, the tumblelog of writer, twisted freak, and fantastic dancer Michael Kindt.

I would list some of my favorite posts by Michael, but I mostly like all his stuff. I’ll just list the most recent quote by him that stuck with me.

About privilege:

Bill Gates is fucking OBSCENE to me. He has billions of dollars. Billions. He gives hundreds of millions away in charity and still has billions left. That makes him an enormous fucking asshole in my book. But, then, I’m a guy with 42 bucks. And a house. And a fridge full of food. I’m privileged. Compared to most of the people in the world, I am totally rich.

Every night lying in bed I’ll open the Tumblr app on my iPhone to read Michael’s latest posts and you know check for new posts all day long when I should be doing something productive.

If you are not easily offended, this is a weblog you should be reading!

Update

Well turns out the CSS code given before doesn’t work with IE. The problem with IE that I could figure so far is that it needs to have local src.

@font-face { font-family: 'MyFont'; src: url('fonts/MyFont.eot'); src: local('My Font'), local('MyFont'), url('fonts/MyFont.ttf') format('truetype'); }

Without the “local” font-face won’t work in IE.

/————————/

I’m working on a client website that requires a custom font on the navigation menu’s and headers. The font came in the old Apple format, PostScript type. The easiest way to use this would be using sIFR or Cufon. But I am partial to those methods due that they require Flash and/or JavaScript.

To use font-face I need a TrueType(.ttf) file for Gecko and Webkit browers and Embedded OpenType(.eot) for Internet Explorer.

First thing I did was a Google search to find out how to convert PostScript type font. This can be done by opening your Terminal, navigate to the location of the font you want to convert and run the following command: cat "MyFont/..namedfork/rsrc" > "MyFont.dfont"

This will convert the PostScript to dfont.

Through Googling I found a free online converter where you can upload your dfont file and convert it to TrueType(.ttf). You can convert to eot. also but the file it generated didn’t work for me. Instead I used the command line tool TTF2EOT I found via Jonathan Snook’s Font Embed article.

So now I had a .ttf and an eot. file. Next was a working CSS. I used the following CSS code:

@font-face { font-family: 'MyFont'; src: url('fonts/MyFont.eot'); src: url('fonts/MyFont.ttf') format('truetype'); }wrong code, see above update

Good practice shows you have to use the local: method too in case users have the font on their computer. But in this case the chance is of that is neglect able. So I opted to keep the code to a minimum.

The simplicity of font-face makes me really want there to be a license solution for web fonts that doesn’t require an intermediate. I’m not a browser tech, but of if there could be a way to to protect the font files from direct download or an encryption method, that already would go a long way to protecting licensed fonts.

But as long as there isn’t I will use free fonts and in commercial situations Typekit will have to do, that is if they have the font in their library.

For some time already I wanted my own dedicated server, but it would be just a waist of money to get one for this weblog. Also in most cases of working on websites for clients I have to mail their hosting support to fix several things. Did you know that what used to be TextDrive hosting, now Joyent and soon some other company, still has the same unusable admin panel to handle email creation, database, etc. For more then four years already.

Support is something difficult to guarantee, it depends who handles your support more then what the company promises. When I send in a support ticket I always make sure to specify the problem, what I already tried to do to fix it, etc. So it’s obvious that I know my stuff. Yet a lot of time I get replies assuming I’m a noob.

In any case I just wanted full control and want to provide the same for others. So together with someone else we got a dv server(rage) from Media Temple. Yesterday it went online so this week when my new website design is done I’ll be moving this weblog to its new home.

The price range for the packages is based on the market on Aruba and the Netherlands. Also it’s not the intention to stuff the server full with websites risking it to random sites slowing it down or affecting it in any other way. I’ll be doing the support myself together with my server partner. Also I’ll be focusing on clients with no tech knowledge so I’m the one who will be doing the basic things like creating databases, emails, etc.

So in account of all the above I came with Storage Nine. I think of it of web hosting services with a personal touch. In any case it will be for website clients I already have, and small to middle business who need website or/and an email server.

And as an extra because Google tells me a lot of people look for it: a specific package to host your Feed a Fever app. I run my own Fever install on the server and it runs well, it passed the compatibility test without problems. I’ll be doing a write up shortly about how I moved my installation from one host to the other.

So to sum it up I’ll continue my freelance services and now web hosting under Storage Nine.

Yesterday finally inspiration hit me and in four hours I photoshopped and coded a new design for this website. I was messing already a month ago with a new design but I always want too much and to complicated. Then I thought keep graphics to a minimum, keep it simple.

So I did what usually delivers my best design, I started from a photo. I used the sky color for the background, and other hues of blue for the text. Then I tried a contrasting color, I wanted green first but wasn’t real happy with it and then I decided why not yellow. You don’t see a lot of yellow on websites.

For the bold text I went with Courier New, because it is the same font the text of my tattoo is in. And Helvetica for the smaller text. Because Helvetica is cool. And white was just the logical color to go with.

Considering I was keeping graphics at a minimum I still wanted some nice effects, enter CSS3. Here is where CSS3.info came in handy. I know IE7 and lesser don’t support it but I don’t even care for IE6 in connection with my personal website, I leave that headache for work. And people who have IE7 are way more likely to upgrade to IE8.

For the Twitter status and Flickr preview I’m using Garrett Murray’s js_twitter_flickr. He also uses some CSS3 selectors like text-overflow: ellipsis;

Hopefully now with IE8 being released the likes of Dan Cederholm, Andy Budd and Eric Meyer will release books fully dedicated to CSS3. That’s is if they haven’t already, I have to check Amazon for the latest. Meanwhile I’m anciously waiting for A Practical Guide to Designing for the Web to be delivered.

But summing up, after a year and 4 months I have a fresh new design, in my favorite color blue. The WordPress template is clean and validates. Which I couldn’t say of the previous template.