Standards.next
Mid-2009, I worked on the design and css for site of Standards.next, a series of events about the latest developments in web-standards. Coded up in ARIA compatible html5 (with all the new elements!) by Bruce Lawson, who sent out a tweet asking if anyone wanted to design and do the css for it, using the newest technologies, found only in bleeding-edge web-browsers.
Thus, free from (most) commercial constraints, I could use css that only the newest browsers would fully support. This meant @font-face, multiple columns, animation & transitions, box-model adaptations, opacity and (webkit-)gradients. Browsers targeted were Safari 4 (in beta at the time), Firefox 3.5 (in rc at the time), Chrome 3 (which seems to update constantly) & Opera 10 (in beta at the time).
The design should look better & better in future browsers and degrade fairly well in older (current, at the time!) ones. Of course, as this design was built to stress-test browsers, regressions may pop up too.
Due to all that css3 web-font, gradient, multi-column goodness, it's best you click on the image for an enlarged view, or (if you have Safari 4/Firefox 3.5 you can) go visit an archived version of the site. See if you can spot the easter egg! (There's a double easter for Safari/Chrome users.)
Here's what it should look like:
Date: June 2009.
Deliverables: Design & CSS.
Bewonersplatform Zuidas
(Citizens’ Zuidas Platform)
I haven't had time to do a proper write-up yet, but since I've already written about the main innovation — integrating pages and category listings to form easily editable introduction texts for article lists — I thought I should at least add the link to the site in question to my portfolio.
So stay tuned for the full write-up!
Client: Bewonersplatform Zuidas.
Date: 2008-2009.
Bite Size Standards
A site that's sadly gone now, Bite Size Standards was to offer little nuggets of web wisdom. John Oxton got a team together from around the globe to design, build and implement the site. With Andrea Arbogast to take care of the Textpattern CMS integration, Ann McMeekin to advise on accessibility, Prabhath Sirisena to design it and myself to do the html & css, we had a fine team. Using instant messaging and Basecamp to work together, we coded & implemented the site 2 days after the design was complete.
It launched in 2006, but as it doesn't survive today, here's an image of what it should have looked like or visit the templates I put together at the time.
Date: March–April 2006.
Zen as Mondriaan:
Red, Yellow and Blue
My second entry for the CSS Zen Garden, 'Red, Yellow and Blue' has been accepted! As my other entry, 'Mondriaan Zen', I designed this very much with Mondriaan in mind.
Sadly, the design didn't get accepted into the main list of 'official' designs, or get in a book (as far as I know). However, this design is my favourite CSS Zen Garden design. It's clear, crisp and compartmentalised in a way which isn't just reminiscent of Mondriaan's paintings but also supports the information on the page.
Who knows if I'll ever do another CSS Zen Garden design—the challenge is always a pleasure!
Date: 2004.
Placement:
In the CSS Zen Garden category 'minimal'.
Site: Red, Yellow and Blue.
Tech involved: Just CSS, as is the objective of the exercise.
Tools used: Photoshop and Programmers Notepad.
De Goede Herder Parochie Amsterdam
The Goede Herder site was a nice challenge. Not in any technical sense, but design wise. As the target audience for the site isn't going to be web-savvy at all, the site needed to be extremely easy to navigate.
That made the choice for a very clean layout easy and with a few buttons added for increasing text size (and returning it to normal but not, of course, to decrease it) and extra spacing and padding, the design was ready to go in a few days.
To keep site maintenance as simple as possible I went with Lucid CMS, as it empowered me to lock down all unneeded possibilities. Later a simple gallery was needed, so I went with Singapore, as it makes navigating galleries nice and easy.
Client: De Goede Herder Parochie Amsterdam.
Date: 2005 (design updated november 2007).
Site: GoedeHerderAmsterdam.nl
Tech involved: xhtml, css, js and php.
Tools used: Photoshop, Programmers Notepad, Shortstat , Singapore and Lucid CMS.
gameover.com
gameover.com has been postponed indefinitely. Which is too bad, as the design had been fully coded and implemented. In fact, it was one of my best scaling and elaborately designed sites too date.
You can see a bit of the design in the thumbnail to the right.
The pre-launch site was up though, hosting all the map packs for Counter-Strike: Source you'd ever want.
Client: gameover.com.
Date: 2005.
Site: gameover.com.
Tech involved: xhtml, css, js, php and mysql.
Tools used: Photoshop, Programmers Notepad and Xaraya.
Mondriaan Zen
My very first try for the CSS Zen Garden, so I immediately set myself very strict rules to adhere to, of course. First off I wanted to build a design that would not only scale with the window size, it would also have to scale well when the user made the text bigger or smaller.
Secondly, I wanted not to use any css hacks to make the design look good in all browsers. I'd love to tell you that the reason behind that was to preserve forward compatibility, as the hacks might break when browsers get updated. My real reason however is that I'm quite a perfectionist and take great pride in the cleanness of my code (as if anyone will read and judge me by it).
Lastly, it had to look like a page Mondriaan would have made, had he been a website builder. Now the design isn't actually based on a certain painting of his, but it just borrows some style elements, most notably the black bars linking the swatches of colour. This might have given me freedom, but now I had to come up with a design that not only matched up with Piet Mondriaans' work, but be more dynamic than his, as I had to deal with browsers. Because unlike paper, which the designer can choose and acts the same every time, browsers all act slightly different, ruining your layout. (Can you sense the built up frustration?)
With those rules it wouldn't be very easy for anyone. So, of course, I came up with a design that stayed mostly true to Piet Mondriaan's style, but I did make one fatal mistake. I designed it originally on a canvas of 1024 by 768. Where this print, that'd been fine, but on the web, where a third of surfers still use 800x600, it's an horrible mistake. In fact, this made actually building the design about 3 times harder. But I guess that in the end it just all came together, and worked out for the best.
After I'd submitted it, this design even got included in a Japanese book on CSS by Arisaka Yoko.
Date: 2003.
Placement:
In the CSS Zen Garden category 'themes'.
Site: Mondriaan Zen.
Tech involved: pure css, no hacks.
Tools used: Photoshop and Programmers Notepad.
(-AEK-) Another Easy Website
This is the website I coded for my (now defunct) Counter-Strike clan, Team AEK, Another Easy Kill. 
The design was done by another clan member called Link. I built the basic layout in just over
two days, but have been tweaking it after that to make it look pixel perfect in all major browsers.
Originally Link designed the website for 800x600 sized screens, so I adjusted the design a tad to make it completely scalable. It now looks good on practically any screen, be it 800x600 or 1600x1200, on any major browser.
The trick I used to make that possible is having the AEK Dragon logo fixed above the rest on the left, whilst having the other half of the top bar fixed on the right. That way, when the browser window becomes smaller, the right half slides under the logo on the left (See the detail on your right).
For people interested in the olden days, here are two Counter-Strike movies: Link's first (the Limp Bizkit one) and Link's second, unfinished one.
Client: Team AEK.
Date: 2003.
Site: AEK.gameover.com (now defunct).
Tech used: xhtml, css, php and mysql.
Tools used: Photoshop, Notepad, Wordpress, Invision PowerBoard.