The most difficult website to design in the world…ever!

It’s a task all web designers face eventually - redesigning your own site.

Every redesign for Cleardrop entails much internal debate (in my head) and hand wringing. And all that before I even get to deciding what colour the damn links should be! While it’s nice to have absolute creative control of a site, it’s certainly a double edged sword; that creative freedom can breed never ending tweaks and ‘what if’ moments.

For most sites, content is often the trickiest element to get right and that’s how it should be. For Cleardrop however, the content is straight forward; a portfolio, a tiny bit about me and contact information. I've long since got past the need to include the marketing spiel that is prevalent on so many sites. Whether included for 'SEO' or to make the site, company or individual look bigger and more impressive, it rarely adds value for clients, actual or potential.

The hardest part about pulling content together for Cleardrop? Portfolio size. Since Cleardrop has been trading since 2001 there’s a huge catalogue. Of course, as is the nature of the internet, much of that work is either no longer online, technically dated (Flash anyone?) or was designed for another era. Plus, I know full well from my own viewing habits, user fatigue hits well before the ninety seventh portfolio piece, so a curated selection of only very recent work is all that’s to be found here.

So, the design. I imagined all manner of crazy whizz bang designs and effects, but in the end settled on a minimal one page format with some modest transitions. There’s always a danger of effects and styling distracting from actual content and since I always try to avoid that for client work, I didn’t want to fall into that trap myself.

No redesign is complete without sweating the details of the HTML and CSS. The HTML5 is (hopefully) as concise as possible for the purposes it serves. The CSS is authored via SASS, which I’ve adopted recently. The animations are pure CSS, triggered by Javascript.

The backend (which isn’t complicated for a site like this!) is custom PHP and uses my own content management / blogging system - more on that in a future post!

Everything was authored in my code editor of choice Coda with a helping hand from the wonderful CodeKit.

Oh, and the links colour is #00aadd. At the moment…