The mindset behind this website

The sad thing about our work is that we never get to be truly progressive. When doing projects for clients, we always take care of the older browsers with extra stylesheets, scripts and in the worst cases, hacks. But every once in a while an opportunity arises where we can push all those restrictions aside and go nuts with new stuff.

Grabbing that chance

When I started thinking about this website and what it was to be, I kept two noble thoughts in the back of my head. Progressive and lightweight. In that order. Which means that I wasn’t going to sacrifice new techniques just because they are heavier (in both page weight and/or resource usage) than what we are used to working with.

What you see in front of you is a fully responsive website that has some pretty nifty new technologies under the hood. Want to take a peek?

The header

Let’s start with the header, it’s actually the icing on the cake, but who doesn’t like starting with the best part? The background is a post specific image that is blurred out by the SVG element. To make the whole thing responsive, some Javascript takes care of scaling the SVG element and making sure the dynamically loaded image gets stretched appropriately.

My name and title is a canvas drawing to achieve the pattern shadow behind my name. This also gets re-sized by Javascript to accommodate smaller screens.

Icons & Logo

All icons you see are part of an SVG sprite. Why? Because Retina! Since SVG is a vector based way of drawing (as opposed to bitmap), it will be drawn on the user’s screen as a shape rather than pixel by pixel image, as is the case with .jpg, .gif, .png and so on. Which means that even if Apple comes up with a screen that has 8 times the pixel density of what we now know as ‘retina’ next year, my icons will be up for the challenge.

Like a feather

Being progressive means not looking back. I don’t load any scripts that make older browsers compatible with my code like Modernizr, I don’t write any extra CSS for older browsers and I don’t write any Javascript fixes. I also don’t load jQuery as I feel I can code everything I will do on this website in Vanilla JS. That’s right, plain old Javascript.

The fact that I use SVG for icons on my website also helps shrinking the payload, making my homepage weigh in at around 70k.

Support

The support for the stuff I use is quite good and improving daily. IE – of course – lags behind, nothing new there. You get something similar in IE9 but anything lower doesn’t even come close to what it’s supposed to look like.

Looking back

Thinking progressively has taught me to not be afraid of new technologies. This website in particular convinced me about SVG. I’m sure that together with icon fonts it will take over from png image files as far as icons and certain logos are concerned.
It has some great image manipulation features as well but be careful, re-sizing a manipulated image can get quite heavy for some browsers.

I’ve been a big fan of the canvas element from the start and I will be posting some stuff I made a while a go on here as well. You can do anything on a canvas.

Even though we have to be quite conservative in our field, disregarding the past can be quite an eye opener. Using all this new and upcoming stuff can be both educational and entertaining.