Standards.next

Mid-2009, I worked on the design and css for site of Standards.next, a series of events about the latest devel­op­ments in web-standards. Coded up in ARIA com­pat­ible html5 (with all the new ele­ments!) by Bruce Lawson, who sent out a tweet ask­ing if any­one wanted to design and do the css for it, using the new­est tech­no­lo­gies, found only in bleeding-edge web-browsers.

Thus, free from (most) com­mer­cial con­straints, I could use css that only the new­est browsers would fully sup­port. This meant @font-face, mul­tiple columns, anim­a­tion & trans­itions, box-model adapt­a­tions, opa­city and (webkit-)gradients. Browsers tar­geted were Safari 4 (in beta at the time), Firefox 3.5 (in rc at the time), Chrome 3 (which seems to update con­stantly) & Opera 10 (in beta at the time).

The design should look bet­ter & bet­ter in future browsers and degrade fairly well in older (cur­rent, at the time!) ones. Of course, as this design was built to stress-test browsers, regres­sions may pop up too.

Due to all that css3 web-font, gradi­ent, multi-column good­ness, 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 ver­sion 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:

• Client: Standard.next (supported by Opera).
• Site: visit an archived version of the site.
• Deliverables: Design & CSS.
• Date: June 2009.

Bewonersplatform Zuidas
(Citizens’ Zuidas Platform)

I haven’t had time to do a proper write-up yet, but since I’ve already writ­ten about the main innov­a­tion — integ­rat­ing pages and cat­egory list­ings to form eas­ily edit­able intro­duc­tion texts for art­icle lists — but stay tuned for the full write-up!

• Client: Bewonersplatform Zuidas.
• Site: Bewonersplatform Zuidas.
• Date: 2008-2010.

De Goede Herder Parochie Amsterdam

The Goede Herder site was a nice chal­lenge. Not in any tech­nical sense, but design wise. As the tar­get audi­ence 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 lay­out easy and with a few but­tons added for increas­ing text size (and return­ing it to nor­mal but not, of course, to decrease it) and extra spa­cing and pad­ding, the design was ready to go in a few days.

To keep site main­ten­ance as simple as pos­sible I went with Lucid CMS, as it empowered me to lock down all unneeded pos­sib­il­it­ies. Later a simple gal­lery was needed, so I went with Singapore, as it makes nav­ig­at­ing gal­ler­ies nice and easy.

• Client: De Goede Herder Parochie Amsterdam.
• Site: GoedeHerderAmsterdam.nl.
• Deliverables: Design & CMS.
• Date: 2005 (design updated november 2007).
• Tech involved: xhtml, css, js and php.
• Tools used: Photoshop, Programmers Notepad, Singapore and Lucid CMS.

Candy by James
(2nd version ~ Candy Deux)

I’ve finally got­ten round to tweak­ing this site into shape. I’d already ditched the ver­tical bars, but the align­ment still wasn’t right and the code was get­ting mud­dier and mur­kier. Seeing as how the spring 2006 CSS Reboot was just around the corner, I had a dead­line: 1st of May 2006.

Notable changes are the gen­eral shifts in align­ment (not just for improved flow, but also to give me more room for in-line images), the back­ground and nav­ig­a­tion bar col­our shift (both are now slightly lighter) and boxes around the com­ments (just like noscope — I plead guilty!). I’ll have to redesign the com­ments once I enable gravatars too (instead of just favicons), but this will have to do for now.

New addi­tions are Cameron Moll’s icon to my inspir­a­tions list (not that he’s a recent find, but up till now I didn’t have a good icon to work from), “latest com­ments” in the side­bar and a (slightly dif­fer­ent one from on the main page) side­bar for the single-post pages (just click a title to get to them).

• Client: Myself.
• Site: Candy by James (2nd version).
• Date: 2006.
• Tech involved: html & css.
• Tools used: Programmers Notepad & Photoshop & Wordpress.

Bite Size Standards

A site that’s sadly gone now, Bite Size Standards was to offer little nug­gets of web wisdom.

John Oxton got a team together from around the globe to design, build and imple­ment the site. With Andrea Arbogast to take care of the Textpattern CMS integ­ra­tion, Ann McMeekin to advise on access­ib­il­ity, Prabhath Sirisena to design it and myself to do the html & css, we had a fine team. Using instant mes­saging and Basecamp to work together, we coded & imple­men­ted the site 2 days after the design was complete.

