Slashdot (re)Design

Posted at 9:29 PM on May. 13, 2006

I submitted an entry to the Slashdot Redesign Contest. The main criteria was for the design to retain visual continuity with the old Slashdot, from the shade of green (#066) to the Slashdot logo in Coliseo font.

Here's my final design (click to view the actual page):

Kira's Slashdot Design


I was really happy with how it turned out. It even got a mention in Taco's journal, so I suppose he liked it somewhat.

While this was quite the time sink, I did learn some useful things from the experience. A friend told me about the Web Developer Extension for Firefox. It's got so many useful tools for developers, I'm ashamed I hadn't been using it before. For the Slashdot project, the most useful feature was "outline current element", which helped me pick out just which div box I was looking at (and trying to adjust).

I also learned how to do expanding menus solely with CSS - no JavaScript required. Actually I just applied the info from the Pure CSS Menus page to my design. It involves nested <ul> blocks, some :hover elements, and the > selector.

Unfortunately the expanding menus don't work at all in IE... and IE had other bizarre malfunctions with the design (such as a huge gap between the topbar and the content). Fortunately, there's a way to add an IE-specific style sheet that will be ignored by other browsers:

<!--[if IE]><link rel="stylesheet" type="text/css" media="screen, projection" href="iestyles.css"><![endif]-->


This site has more info about it.

Home Permalink No comments