Home > Metablogging > New layout

New layout

January 20th, 2005

Reader Nick Caldwell kindly took the trouble to supply me with an alternative layout for the blog, which I’m now testing. Unfortunately, I haven’t got the header working yet, but hopefully I can fix that soon. In the meantime, I’ll ask for comments from readers on any of
(i) The changes to the layout of the main post section
(ii) Readability problems created or resolved
(iii) Links column on left rather than right
(iv) Anything else

Update Thanks to all who’ve commented, favourably and otherwise. Some further points

1. I plead guilty to asking for more red in Nick’s original design, resulting in the terrible puce/mushroom you see now. My color intuition is woeful, I’m afraid. If anyone can suggest a better colour scheme that I can easily implement, please do so. In the meantime, I plan to go back to Nick’s original.

2. I’ve now managed to get the links to the header working, and Nick has supplied more CSS which implements Textile footnotes properly. Great!

3. I’m still not happy with the sidebar, but I definitely like the changes in the main body.

Categories: Metablogging Tags:
  1. January 20th, 2005 at 16:43 | #1

    The front page looks fine but individual entries go over 800 pixels width in Opera 5.12 and are creating scrolling.
    The comment entry box appears to be the culprit here. Possibly shrink it down some?

  2. January 20th, 2005 at 17:48 | #2

    Yes, the comments box and the trackback URL are too wide for the page. Easily fixed, though.

  3. January 20th, 2005 at 20:16 | #3

    sort of devastated that the testimonials are back in front of the recent comments

  4. privo
    January 20th, 2005 at 20:24 | #4

    Argh my eyes…the goggles…they do nothing. Seriously though this is a pretty ugly layout. And this pinky brown colour is not very flattering Mr Quiggin I must say. Moving all the links on the left smacks of taking a political orientation too far (joking) or maybe just being different for the sake of being different. Sorry…but you did ask.

  5. production line 12
    January 20th, 2005 at 20:38 | #5

    Bad. Too much unused space underneath the tiny category boxes on the main page, text in the column on the left looks crowded. Some variation in your picture would also be nice – nothing raunchy, but a bit more skin could well increase your hits.

  6. John Quiggin
    January 20th, 2005 at 20:43 | #6

    wbb, I’ve moved the recent comments and search up to the top.

    I can see that the sidebar needs more work than this, and I plan to change the picture soon.

  7. Andrew
    January 20th, 2005 at 21:40 | #7

    In Firefox 1.0, the comment numbers (ie comment 1. 2. etc) are superimposed right on the boundary between the flesh tone and the white comments areas.

    The “Powered by WordPress” is overlaying some of the links.

    A smaller comments font would be nice.

    I like the design very much though. very smooth.

  8. January 20th, 2005 at 21:41 | #8

    It looks rather ‘bloggerish’. I dont envy your task though- WP is not easy for the non-professional to do design in. I nearly did my head in working out how to get a MT blog working, and refuse to do it again with WP, nice software though it is.

  9. Geoff Honnor
    January 20th, 2005 at 21:51 | #9

    I fear that the pinky-brown colour is known as “mushroom” in interior design circles. For innumerable reasons, it’s probably best avoided.

  10. January 20th, 2005 at 22:06 | #10

    James, I wouldn’t recommend Opera before about version 7.5 (though most of my colleagues swear by it), not least because the Mac and PC layout engines synchronised at that version. I shudder to think what version 5 must be like on most sites.

    Robert, what browser are you using? I haven’t seen horizontal scroll-bar issues in my testing.

    The list numbering on the comments is a bit wonky, true. It works ok in IE, which means I’ve really screwed up somewhere.

    Smaller comments, noted. Colour scheme, ah, well, you’ll have to take that one up with the good Professor.

    One of the things I like about Textpattern as a blogging/publishing platform is that you can assign contributors different roles, and lock down their access, so, for instance, a particular contributor could be assigned as “designer” and only be able to edit stylesheets and templates.

    Anyway, enough nattering from me. I’ll be passing on some more bits and bobs to John, so keep the comments flying (off-list if you feel the need).

  11. James Farrell
    January 20th, 2005 at 22:34 | #11

    The pink is puce isn’t it? No appealing. Also:

    1. The font for the posts is too small, and – when you click on a particular post and bring the comments into view – not sympathetic with the font for the comments.

    2. Why is the ‘filed under’ field so prominent? I doubt anyone cares what heading a post is filed under. I nearly complained about this before, but now it’s gotten completely out of hand.

    3. The spacing and font sizes in the links section need work. For example, the space between ‘Recenctly’ and ‘Commented on’ shouldn’t be bigger than the space between the latter and the link items themselves. Etcetera.

  12. January 20th, 2005 at 22:50 | #12

    James, “filed under” is much the same as “more like this”; it’s a way for a reader to easily discover related content by clicking on a link and seeing what else is there, and, as such, is a valuable navigational aid.

    Have a gander at: http://www.retrorocketdesign.com/jq/comments.html

    I think it’s starting to look a bit more presentable.

  13. January 20th, 2005 at 23:04 | #13

    James, I’m using Firefox 1.0.

    I’ve emailed John some suggestions for minor CSS adjustments that will improve things, imo. I’ll post them here:

    textarea#comment { width: 100%; height: 200px; }
    input#pingurl { width: 70%; }
    #commentlist { margin-left: 50px; padding-left: 0px; }
    p.credit { margin-left: 250px; text-align: center; }

  14. January 20th, 2005 at 23:17 | #14

    The p.credit one is a good idea. I’ve already done more-or-less the same thing with the commentlist and that seems to work quite well. Forms in general are irritating ruddy things and I’m not sure you’re meant to style them in quite that way; I don’t think it’ll work in a particularly cross-browser fashion.

  15. January 21st, 2005 at 00:27 | #15

    Nick, if you don’t want to style the form in that way, you’ll need to edit the template to adjust its size by rows and columns. As it is, it does stick out too far on an 800px wide window.

    I’d also set the body background color to white, and use a vertically-repeated background image to define the sidebar (that way both the… um, mushroom and white panels will extend all the way to the bottom of the page).

  16. January 21st, 2005 at 02:51 | #16

    Woah. This layout is infinitely worse than the previous one. I much prefer it when the sidebar is on the right too :/

  17. Tom DC/VA
    January 21st, 2005 at 09:28 | #17

    I think the sidebar would be better on the right as well.

  18. James Farrell
    January 21st, 2005 at 10:34 | #18

    The side bar is looking better. But I still think ‘filed under’ is not necessary, let alone deserving of a column of its own, so to speak. A waste of space.

    The font size doesn’t suit me personally: too small for the ‘smaller’ text size setting in IE, but too big for ‘medium’. And since the commments are are in a bigger font than the posts, they are much too big in ‘medium’. Things were perfect before. But the new settings might suit others better, so I won’t insist. At least the comments and posts are in the same font now, as far as I can tell.

    The line between the end of the post and the comments is confusing, as there is nothing separating the latter from the next post.

  19. Nick Caldwell
    January 21st, 2005 at 10:48 | #19

    Hi James,

    Try clearing your cache; the comments and post body fonts should be the same size now.

    One of the many, many good reasons to ditch IE as a browser is that it has poor customisation options for font size. Opera in particular is excellent if you want more control. I believe also that the next version of Firefox will allow per-site user customised style-sheets, which will allow you to create your own look-and-feel for favourite websites.

    My feeling is that there is a sufficient amount of whitespace between posts to create definition but that could be easily tweaked.

    What do people think of the line-height (or leading)? More is generally better for readability but maybe it’s too much for the suggested font size.

  20. doctor k
    January 21st, 2005 at 11:13 | #20

    Change for worse. No problems reading most of the test (Firefox 1.0 on Windows), but the template is ugly as hell. I would suggest changing the colour of the links, which I find very hard to distinguish from normal text (my old eyes do not cope well with low contrast). The previous template had the same problem.

  21. tanglebum
    January 21st, 2005 at 11:27 | #21

    This is an online app/site that will provide harmonious colors, a full spectrum of them, and in addiiton calibrate your monitor. It’s really well-designed and implemented.

  22. January 21st, 2005 at 12:41 | #22

    Moving the photo to the top left hand corner was a good move – it looks better than floating by itself in the sidebar. However, the photo is too small. Make it bigger.

  23. Vee
    January 21st, 2005 at 12:48 | #23

    FeedDemon RSS Aggregator has your columns/blog entries extremely narrow. Even with browser readjustment.

    Other than that no real problems.

  24. stephen
    January 21st, 2005 at 13:02 | #24

    as with others who’ve mentioned it, I prefer the sidebar to the right. I think this is a psychological quirk that arises from the western convention of reading left to right – so we expect the substance on the left, where we first look, and the additional (or dare I say it, sometimes extraneous) material on the right.

    one other slightly confusing aspect of this layout is the location of the comments button – because it appears in the same space as the heading of the previous post, it is easy to post a comment intended for a previous post in the one above. this comes about because of the placement of the dividing lines.

    I do however like the layout of the blog entries and comments themselves.

  25. still working it out
    January 21st, 2005 at 13:06 | #25

    That pinkish brown is horrible. The comment font size is perfect, but the spacing betweens lines seems a bit too big. Makes the comments very spread out. I prefer them crammed up a bit more so you can see more of them at the same time and scan through them faster and it can make it harder to see all of your preview when writing a comment. The side bar needs the sections in it seperated by something. Spaces or lines etc.

    Now I’m getting really picky but the following two testimonials don’t have quotation marks around them. I don’t know if that’s the way its supposed to be but it looks a bit wrong. Always bugged me for some reason. Would also recommend putting the name of the quotee in italics.

    The great neo-classical iconoclast – Ross Gittins

    the odd Quiggan is good mental exercise; all part of life’s rich tapestry et al. – Peter Jonson

    ie: “The great neo-classical iconoclast” – Ross Gittins

    I feel ridiculous complaining about such little things but I always thought the testimonials were the most Australian thing on the site. Only an aussie would put such self depricating quotes up. Little thing that makes the place feel like home.

    Other than that, generally an improvement. Appreciate the good work.

  26. ab
    January 21st, 2005 at 14:04 | #26

    How current is that photo, John?

  27. January 21st, 2005 at 14:26 | #27

    I think it’s a knock-out! Very classy looking upgrade. Might have something to suggest, when I get used to it. First impressions, however, are wow!

  28. James Farrell
    January 22nd, 2005 at 14:55 | #28

    ‘Try clearing your cache; the comments and post body fonts should be the same size now.’

    Thanks for the suggestion, Nick, but I’m afraid it hasn’t worked. I’m sure you’re right about the relative merits of the various browsers, but the previous setup worked fine with IE, and I wasn’t leading the charge for change.

  29. January 22nd, 2005 at 15:54 | #29

    How about trying a sans serif font in the sidebar and giving the area a bit of padding (add some padding, basically, so the words don’t run into the dividing line between left menu and main body).

  30. John Quiggin
    January 22nd, 2005 at 22:13 | #30

    ab, the photo is two years old, and needs updating

  31. John Quiggin
    January 22nd, 2005 at 22:35 | #31

    Thanks Eszter, this was just what was needed and is within my minimal CSS competence. The menubar looks a lot better now, though it’s still not as consistent as I would like, as some of it is generated by plugins/Wordpress functions I don’t know how to edit (recent comments and links for example).

    I’m working on fixing the colour scheme, and adopting the standard right-wing orientation for the menu. Once those changes have been implemented, I’ll make a further call for comments and help.

  32. January 22nd, 2005 at 22:58 | #32

    Two years old? The Picture of Dorian Quiggin…

  33. James Farrell
    January 24th, 2005 at 16:51 | #33

    Whoa! Never mind the layout, let’s get back to the software itself. It seems that if you depart the comment page before you’ve sent a comment – and this is often necessary if you want to chack something – you lose everything you’ve written. Is this correct? Is it right? Is it the sort of thing we want happening around here?

    I guess one can always open a new window for the purpose of mid-comment research, but will I always remember to do that? I fear not.

  34. January 24th, 2005 at 22:03 | #34

    On reflection JQ, I reckon you should consider reviving the quest for a blog title. My theory is that leaving the individual/personal blog title behind automatically tends to an institutionalisation effect, in turn tending to even up the implicit rivalry with big media institutions, and also becoming more citation friendly.

  35. John Quiggin
    January 24th, 2005 at 22:45 | #35

    James, for me at least the opposite is true. Using the back button in Safari brings me back to my halfcompleted comment, whereas in most other systems I’ve used, such comments have been lost.

  36. John Quiggin
    January 25th, 2005 at 05:32 | #36

    James, the Back button seems to work OK in IE for Mac, also. Unfortunately, I can’t easily do usability testing on Windows, but I’ll see what I can do.

    I’ll try to make the photo bigger and more up to date soon.

  37. James Farrell
    January 25th, 2005 at 09:20 | #37

    Thanks, John. Sorry to be endlessly carping. I’m sure the final product will be an enchanted garden.

Comments are closed.