Works of Time

As I mentioned in some of my previous posts, I wanted to make Works of Time responsive with version three. But back then I didn’t have enough time to make this come to pass. After completing my previous project (One Planet One World – my first responsive website) and a relative calm period at school I finally found the time I needed.

After almost a month of redesigning, developing and refactoring I’m proud to announce that version 3.1 is completed. While the main focus was to apply responsiveness, I also took the opportunity to make some other minor changes such as the dotted lines used in titles and the overview page for the PCM stages. However, most changes needed to be made because the old situation wasn’t compatible with the new flexible layout. Or because of limitations of mobile and tablet devices.

Continue reading →

After almost two months of designing and developing I’m pleased to announce that the new version of One Planet One World is finished. The new design – nicknamed ‘Rastabar’ after the iconic seperator at the top and bottom of the pages – is fully responsive, so that the viewability remains intact on tablets and smartphones. This project is a first for me, as it was my first website with a responsive and fluid layout.

Continue reading →

Fourth and final destination: Berlin. The biggest city of the four and indeed with to much to see in only two days (I didn’t follow my ‘three-day’ rule this time). My favorite attraction: Zoo Berlin. I nearly spent five hours enjoying the diversity and beauty of the beasts and park as a whole. Most rememberable moment: standing in front of the lion enclosure, while they started to roar! Deafening, brutal and wild. But enough talk, here are some of the photos from the 518 I took in total:

Continue reading →

Third destination: Prague, capital of the Czech Republic. People that played the latest Call of Duty: Modern Warfare (3) game, might recognize some of the buildings in the photographs. For example the Old Town bridge tower or the buildings surrounding Old Town Square. I stayed for three days – the magic number when it comes to visiting most European capitals, in my experience.

I would like to wish everyone happy holidays and a happy new year. It might be the last time we can celebrate them! *dramatic music*

Continue reading →

After publishing the previous post I remembered I took a couple of photos, that could be stitched together into a panorama photograph. Below are some of the more successful attempts – Click for full version.

Rome

Continue reading →

Second destination: Budapest. After a nightly travel from Rome to Vienna, and a beautiful ride along the Danube and Slovakian border by local train I arrived at the Pearl of the Danube. The city with its rich history would be my ‘home’ for ten whole days: three days in the city and seven days on Óbudai island for the Sziget Festival.

Continue reading →

As someone once said: “Winter Is Coming!” A perfect moment to post something about my backpacking adventure through Europe this summer. My journey took me to four countries, their capitals and an island in the Danube for the Sziget music festival. Perhaps the thought of these locations and summery weather might bring you warmth in these cold and dark days at the end of 2011. Instead of a story the posts will mainly feature photos I took. First destination: Rome, Italy.

My main form of transport was by train (I traveled with an InterRail Pass) and that meant sitting in a train for a while… I arrived in Rome 24 hours after leaving Utrecht CS, without any sleep – never take a normal seat in a night train! It couldn’t however stop me playing the tourist shortly after arrival. My visit to the City of the Seven Hills lasted a total of three days. The photos below are only a small portion of the 357 I took during this short stay.

Continue reading →

This is the fourth installment in the ‘Making of Works of Time’ series and continues where the previous post stopped. In which I made a start showing how to get rid of images by using CSS3. This was one of my goals with the new version of my site: “I wanted to use as few images as necessary for styling purposes.” To replace the images I’ve used gradients (see previous post) and box-shadows. This post will look into the latter one.

Before CSS3 shadows could be added through a number of ways: most notable via images or with the use of Javascript. It will do the trick, but when we would look at performance it’s not desirable: you’ll have to load more images/Javascript files. This means more HTTP request and an increase in page loading speed. But now with CSS3 we can simply add a line (in the ideal situation) of code to achieve the same effect. However, in this early state of its implementation it must be said that in some situations box-shadow won’t work the way you would like it to. In some cases you may still end up using images.

Continue reading →

This is the third installment in the ‘Making of Works of Time’ series and will focus on CSS gradients. As I mentioned earlier in the post about version 3.0 I wanted to use as few images as necessary for styling purposes. In version 2.0 I was using two images as background for the header, navigation, footer and content (see below). With the CSS3 techniques box-shadow and gradients I’ve replaced them with a couple of lines of CSS. In this and the upcoming post I’ll demonstrate what was needed to achieve this.

Continue reading →

I’ve been using CSS sprites for some time now and I’m still a huge fan (as far as you could be a fan of a technique) of them. Combining multiple images into one image results in fewer HTTP requests and a faster loading website. The article ‘CSS Sprites: What They Are, Why They’re Cool, and How To Use Them’ on CSS-Tricks shows a good example of this. On the new website I’ve used CSS sprites in seven different places:

• The image gallery menu on the homepage.
• The thumbnails on the portfolio overview page.
• The thumbnails in the image gallery menu used on a portfolio item.
• The logo’s and arrows in the menu and the various small images used for stage information (for example the nation flags) on the PCM Stages page.
• The social network icons in the footer, which I’ll be showing how to recreate in this post.

Continue reading →