yet another redesign


Aesthetic critiques and bug reports very welcome – especially if you have the misfortune to be using IE. I’m thinking I will rotate header images in an attempt to stave off the inevitable design fatigue, and hopefully keep this design for more than 6 months or however long the previous one lasted.

I’m using K2 (the new Kubrick) with my own stylesheet, as well as the weighted categories and contact form plugins.


13 responses to “yet another redesign”

  1. Looks good. K2 is much more flexible than Kubrick. It really works better for data-rich, mixed-content front pages, too, by the look.

    I wonder if maybe a slightly crisper drop-shadow might not work better. Say, if you’re using photoshop for instance, opacity 100%, angle: 90, distance 1 px, spread 0%, and size 7px;

    Maybe also a gradient overlay: opacity 18%, scale 58%..

    Of course, this is such a “you should be writing this like my thesis” conference paper comment.

  2. Yes, it was ‘more of a comment than a question’ – but then again, I asked for it! you may be right about the shadow to make the text stand out more and look cleaner, but I don’t mind the murkiness and amateurishness of the header as a whole.

  3. looks like the header image stopped tiling. i wonder if having a background colour as a strip the full length of the content for the header with the image fading out to the background colour on each side would work.. it would mean you don’t have to worry about making a tiled image each time (though there would be overhead in photoshopping the fade out) and the navigation tabs would maintain the separation line from the content.

    and with that comment, i have achieved total design pedantry.

  4. you are not being pedantic at all, Nick – at least no more pedantic than me. (hmmmmm)

    The faded edges in photoshop would be pretty trivial to do, but it’s an ugly hack – I’d rather get the layout right!

    However, I’m not seeing what you’re seeing. On my screen in both Firefox and Safari the header image is flush with the container – both are set to 780 px, so that’s what I would expect. I noticed it was repeating yesterday so I set it to center and no-repeat in my stylesheet.

    What are your system specs and what does it look like to you? Is it just the width or the height? Any chance of a screenshot?

  5. It’s cos the individual article page, at least, has the .flex class assigned to the body element. That means when you’ve got a wide, wide screen, the header will expand beyond the width of the background image, leaving white-space gaping on each side. My screen here is 1680px wide, so I get the gaping. (iMac G5 20″ running Safari 2.0.4 on OS X 10.4.6)

    I’d suggest killing the .flex class and staying with a fixed width. flexible width is hard to manage when you’re trying to incorporate non-stretching imagery within the overall composition of the page.

    I’ll send a screenshot shortly.

  6. It might be something you need to edit out of the actual html template. Not too sure. I’m a textpattern hacker by preference. But damn, that citations plugin is awfully tempting.

  7. OK, so I found where the parameters for flexible width are set, and I hacked it like so:

    From this:
    body.flex #page { /* For the flexible-width setting. Not IE compatible */
    width: 80%;
    min-width: 780px;
    max-width: 1000px;
    }

    To this:
    body.flex #page { /* For the flexible-width setting. Not IE compatible */
    min-width: 780px;
    max-width: 780px;
    }

    Even though I have flexible width *off*, this should override any overrides? Urgh, I don’t know.

  8. Yay, I think I just had to reset the K2 options setting. I don’t think I needed the hack at all. Back to real work now.