wheresrhys

Being a font-end web developer is looking very interesting/scary at the moment. The web is awash with talk of html 5, how we should all be taking advantage of it now, and the various tools by Google and others for making it possible despite what internet explorer fails to implement.

It is, quite literally, mental!*

The last year of my web life has seen me learn more stuff (php, javascript, jQuery, Google Maps, Zend framework and more), more quickly than ever before, and there’s still a load of things uncompleted on my to-do list, Flash being the most prominent hole in my arsenal…

…until now.

My firefox has about 20 tabs open, most of them containing information about my industry that wasn’t very relevant until a few weeks ago. Now, if I’m to keep touting myself as a front-end developer of any quality I will have to learn about:

• Vector graphics and animation, which will mean getting to grips with Adobe Illustrator and some vector graphics oriented javascript libraries which make working with Scalable vector graphics and the canvas element easier
• The not inconsequential lengthening of the list of tags available for use in markup
• Consider using  lot more javascript libraries as my approach to getting websites to work in ie, which runs contrary to what I’ve always done before.
• And many more things, essentially revolving around the fact that so many things that designers would always have liked to do on websites have suddenly become feasible.

On the bright side though, SVG and canvas combined with some other subtler features of html 5 could make Flash relatively obsolete, which increases the value of the time I’ve spent learning javascript. The project I’m about to start working on was initially conceived as a Flash game, but as there’s very little animation involved I was able to propose writing it as a javascript game instead. With html 5′s new features there will be very little to elevate Flash above javascript any more in any context. Html 5 can even natively embed video.

Everything’s going to be alright.**

*I’ve been watching peep show this morning and feel constant urges to write a bit like Super Hans or Jeremy.

** or Mark

Yes I know it’s not finished, but I’m quite happy I’ve managed to create a menu with angular areas just with css… no Flash required!

I can make a ball bounce up and down in flash, and that’s about it. And my javascript is rapidly improving, but still leaves a lot to be desired, but simple animation effects using flash or javascript can really enhance a design.

For example, one of my favourite site-designs, http://www.futurelab.org.uk/ (I love the classy, formal look, aimed at senior teachers, but also with splashes of colour and animation to suggest innovation and fun), uses flash to create a subtle bouncing navigation effect.

So what’s a boy to do?

A week or so ago Sitepoint published a cute little tutorial on how to make surprising animations react to browser resizing… and the magic of it was that it only used a gif and a jpeg to achieve this. Inspired by this, I decided to make the futurelab navigation using just animated gifs, and the results are pretty good I reckon. And it only needs a couple of 1 pixel wide gifs per navigation item – less than 1kb in total. (I also only learned how to make animated gifs in photoshop this afternoon, using this tutorial).

A note of caution: my navigation items are all the same colour, so you’d think I could use the same gifs for each item… but not so. Something to do with how firefox renders animated gifs means it doesn’t animate the hover-off image if it’s used on another navigation item too. The solution is simple: make a few copies of the hover-off gif with different names.