I can be fickle.

Last July when version 4 of my website was first introduced, I thought that was it. That was what I envisioned my style to be, and that’s what I wanted the website to reflect – class, elegance, but with a casual approach.

This is what it looked like. You can view the larger versions here and here.

The quest for perfection

There was nothing wrong with the website. Design-wise and technically it was ok and would probably pass a web designer or web builder’s standards. There was just some limitations and flaws that I saw (way too well, since I built it).

So long story short, in the beginning of December I started to put my head into building a new design, and I am proud to unveil to you version 6 (yup, skipped a version) of kelvincheong.com.

Yup, this is how fickle I can be sometimes. The quest for perfection never ends, but still must the artist pursue it.

About this website

Design

I thought white text on black background would be ok. I was wrong. It was hard to read, and if I were to make the text bigger and more obvious, it would have spoilt the look of the site.

I thought it would be ok to load version 4 on an iPhone. Not a great experience. The picture gallery function, which works well on PC, does not work well on mobiles. So loading up each image was a real pain.

Technical

For the web designer.

This website is compatible with all major up-to-date browsers, in every screen resolution, and degrades nicely with IE 6 and 7. Media queries incorporated to make it work with iPhones too (untested with other mobiles).

I dare you to try it. Try resizing your current browser window from full screen to very small.

It’s not easy for web designers to build a website that has to be compatible with everything. And by everything, I mean

1. The ever head-wrangling Internet Explorer and all its quirks. Seriously, if you’re still using IE, either a) upgrade to version 9 beta or b) use something else, like Firefox or Chrome.
2. Mobile devices. iTouches, Androids, Windows Mobiles, Blackberries, there’s heaps of them out there with a variety of screen resolutions.

How does one do it? That issue bugged me since last July until I read the article by Ethan Marcotte’s article on Responsive Web Design, published by A List Apart on May 25, 2010. And “Click!” the light bulb switches. I saw hope. That was when I started on the quest of redesigning.

I drew a lot of inspiration from examining and studying Jon Hick’s design (which is based on the Responsive Design technique as well). Amazing work. I could never come close to it.

Also I had help to combat the evil IE and incorporate HTML5 and CSS3 into IE using this and this.

The superb supersized! jQuery plugin for my fullscreen background and slideshow homepage was created by by Zach Dunn.

And lastly Eric Meyer had a hand as well in his CSS Reset file.

WordPress

I love WordPress. Ever since I started using it last year it’s been a great experience. Joomla is great, but we’re talking apples and oranges here. Both great systems, but a different vision altogether.

Limitations

There’s a limit to everything. And as Zach Dunn puts it, perfect isn’t practical. I’d never finish a website if it has to be perfect.

1. The portfolio site isn’t as great as I’ll like it to be. Still have yet to find something that suits a desktop and mobile experience. Update: Have changed the portfolio site to a Lightroom plugin from the Photographer’s Toolbox. Still not perrrfect, but looks great and works great on desktop and mobile.
2. The disadvantage of Responsive Web Design is that all images loaded are at its full resolution (meaning it’s gonna suck up bandwidth quicker), just that it’s CSS magic. Ethan’s followed up with a Responsive Images technique, but I don’t know how to integrate it with WordPress yet.

And there you have it. Version 6.