Works of Time

It has almost been a year since I released version 2.0 of my website, and in the meanwhile things have changed in the web development world. Furthermore, I thought it was time for  a new and somewhat more professional look-and-feel. These factors turned out to be good incentives to think about and work on version 3.0. Today around midnight I’ve put the result of almost a month’s work online.

I encourage all to browse trough and experience  the website and form opinions, give feedback, give compliments and share it via a comment or e-mail. At the bottom of this post a comparison between version 2.0 and 3.0 can be seen, and in the post ‘Works of Time 2.0‘ you can even see how it all begun with version 1.0.

Some of the most important changes in v3.0 are listed below:

• New design: the look-and-feel has been changed by applying a new design: removed the overabundance of orange (especially in the background), overall the website is larger, there is more dynamic via the image galleries, the logo has been stripped of its ‘dog bones’ and much more…
• HTML5: while version 2.0 already made use of the new semantic elements, I further improved the use of them and also implemented them in my weblog. Which was still using an old xHTML theme, while this time I used the Roots theme. I’ve also made use of HTML5 Boilerplate (Press CTRL+A and enjoy ‘hot pink’ =P ).
• CSS3: one of the new and upcoming techniques is CSS3 and up until now I didn’t do much with it. Therefore I thought it to be an ideal situation to experiment with it.  Beforehand I made the challenge to use as few images as necessary for styling purposes. By using techniques as box-shadow and gradients I’ve made half of the images involved in version 2.0 obsolete.
• 960 Grid System: “The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels.” [Source] Because of this grid system the site has become broader than it was before (from 850 pixels to 960 pixels).
• Need for Speed Xtended: I’ve put even more time and dedication in optimizing the website and achieved an average page speed score of 95/100. How? Trying to have as few files as possible: combining CSS & Javascript files and combining images into Sprites. And to make the files as small as possible: gzip compression and minifying CSS & Javascript files.

Used Techniques (Libraries/Frameworks):

• HTML5 (HTML5 Boilerplate)
• CSS3 (960 Grid)
• Javascript (jQuery Library, Selectivizr)
• PHP
• XML
• WordPress CMS

While I’m pleased with the result, there are still some things I would like to look further into, such as responsive webdesign. But there are some time consuming circumstances (mainly school related) that have a higher priority. I’ll ofcourse make a post about it when I finally found time for it. However, you can expect posts in the near future about some of the things I learned/worked with, like CSS transitions.