No lines of markup were harmed during this process

Yeah, new year, new looks, and the best part:
* Apart from inserting one single span on every page, no lines of markup has been altered.
* About 75% of the stylesheet from the old page has been reused as-is.


Hail the infinite power of CSS[Cascading Style Sheets]. And don’t forget to tell me if you hate this, love this, or if anything looks shite (read: if you find bugs).
*Update:* I’ve made a screenshot of the old design “available for comparison”:http://virtuelvis.com/download/144/old.png.
*Update:* I forgot this to add that when I designed this, I specifically had the beautiful “Bitstream Vera fonts”:http://www.gnome.org/fonts/ in mind. Install them and see the subtle, but important difference.
*Update:* “Someone”:http://www.lofotenmoose.info/ wanted more fanciness at the bottom of the page.

16 Comments

  1. I really like it.
    But there are two things that might be bugs, all in the top-navigation:
    * In Mozilla the border to the right of “Archive” and “Help” is not there.
    * In my version of Opera (7.11) the only meny-alternativ that shows up is “Newsfeeds”.
    Everyting works in IE, strangely enough 🙂
    Just e-mail me if you’re in need for some more information about my browser-versions etc.

  2. I’ll trust you on the Opera 7.11 thing, and as for the Mozilla behavior: I’ve already seen it, but thanks for reporting.
    As for Opera: You are strongly encouraged to update to a newer version. The latest non-beta release is 7.23, which provides both fixes for standards compliance, performance and most importantly security.
    If you are concerned about your mail, bookmarks and such: Upgrading was painless.

  3. Will try out the newest Opera-version. I use Mozilla as default browser, and Opera and IE just for checking when I write pages.
    I’m not using mail in Opera, but I’ve been thinking of trying out M2 after your recommendations. Would like to have the mail-client run stand-alone though.

  4. Opera employee Rijk van Geijtenbeek provides a separate mail/browser setup of Opera, named “Hugin and Munin”:http://home.concepts-ict.nl/~rijk/opera/huginmunin.html.

  5. Arve,
    A picture is worth 17 words (or more!):
    PNG8 screenshot from O7.5p1 (removed, since it’s no longer online)
    M.

  6. Moose: I changed some margins, and now it shouldn’t wrap. (I tried narrowing the window to around 275px without wrapping).

  7. All is well that ends well. I’ve often been victim to pixel-sized differences that caused a jump – and ever since i learned of Moozilla’s pisel rounding gap, my sums rarely add up to 100%.
    I haven’t commented on the design. I’ll do so now.
    I’m not a fan of the colors. But then I’m rarely a fan of anything that’s not cold blue :]
    Seriously though, the blue anchor colors do not match/fit into the new feel and look. Girl orange and grass green somehow exclude the stately blue. This colorimetric contrast is most evident whilst I hover the anchors in the roll-o-rama on the right. Navy-blue and orange are enemies, I think. If you must use blue, I would suggest a softer hue – something from the 3366CC and friends family. Lighter.
    Also, comments are not easily distinguishable from your text. One of the reasons is that there is no change in style between the boxen, nor does the comment heading have enough whitespace or ornamentation for the vision background to register a change. You have to look for comments to find them. Otherwise, you’ll end up at the form, wondering where and when you missed the beginning.
    You have an attractive top of the main box. Is there any chance you might apply such styles also to the footer? When a moose is almost done reading your page, the moose has by that time forgotten that some shiny graphics were ever utilized. The bottom looks like a standard, out-of-the-box MT blog template, which contrasts with the glamour of the header.
    Not that I have the problem with the roll-o-rama at the right, but others might consider it excruciatingly small. It looks like 9px to me, or smaller (haven’t looked into the CSS on purpose).
    I never liked “pixel” fonts, so I’ll take the plain vanilla I get now. Oh, but then I am also aware that few users have my new favorite font, Pristina, which I started using today for my own help section.
    Overall, I like the new design better than I did the last one, whitespace-wise, but I’ll not shake hooves with the colors.
    M.

  8. VERY nice, I am blog-envious now. Please, please, please help me make a stylesheet more 2004 for at least one of my blogs *begging on my knees*
    🙂

  9. Marius Andersen

     /  2004-01-09

    I may be wrong, but I don’t think it’s necessary to wrap the contents of the h1 element in a span element in order to hide it (in this case, the text “Virtuelvis” which shows up in browsers that don’t support CSS). Take a look at SimpleBit’s technique for accessible image-tab rollovers; here, the ‘overflow’ property is set to “hidden”, and a height of 0 in conjunction with a top-padding of the height of the image pulls the text out of the element’s box. Try setting the ‘height’ property to “0”, the ‘padding’ property to “52px 0 0 0” and add a declaration that sets the ‘overflow’ property to “hidden”. If you then adjust the ‘background’ property a little, it should work.
    Oh, and the new layout rocks!

  10. I dig the design. I have to agree with Moose about the footer, maybe the blue links, and that the “Comments” header should be more prominent. Also, the comment form could be a lot more fun.
    Have a look at the “Fun with CSS – Not”:http://www.intertwingly.net/blog/1432.html thread at Sam Ruby’s to get some ideas on how to style HTML forms to look better in every browser. Done right, it will even work to “set a <textarea> to 100% width”:http://fplanque.net/2003/Articles/iecsstextarea/ in Internet Explorer.
    Other than that, I really love the new design. I like the orange and venom green colors, and the way the text is presented. Great work.

  11. Ah, two other things. It’s probably due time to remove or change the favorite icon as well. It doesn’t exactly match the rest of the design.
    And when I press “Preview”, I come to a page where the header contains the “Virtuelvis” text in black as well. I think that looks kind of cool. Why isn’t “Virtuelvis” in the header elsewhere?

  12. Jor

     /  2004-01-09

    Wow, very slick new design. Also thanks for the fonts.
    I had to refresh the page twice before I saw the new design: apparently my ‘week’ expiring for ‘other’ cached files includes CSS!

  13. First: thanks to all who have given feedback. Some of the changes have already been incorporated, and some suggestions might, with a few changes get incorporated.
    Like before, redesign is an iterative process, so keep that constructive feedback coming.
    Now to answer more specifically:
    *Asbjørn:* Why isn’t “Virtuelvis&” in the header elsewhere?
    I am considering a name-change for this blog.
    *Marius:* I have thought long and hard about image-replacement techniques, but I hadn’t looked at the Simplebits example before. I’ll look into it, to see if I can create a version that doesn’t involve CSS hacks.
    *Everyone:* I am pretty much aware of the non-separation of the main entry and comments, and I will be making small changes to make comments more obvious.

  14. Blogging along

    Here’s another blog of interest: The toman diaries from Opera fan Toman. And on a related note, Virtuelvis has redesigned radically into a very modern and fresh new look. Congratulations to Arve. The thought has entered my mind to do…

  15. I liked your design before. But this is really snazzy, and I think I like it more!! 😀
    And I love how Bitstream Vera looks in your entries – its really a nice clean look, and it makes me want to consider something more fun than the norm.

  16. Chris

     /  2004-01-20

    I L-O-V-E your use of Bitstream Vera. I actually already had it installed when I visited your site and I must say that I am so happy that Vera is making it to common use. Congratulations on an elegant use of a gorgeous font.