Guus Bosman

Over the last few weeks I have worked on a new version of this website. The most important goal of my website is to stay in touch with family and friends, but it also serves as an online business card for my work as software engineering manager. And, to be honest, the site was getting a lit bit old and needed a fresh lick of virtual paint. Most importantly, I wanted to make the site work better on mobile phones and on the iPad.

In April I read Ethan Marcotte's Responsive Web Design and that inspired me to work on a new Drupal theme. I based it on Dave Gamache's Skeleton CSS framework and modified it to my needs. This is the first major redesign since March 2007.

The changes

• Anonymous users now go to a new landing page, instead of going to the blog
• Logged in users will continue to see the blog as the main page. This way, there is a specific a page that I can tailor for people that don't know me in person, with a focus on my business persona.
• The HTML is completely HTML5 compliant (I need to take care of 1 last non-validating item, related to the Boost caching mechanism)
• The layout of the website is now mobile-friendly. You can see the effect by resizing the window of your browser. It gently collapses into a single row of nicely readable text. A couple of smart tricks around the menu (using CSS3 media queries) does the rest.
• Last but not least, after 12 years I am updating the icons on the site.

New icons

With the new style of the website came the realization that the old icons were, well, old. I created them myself over the years and there wasn't a lot of consistency between them. Moreover, they were created with a size limitations of 32x32 pixels and there's no way to scale them up since I created them as bitmaps.

In my previous job we worked with an off-shore company that creates icons, and for a small fee we got access to a library of many hundreds of thousands of icons. I started looking for something similar and ultimately decided on using Odesk.com, a global job marketplace, to find a contractor. I placed a contract and received 9 bids, of which I selected Hungary based freelancer Zsolt Markus.

He did a great job and recreated many of my icons as vector images, with a good eye for detail. The icons are now on the site, in a 64x64 pixel format, and if I ever want to resize them or tweak them I now have Adobe Illustrator vector files available.

Still to do

There are still a couple of bugs to work out. If you come across any issues, please let me know. Here is a list of things I'm working on:

• Formatting of top menu on the iPad is not correct (for logged in users)
• The input field for comments is very small
• The login form on the /welcome page doesn't work yet.

It was fun to redesign the site, and learn something about HTML5 and CSS3 in the process. If you come across any problems or have any suggestions, please let me know.