You may recall that I was building up to some serious redesigning the other day. I had some ideas as to what I wanted, and some recent WP designs that had got me thinking.
Well, here it is. I like it and I hope you do too. I think it makes a nice change from the usual way of doing these things.
I think this is pretty much done now. I probably have one or two little extra features I want to add later, but it’s time to take a break.There’s one or two little odd behaviours in IE that I need to work out (nothing serious as far as I can tell), but everything seems right in Firefox. I haven’t checked it in Opera yet.* Finally, if someone can test it out in Safari** for me and see if there are any problems, that’d be much appreciated (though I can’t promise to be able to do anything about them).
(Much of the rest of this post will be deeply boring to most of you. Stop reading now unless web design turns you on.)
It was a matter of working out just what I wanted and what I really wanted rid of – and then finding out what was possible (or to be more precise, what I was able to work out).
It struck me that what was really grabbing me about some of the new designs was not that they jettisoned scrolling (I don’t mind a bit of scrolling, within reason), but that they got rid of the sidebar. I hated those sidebars. So what if they’re the norm? I didn’t want to lose all of the information conventionally contained in sidebars (although no question that mine had got filled up with a lot of baggage), but how to escape from them while retaining key information in a convenient location?
As a solution, I stole the idea of the central horizontal menu bar below a single post on the front page from Squible. But I didn’t want the rest of that package. I wanted more posts on the front page in the conventional manner, to run below the horizontal bar (and I didn’t want just short excerpts. You’d think it’d be possible to alter the default length of excerpts (120 words), wouldn’t you? But no, apparently not).
I wasn’t entirely sure if breaking up posts on a page in this way was actually possible in WP. The solution I discovered was a template tag I hadn’t noticed before: get_posts, which allows you to do exactly that (by creating ‘multiple loops’ within a page, for those familiar with the WP terminology).
So on the front page there’s now a ‘middlebar’ and ‘bottombar’, which have been seriously streamlined compared to the old sidebars. I’m also thinking about whether it’s possible to put a bit more info on other pages without cluttering it up again. We’ll see.
…………
*Update: Opera seems fine except that there’s a clear space 20-ish [now reduced to about 10] pixels wide down the right-hand margin of the page. No idea why (I’ve noticed that it does the same thing to EMR, to a lesser extent). And IE has a funny little bug I haven’t quite figured out: the white border line down the left-hand side of posts should start right below the underlining on the post title, but it doesn’t always show properly (on my screen anyway). [Both of these are fixed. I think.]
**Further update: found a useful tool for this: iCapture takes a screenshot of how your webpage looks in Safari. There was a problem with the middlebar which I think I’ve sorted out. Other than that, one or two very minor variations that I can live with.
Early Modern Notes 
Ooh! Pretty! Neat! Tidy! Yum! Nice work Shaz.
Hi Sharon. Just trying the new style in Safari. Seems ok, but it also has the mysterious 20-odd pixel blank on the right-hand edge. Other than that, looking good!
I am flummoxed by it … It looks cool, but seems not-intuitive for me!
Interesting! I’m always of two minds with my own blog design. I like to have the extra information close to hand, yet I don’t want to overwhelm my readers and their browsers with so many non-compliant sidebars. . . .
Your solution seemes pretty elegant!
Conor, thanks for taking a look at that. I’m coming across references to Opera treating vertical margins/borders slightly differently to other browsers, but nothing specific enough as yet to fix the issue properly. Though I have managed to narrow the gap and I did at one point get rid of it altogether, but only by messing up the width in Firefox. (So I know I’m on the right lines I suppose.) What I know is that I won’t be able to leave it alone until it’s fixed even though it’s really pretty insignificant. Sad sad sad.
ADM: can you be more specific? (Email if you prefer.) Is it just the initial unfamiliarity or do you have a really big problem here? No matter how cool and pretty a design is, it’s no use if it’s going to put readers off. I might decide to put a sidebar back on the front page (but individual posts will be staying as they are).
Maybe I should run a vote on who likes it and who doesn’t after everybody’s had a while to get used to it… And if one of the elements that’s been taken off the front page was something that anyone here found really useful and misses horribly, let me know. I do miss having a recent comments thing near the top of the page and I have a possible idea for that.
Is the title ironic or is the background genuinely pink? I can’t tell which colour it is. It’s not important though as the contrast between background and text makes it eminently reasonable. I think it’s an innovative design and the first impression is that it does its job really well.
On my laptop it’s pink (or at least fleshy-pinkish): the hex code is FFEECC. I seem to recall some disagreement on this point before, and I think it does look a bit different (more yellowy?) on my office computer. Or used to on my old office computer. I’ll check that this week… I might change it to something more definitely pink-pink in the same zone.
(And on the laptop anyway, Rob definitely takes the prize for the most colour-coordinated gravatar!)
Have looked at a couple of Safari screenshots and the right margin now seems to be fine there too. But a couple of nagging issues still. One, there’s a horizontal gap between the bottom-bar and the footer which is not meant to be there; I’ll have to look into that. Secondly, do any Safari users know how to override whatever creates that silver Search button (and ditto for the Submit button for comments) and the silver border around the search box? It’s quite a pretty effect normally, but I want them to blend in!
we like it. great job!