Got bored of the old design, did a new one. The old one’s still there;
just switch stylesheets in your browser.
I’m not totally happy with the new one, for a couple of technical
reasons and one artistic reason. However, there are some nice little
tricks in it, I think.
Nice trick no. 1 is that the date, top right of the front page, is
the date of the most recent post. It’s absolutely positioned up there,
and that date is identified with the CSS
selector div#blog h2.date:first-child. Naturally, this will only work
in browsers that support such selectors.
Nice trick no. 2 is that the most recent post looks like a lead story,
which is to say that it’s bigger than the others. Again, just standard
use of CSS selectors, in this case div#blog
h2.date:first-child + div.item (which means “selects any div element
with a class attribute that contains the word item that immediately
follows a h2 element with a class attribute that contains the word date
and that is a first child that is a descendant of a div element with an
id attribute that equals blog“, or in plainer (but less rigorous)
English, “the post item that immediately follows the first date
displayed in the weblog“, i.e., the first post). Blah blah blah browsers
that support such selectors.
I am also, I confess it, childishly pleased at how different it is from
the last one, given that I’ve just changed the
CSS. Yeah, yeah, I know that this is the
point, and I know the Zen garden demonstrates this every day and a
lot better than I do, but it’s been some time since I’ve had two
successive designs that were very different and where I was pretty
pleased with both. Plus, Plato looks cool up there at the top, huh?
Stuff I’m not happy with:
You can’t make stuff really take on the irregular column look of a
newspaper, because you can’t allow arbitrary lengths on the columns and
still have a space-filling design. That’s why they’re all fixed length.
Boo hiss to that, I say, but there is no way around it. I could, I
suppose, work out one single space-filling design and then absolutely
position stuff to get it, but that wouldn’t be a lot better than this
and would be a shitload more work with a ruler, so I haven’t done that.
Fixed-length columns aren’t good because they cut off longer posts,
obviously, as well as making the design too regular (two rows of
stories, rather than them all fitting in randomly).
There’s no way, as far as I can tell, using floats, to have any story
at all appear on the left of the first story. So it has to be the
leftmost. The design fudges this a bit by putting the metadata sidebar
on the left so it looks a bit like a story, but that’s imperfect and
fudgy.
You can’t apply float and position:relative to a thing to get it to be
floated but then get treated as absolutely positioned for the purposes
of absolutely positioning children relative to it. There is a p.comments
paragraph at the bottom of every post (so on most posts it would be
invisible because posts are longer than the allocated length, as above).
I wanted it to appear below the post title but above the post text, like
a byline. But you can’t do that; you can’t say “move it up by the length
of the post” because you don’t know how long the post is. My intention
was to put position:relative on the div containing a post, and then say
“position:absolute; top:height-of-title; left:0” on p.comments, which
would position it height-of-title px below the top of its nearest
absolutely-positioned ancestor (which would be the post itself, because
of the position:relative) and lo, that would look like a byline. But it
doesn’t work; Moz doesn’t seem to recognise it as absolutely positioned,
and so p.comments styled like that appears at the top of the page
instead of the top of the post it’s in. Can’t think of a way of doing
this without JavaScript, which is cheating (although I might do it
anyway).
The “Regular Features” bit looks a bit pants. I wish I had one ounce of
artistic talent.
I can’t have different columns be different widths without hardcoding
the widths, which is dead fudgy again.
You can’t format a post into newspaper columns without doing something
like the IHT’s JavaScript super-complex
thing or finding a browser which supports the
CSS3 multicol spec (none, as far as I can
tell), so, dammit, I have to just live without it.
I can’t think of a way of putting a “More >>” thing at the bottom of
posts if they overflow either, without using JS
(which, again, I am thinking of doing).
I can see how to fix most of my problems (not the one about having the
artistic ability of a glass hammer) with JS, I’m just not sure whether I
want a huge blizzard of JS to run when someone loads the front page…
Addendum: I keep doing redesigns, and then you look back at old
posts which say “done a new design!” and there’s no clue what that
design was. So, new policy: all new designs get a screenshot stored away
so I can marvel at them over time. This design’s screenshot, and
the previous one.
Redesigning thoughts
I'm currently available for hire, to help you plan, architect, and build new systems, and for technical writing
and articles. You can take a look at some projects I've worked on and
some of my writing. If you'd like to talk about your upcoming project,
do get in touch.