It launched in 2006, but as it doesn’t sur­vive today, here’s an image of what it should have looked like or visit the tem­plates I put together at the time.

• Site: is archived here: Bite Size Standards.
• Date: March-April 2006.

gameover.com

gameover.com has been post­poned indef­in­itely. Which is too bad, as the design had been fully coded and imple­men­ted. In fact, it was one of my best scal­ing and elab­or­ately designed sites too date.

You can see a bit of the design in the thumb­nail to the right.

The pre-launch site was up though, host­ing all the map packs for Counter-Strike: Source you’d ever want.

• Client: gameover.com.
• Site: gameover.com.
• Deliverables: 2005.
• Tech involved: xhtml, css, js, php and mysql.
• Tools used: Photoshop, Programmers Notepad and Xaraya.

Zen as Mondriaan:
Red, Yellow and Blue

My second entry for the CSS Zen Garden, ‘Red, Yellow and Blue’ has been accep­ted! As my other entry, ‘Mondriaan Zen’, I designed this very much with Mondriaan in mind.

Sadly, the design didn’t get accep­ted into the main list of ‘offi­cial’ designs, or get in a book (as far as I know). However, this design is my favour­ite CSS Zen Garden design. It’s clear, crisp and com­part­ment­al­ised in a way which isn’t just remin­is­cent of Mondriaan’s paint­ings but also sup­ports the inform­a­tion on the page.

The design is cur­rently used, with per­mis­sion, by Astronomics pro­fessor Paolo Paolicchi.

• Site: Red, Yellow and Blue.
• Date: 2004.
• Tech involved: Just CSS, as is the objective of the exercise.
• Tools used: Photoshop and Programmers Notepad.

Mondriaan Zen

My very first try for the CSS Zen Garden, so I imme­di­ately 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 win­dow size, it would also have to scale well when the user made the text big­ger 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 pre­serve for­ward com­pat­ib­il­ity, as the hacks might break when browsers get updated. My real reason how­ever is that I’m quite a per­fec­tion­ist and take great pride in the clean­ness of my code (as if any­one will read and judge me by it).

Lastly, it had to look like a page Mondriaan would have made, had he been a web­site builder. Now the design isn’t actu­ally based on a cer­tain paint­ing of his, but it just bor­rows some style ele­ments, most not­ably the black bars link­ing the swatches of col­our. This might have given me free­dom, 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 dif­fer­ent, ruin­ing your lay­out. (Can you sense the built up frustration?)

With those rules it wouldn’t be very easy for any­one. So, of course, I came up with a design that stayed mostly true to Piet Mondriaan’s style, but I did make one fatal mis­take. I designed it ori­gin­ally on a can­vas of 1024 by 768. Where this print, that’d been fine, but on the web, where a third of surfers still use 800×600, it’s an hor­rible mis­take. In fact, this made actu­ally build­ing 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 sub­mit­ted it, this design even got
included in a Japanese book on CSS by Arisaka Yoko!

• Site: Mondriaan Zen.
• Date: 2003.
• Tech involved: pure css, no hacks.
• Tools used: Photoshop and Programmers Notepad.

(-AEK-) Another Easy Website

This is the web­site I coded for my (now defunct) Counter-Strike clan, Team AEK, Another Easy Kill. The design was done by another clan mem­ber called Link. I built the basic lay­out in just over two days, but have been tweak­ing it after that to make it look pixel per­fect in all major browsers.

Originally Link designed the web­site for 800×600 sized screens, so I adjus­ted the design a tad to make it com­pletely scal­able. It now looks good on prac­tic­ally any screen, be it 800×600 or 1600×1200, on any major browser.

The trick I used to make that pos­sible is hav­ing the AEK Dragon logo fixed above the rest on the left, whilst hav­ing the other half of the top bar fixed on the right. That way, when the browser win­dow becomes smal­ler, the right half slides
under the logo on the left (See the detail on your right).

For people inter­ested in the olden days, here are two Counter-Strike movies: Link’s first (the Limp Bizkit one) and Link’s second, unfin­ished one.

• Client: Team AEK.
• Site: AEK.gameover.com (now defunct).
• Date: 2003.
• Tech involved: xhtml, css, php and mysql.
• Tools used: Photoshop, Notepad, Wordpress, Invision PowerBoard.