Redesigning thoughts

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.

More in the discussion (powered by webmentions)

  • (no mentions, yet.)