I recently gave a talk at Front End London about creating resolution independent graphics. It was similar to the talk I gave at Responsive Day Out, except that I did a live coding session on animating SVG’s.
The talk went pretty well, but at the end someone noticed that I was exporting my SVG files with 4 decimal places of precision. They asked if that was a little overkill and if I had thought about reducing that down. Embarrassing.
Well in order to redeem myself, I’ve modified the amazing Fireworks plugin, Export and made the changes I wanted to it. These mainly relate to creating much smaller SVG files than the plugin made by default. The original plugin wasn’t bad, but it needed a bit of yak shaving. I’ve called my version SVG for Web.
I feel like I’ve learnt an important life lesson recently. Whilst it’s important to look to your peers for validation, if you can’t trust your own judgement it will always hold you back.
It’s not that I’m shy, and I generally embrace the new in a fearless manner. But when it comes to the role of mentor, I’m always feeling unqualified to put forward my knowledge and opinion.
The Raspberry Pi Foundation and Code Club have the same ultimate goal: to show people that engineering is creative, and improve the education system.
The aim of this event was to devise a way that schools and Code Clubs could teach kids to create something which uses the Raspberry Pi, hopefully by taking advantage of a unique feature of this device.
Whilst working on the upcoming redesign of the Clearleft website, I’ve been ensuring the website is resolution independent. In my last blog post I showed how to use SVG files on the web, and we are using this technique for the Clearleft Logo. There are a bunch of other assets, and for these we are using a custom web font.
Any single colour vector asset will work with this technique. Multiple colour vector assets will need to be a SVG file. But whilst SVGs don’t work in
Android<3, web fonts work in almost every browser.
SVG is a vector format which can be used on the web. They often have smaller file sizes than their rasterised equivalent and more importantly are completely resolution independent. This means they’ll automatically look even better on a retina MacBook, any recent iPhone or any higher resolution device yet to be imagined.
However, there are a few additional steps involved if you want to use SVG graphics today. I’m just going to talk through the steps for using SVG graphics inline here. Most of these steps can be used for CSS background images too.
I was fortunate enough to be at the Responsive Summit last week. Unfortunately many of those who weren’t there responded to this very negatively on Twitter and described the event as elitist. Suffice it to say, I understand where you are coming from, but it just wouldn’t have been possible to have everyone around one table. I think Josh Brewer did an excellent job channeling the questions that were asked from the wider community and submitted on the responsive summit website.
So what knowledge did I gain from this day? We discussed every detail of what it means to create a responsive website. We even discussed future tools for designing websites which respond to their context and new file formats for images which could responsively enhance themselves. I’m really excited about the future of the web, but how can we improve our work using only the tools available today?
I’m now setting expiry headers and gzipping content on this website. I was amazed at how easy it is to get an ‘A’ rating on YSlow.
Any website that uses tiling background images will experience this issue. Whilst the page is loading, the content is displayed before the background images has downloaded, and so the site may look similar to this: