However, if you are still using Internet Explorer 7, it really is time to upgrade to something better. IE7 is more than 6 years old now, and has fallen badly behind in terms of security and standards support.

My primary goal when I set out the design for this update was to make it as simple as possible, and focus the design on the presentation of my best artwork. Everything else has been removed; I’ve cut the page count down from thirteen to just a single page (again with the exception of this blog). Not only does this make it much easier to maintain and update the content, it also focusses visitor attention exactly where I want it: on my artwork.

Although it’s been a lot of work, and there has been a not inconsiderable amount of swearing, developing this new site has been a very rewarding process. I’ve learned a great deal about modern web design techniques, and I’ve tried to roll as much of the new web technologies as I can into the design. This is partly to future-proof the site and keep it viable for as long as possible, but also because I’m a big nerd who enjoys tinkering with this kind of thing.

I’ve tried to make sure that the site works well on the newest generation of mobile and touch devices; it’s retina-ready, so those of you with one of Apple’s super hi-res devices should be treated to my artwork in glorious detail. I’ve used a good deal of AJAX (made a good deal easier by using the excellent JQuery Javascript Library to make sure that there are no unnecessary page loads; my artwork loads “on demand”, so none of the large images get loaded until you click one of the big banners and open up a slideshow; I’ve adopted web font technology, so if you have a browser that supports it, you should see nice, well designed fonts everywhere. I’ve also switched to HTML5, and tried to adopt as many design best practices as I can.

So, was it worth all the effort? Please let me know what you think. You can leave a comment, or tweet me your feedback.

His article outlines the tools needed to create 8-bit PNG files that have a full alpha channel, resulting in huge file size savings if you are willing to sacrifice a small amount of quality be palletising the image. This format is supported natively by Adobe Fireworks, but for those of us stuck using Photoshop, Kornel has even created a free Mac OS application, ImageAlpha, which can convert 24-bit PNG files to this format.

I’ve just performed a quick test on a transparent PNG file, and the combination of ImageAlpha and ImageOptim reduced the file size from 11108 bytes to 2775 bytes, a saving of a whopping 75%. This obviously isn’t an exhaustive test, but it’s a very promising start, and I’m looking forward to letting these tools loose on the images for my new website.

One of the most useful tools I’ve discovered recently is ImageOptim, an open source Mac application that uses several widely available image libraries to remove unnecessary data from common image formats like PNG, JPG and GIF. It’s very simple to use (just drag images into the application window, and leave it to grind away), and the results can be quite amazing. For small PNG files exported using Photoshop’s “Save for Web” tool, I’ve seen file size reductions of up to 95%. Whilst the savings for individual files might be quite small, the cumulative saving across an entire page of images is significant, and well worth the additional step in my workflow.

At the start of the design process I also made the decision to eschew my usual write-everything-myself approach, and rely more on ready-made solutions. This has speeded up the development of my new design considerably, and has resulted in a lot less shouting, head scratching and angry flicking through my Javascript reference book.

The most important decision I made was to adopt the widely used JQuery Javascript Library, a fantastic set of tools that really eases the pain of creating complex, dynamic, cross-browser content. I found the initial foray into JQuery to be a bit daunting, but once I started to understand the basic paradigm, it has made locating and manipulating elements within the DOM far less painful than I’ve found it in the past, and has kept it’s promise of “Write Less, Do More”. I’m only a hobby programmer, with no formal training, so Javascript has always been a bit of a headache for me. Using JQuery has taken a great deal of stress out of the job, and made me attempt things that I would have previously considered too complex or time-consuming.

The second significant decision was to switch to HTML5, and adopt the HTML5 Boilerplate as the starting point for my pages. The Boilerplate contains a set of page templates created using web design best practices, which maximise browser compatibility, and encourage the use of good semantic design. The template is also designed to try and maximise loading and rendering speed, and has proved to be a very useful repository of ideas that have improved my own design practices and approach to page authoring. It has also helped me to make my new design mobile-friendly; without the Boilerplate as a starting point, I suspect it would have taken me considerably longer to get my new design running smoothly of iOS and Android mobile devices.

If you are starting work on a new website design project, I strongly recommend JQuery and the HTML5 Boilerplate to help get a solid design of the ground quickly, and relatively painlessly.

“We are all connected. To each other, biologically; to the earth, chemically; to the rest of the universe atomically.”

We Are All Connected

Also available as a poster.

Strawberry blonde is a character I created several years ago for a mobile phone game by bitBull. She was based on my Manga Fairy, which was I piece of spec work for a book illustration commission (I didn’t get the job).

Strawberry Blonde

Manga Fairy

I’ve also added my FutureQuake Cover to the Comics section of my portfolio. I can’t believe it’s taken me this long to get around to it. I’ll try and put up the pages from the Regrets, Rules and Jellied Eels strip soon, too.