The IF Archive CSS Competition

The IF Archive Maintainers have challenged the world to make the Archive prettier. The competition is now over. It ran from January 5th to February 16th, 2009.

(For reference, here are the rules of the competition as we ran it.)

---

The Outcome

The last two columns are the number of ballots each entry appeared on, and the number of ballots it appeared first on. The final ranking was computed by my favorite Ranked Pairs algorithm.

Place	Title	Creator	Votes	First
1	Chartist	Chris Klimas	52	44
2	Very Simple One	Eric Forgeot	17	2
"	Black, Blue, Columns, Icons	Dave C	15	2
4	Sea Plain	Andrew Plotkin	15	5
5	Grey	Mark J Musante	11	0
6	Sans Serif Square	Watts Martin	12	1
7	The Original	Andrew Plotkin	8	4
8	The Café	Paolo Pellegri	5	1
9	Black and Tan	Mark J Musante	7	2
10	Simp1e	Peter Mattsson	6	2
11	Halo	David Knott	5	1
12	Color Blocks Example	Andrew Plotkin	3	1

The Entries

Starting with the winner, and moving down the ranks of the Popular Choice vote:

• Chartist
  • Chris Klimas
  • Submitted: 11-Jan-2009
  • View: front page, top index, generic index, directory list, info page
  • Comments: This theme uses the HTML as-is. The image on the home page is detail from a map drawn in 1656 of what is now New York, and is in the public domain. (Original)
• Very Simple One (tied for second place)
  • Eric Forgeot
  • Submitted: 6-Jan-2009
  • View: front page, top index, generic index, directory list, info page
  • Comments: It's a style I'm using on other project, but I like it as it's clean and simple.
• Black, Blue, Columns, Icons (tied for second place)
  • Dave C
  • Submitted: 11-Jan-2009
  • View: front page, top index, generic index, directory list, info page
  • Comments: A straightforward two-column design; black text, blue hyperlinks. Folder icons were added for directories where possible. No HTML modifications.
• Sea Plain
  • Andrew Plotkin
  • Submitted: 13-Jan-2009
  • View: front page, top index, generic index, directory list, info page
  • Comments: Small changes to the HTML layer.
• Grey
  • Mark J Musante
  • Submitted: 9-Jan-2009
  • View: front page, top index, generic index, directory list, info page
  • Comments: This does not require any changes to the html files. It's also designed to look reasonable on an iphone.
• Sans Serif Square
  • Watts Martin
  • Submitted: 10-Jan-2009
  • View: front page, top index, generic index, directory list, info page
• The Original
  • Andrew Plotkin
  • Submitted: 1998 some time?
  • View: front page, top index, generic index, directory list, info page
  • Comments: This is what everyone started with.
• The Café
  • Paolo Pellegri
  • Submitted: 22-Jan-2009
  • View: front page, top index, generic index, directory list, info page
  • Comments: Very small changes to the HTML. Mostly brown colour palette. Sound typography.
• Black and Tan
  • Mark J Musante
  • Submitted: 16-Jan-2009
  • View: front page, top index, generic index, directory list, info page
  • Comments: A two-column layout with a black background. This layout does have some (very small) html tweaks.
• Simp1e
  • Peter Mattsson
  • Submitted: 8-Feb-2009
  • View: front page, top index, generic index, directory list, info page
  • Comments: Aims to be simple and clean, with only very minor HTML changes. Untested in IE, but IE-related issues will be fixed promptly.
• Halo
  • David Knott
  • Submitted: 8-Jan-2009
  • View: front page, top index, generic index, directory list, info page
  • Comments: I tried to stay true to the original design and stay in gray scale. The quote box stays the same, but I added a custom background style.
• Color Blocks Example
  • Andrew Plotkin
  • Submitted: 5-Jan-2009
  • View: front page, top index, generic index, directory list, info page
  • Comments: This colors each CSS class a different color, so that you can see the document structure.