Website Case Study

The willem & øen website displayed on a laptop and smart phoneThis post is about the technology behind our recently relaunched portfolio site and blog. The website works across many different devices and screen sizes. It has a very small footprint of less than 1MB for the entire site. I developed the website and wanted a chance to explain some of the aspects of the site that are working behind the scenes.


SASS or Syntactically Awesome Stylesheets is an extension of CSS that enables developers to write much cleaner CSS and make use of things such as variables and calculations which CSS does not support. Compass is a framework built on top of SASS which adds even more features such as the ability to automatically embed data-uri images and handle a lot of CSS3 vendor prefixing. For example, if you want to add rounded corners to a container, in vanilla CSS to get this working you would have to write:

-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;

Whereas, with compass, you simply have to write:

@include border-radius(15px);

This short expression is then compiled in to the longer code above. It makes developing with CSS much more streamlined and simple.


As CodeKit says on their website, “It’s like steroids for web developers”. CodeKit compiles things like SASS and Compass, it live reloads the browser window so you can see changes as you make them, it concatenates and minifies Javascript and it can losslessly optimise all images that belong to a website. It’s a great piece of software and greatly improves my workflow especially when working with Compass and Javascript. Check out their website to learn more. CodeKit was used during the site development to compile SCSS files and to minify Javascript.


Benjamin Lupton’s History.js is a Javascript plugin that aims to gracefully support the new HTML5 History/State APIs in all browsers. This basically means that using javascript, you can change the entire URL of the page you are on without using things like Hashbangs. This means Javascript can be used to create nice transitions between pages but if the page is refreshed or the back button is used, the transitions behave like a traditional web page does. It also has some SEO advantages because each page, such as /about or /portfolio, does actually reflect a static page. So when Google sees the /about URL and tries to index it, it gets served a static HTML file which contains what the Javascript would eventually transition to.

Other plugins

A number of other very useful Javascript plugins have been used on the site such as:

And for IE (of course) some extras:


The blog uses a custom child theme of Twenty Twelve. The logo has been replaced with a version made up of over 9000 particles that form the text of the logo. When you mouse over the logo the particles are repelled away from the cursor in a circle. This particle logo is inspired by the techniques used in Grumpy Buffalo’s “Text Particles” Chrome Experiment.

Hopefully this post will give you some insight into the development of our new site. If you have any questions about the site’s development then feel free to email me at [email protected]

Also, you should follow me on twitter here.

willem & øen is a creative agency that was founded in London a little over a year ago. Learn more.