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?
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
The fact that I use SVG for icons on my website also helps shrinking the payload, making my homepage weigh in at around 70k.
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.
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.