Sax and the Pretty

Visit the site:

Bewonersplatform Zuidas (Citizens’ Zuidas Platform)

De Goede Herder Parochie (The Good Shepherd Parish)

The goal

I was approached by The Goede Herder Parochie to simplify the administration of their 100+ page site. With an upcoming transition of site-editors, the site needed to be as easy to administer as possible.

The implementation

The current design was left intact as it fulfilled all the site's needs, but the back-end system was completely replaced. Each page was to continue to be individually editable, with the exception of the Saints Archive, which was fully automated. A new story appropriate for the month is pulled from the system with each visit to bring something fresh to the frontpage.

The result

The new site allows visitors to search it fully and sort the results by date and relevance. Every part of the site is fully WYSIWYG editable. On top of that, the 100+ pages are still presented in a clear tree structure, making the job of administrating the content as easy as possible.

Mid-2009, I worked on the design and css for site of, 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 elements!) by Bruce Lawson, who sent out a tweet asking if anyone 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 & better 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, you'll need an up-to-date browser to view all the design features. See if you can spot the easter egg!

You can visit an archived version of the design here.

Bouwkosten Websites

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.

You can visit an archived version of the design here.

My approach to designing a site

I like to break down the client's brief right down to its core. For the organisation to meet its goals, what does your site need to do? This brings focus to the job at hand and makes sure the project is run as smooth as possible.

Next we talk about the functional requirements. Who is going to edit it? Which parts of the site need to be dynamic? How can we minimise work for the persons administrating the site? Creating a site that fits the workflow of an organisation as much as possible really pays dividends.

Then we talk budget and content. Having content available not only speeds up the development of a site considerably, it's also a necessity, as good sites are designed to present the available content optimally. These talks inform the site structure and wireframes.

Separate talks are held for the visual concept of the site, from which the graphic design of the site follows. The design is then coded up in modern web standards html 5 and css, tested in all relevant browsers and integrated with the content management system chosen. Time spent coding the templates for the content management system depends on the site structure and the number of dynamic elements the site requires. This is why these elements are all individually costed and budgeted beforehand.

Once the foundation of the site is complete, the site administrators can come in and add content to the new site. Before the site is taken live, pages are checked and double-checked to see if everything works and looks perfect.

Why I use web standards

My sites are as com­pat­ible with web stand­ards as they can be. This ensures that the sites in ques­tion will be optim­ised for search engines, as they’re more semantic and use the new­est web stand­ards.

Why be semantic? Well, look at it this way: If you want to stand out from a crowd while still look­ing respect­able, you get a tailored suit. It’ll give you cred­ib­il­ity and atten­tion. Having a semantic web­site is much like a tailored suit; It gives the con­tent more cred­ib­il­ity in the eyes of search engines. More cred­ib­il­ity gets the site a bet­ter rank­ing, res­ult­ing in more visitors.

Of course, once you’ve actu­ally got vis­it­ors, the site needs to be easy and fast, while still pleas­ing the eye. That’s why my designs don’t stop at being semantic. I go the whole way by focus­sing on structure, con­sist­ency and bal­ance.