Redesign and renovation

As you’ll probably notice if you’re reading this in your web browser, I’ve redesigned a bit. The previous design had been more or less the same since I launched this site just over two years ago, so I thought it was about time for a major update. I’d grown a bit tired of the old design, and wanted something with more colour and attitude.

In preparation for the release of the new design I went through the site to fix up some parts of the markup I wasn’t entirely happy with (hence the recent maintenance work, which you may or may not have noticed). There are still areas that aren’t perfect, but perfect is the enemy of good so I’ll leave it at that for now. With the markup changes done, this and any future design updates should be a matter of simply switching to a new CSS file.

While implementing the new design I ran into the inevitable IE factor, which slowed things down a bit and had me pulling my hair, as usual. I think I’ve found reasonable workarounds for the buggiest browser in wide use, but if you happen to browse the site in Internet Explorer and find something that looks like a bug I’d appreciate if you’d first switch to a better browser (and convince everyone you know to do the same), then let me know about the problem.

I’m so fed up with catering to Internet Explorer’s endless bugs that I even considered sending it a bare bones CSS file or no CSS at all. That browser is a serious health hazard to web professionals and really has nothing but its market share going for it.

Anyway, thanks to conditional comments no CSS hacks are needed for the IE/Win workarounds. I dumped all IE/Win specific stuff in a separate CSS file. There are a couple of instances of the IE/Mac hack in the main CSS file, but I figure that’s pretty safe considering the odds of that browser ever being updated. IE/Mac gets a fixed width layout by the way, and it has a problem with text jumping around a bit as links are hovered over. Nothing major, and I thought I’d be kind enough not to drop CSS support for it.

Ok. Now I’m done ranting about IE. If you visit the site in a browser that is being actively developed (and no, security patches do not count) everything should look and work as expected with no significant problems or needs for hacks. At least not that I’m aware of.

My goals with the redesign were to give the markup an overhaul and to create a less cramped and more colourful design. I also wanted to break out of the fixed width of the old design. I think it’s working pretty well.

In case you’re wondering about the photo in the header, my girlfriend took it last summer while we were visiting her parents. We were in their garden when I saw this huge (by Swedish standards) grasshopper sitting on a red sunflower. I had no idea there were grasshoppers that large here! Luckily, my girlfriend was holding our camera and was able to snap a photo of the grasshopper before it flew away. I really love the colours, so I wanted to use the photo for something. Well, it ended up here.

If you find something that looks odd or doesn’t work, start by reloading to flush out any remains of the old CSS files and images. If the problem persists, please let me know – there are probably bugs hiding in corners and monsters in some closets I haven’t opened, just waiting for someone to let them out.

So what do you think?

Posted on March 29, 2005 in CSS

Comments

  1. Nice look, even the apoteket-green vårtbitare is cool ;-)

  2. Not a huge change, but I do like the new masthead and navigation.

    Have you noticed the one-pixel border jump (using Firefox/Win) on the masthead when moving from the home page to any other page on the site or is it just me?

    It appears there is a right border (1px white) on all pages but the home page.

    Looked fine in IE/Win however. I like the use of a PNG (in the masthead) for browsers that support it and the old pseudo-transparent GIF for clunky browsers that don’t support PNG. It’s hard to pull that off if you’re placing text on top of the GIF, but I think it came out quite nice.

    That crazy grasshopper is scaring me, I think I am being watched ;)

  3. I like the new look, though the old look had more of a distinct personality.

  4. I like it, Roger. It seems nice and fresh. The odd mix of a major heading and a paragraph in the header is producing an extra bit of whitespace on some pages.

  5. March 29, 2005 by Roger Johansson (Author comment)

    martin: Argh, I didn’t realise it was that green. The new Apoteket.se (the Swedish state owned pharmacy) really sucks btw.

    Justin: That jump should be fixed now. At least I got rid of it in Firefox and Safari, Mac OS X. Glad you like the grasshopper ;-)

    Will: Really? I thought the old look was kinda dull. But yeah, maybe it was a bit more different.

    Simon: Yeah that’s the jump Justin mentioned… I think. And that header plus paragraph thing is only for the home page.

  6. Roger .

    My favorite touch is actually the matching grey line underneath the navigation. Nice touch!

    I have to agree with Will, The old site did have a bit more personality. However, it may simply be all the white. What about adding some more color in the sidebar? My only other gripe would be the background color on hovered links.

    Overall though, great redesign. Everything is clean - love the subtle navigation changes.

    | matthew anderson |

  7. Stylisshhh!

    Det är mer en på tiden att ordna en blog till sig själv så man får leka lite tror jag…

  8. Nice work! How about updating the album covers too? I’ve seen that Moloko album there for ages!

  9. I like it a lot, Roger - great work.

    Now what ideas can I steal…8o)

  10. I still see the jump Justin described in Firefox/Win.

    I like it. The header/menu is definitely unique and looks nice. I like how you used the colors from that photo as the color scheme for the site. I think the top half of the new design has plenty of personality, but once you start scrolling down in the longer articles you lose some of it. Maybe a fancier footer?

  11. The border jump is gone (for me anyway), that was fast Roger!

  12. March 29, 2005 by Roger Johansson (Author comment)

    Matthew: Yeah there’s a lot of white. I may consider doing something with the sidebar… not sure though. The background on hovered links will change however.

    Alexis: :-)

    Gabriel: I’ve been lazy with the album reviews lately, I know. Gonna try and write a few real soon.

    Chris: Considering how much use I have for your web developer extension I won’t complain if you borrow some ideas :-)

    Brian: Yeah now I can see the jump too. It isn’t there in Firefox/Mac though. Hmm. I’ll look into it. Nice suggestion about the footer!

    Thanks everyone for posting your feedback! I’ll keep your suggestions in mind as continue working on the design.

  13. Looks really nice, very clean!

  14. I like it, look fresh and clean. In fact I was here when you were upgrading your design.

    The lobster… cool

    Well done!

  15. March 29, 2005 by Roger Johansson (Author comment)

    Ok I found the source of that one pixel jump in Firefox. It’s a Gecko rounding error at certain window widths, and it does occur on the Mac as well. I’ll try to get rid of it somehow.

  16. I truly love this new redesign, apart from one thing: You don’t have a projection stylesheet, which makes Opera show the page unstyled if go into full-screen mode.

    (I do think changing media=”screen,print” to media=”screen,print,projection” would be enough.)

  17. Very nice. I love the huge amount of white, as it gives everything a nice minimalistic look. The grasshopper is a very nice addittion and seems to blend in nicely at the top.

    The only comment I have is related to your navigation. The links are obviously intentionally off the center — the fact that those links are close to the bottom edge of the navigation and close to the horizontal line below the navigation makes it look a bit crowded .. or jittery perhaps. As if those links don’t have enough space to lead their own life. Perhaps decreasing the margin between the navigation and that horizontal line to the same amount as the one at the top of the navigation improves it.

    Meh, just a feeling I got when I looked at it for the first time. :)

  18. March 29, 2005 by Roger Johansson (Author comment)

    Arve: Thanks :) I added projection to the media list, and that did the trick for Opera in full-screen mode.

  19. Great job, the old one was kind of dull :)

  20. A red sunflower? Hmm… I thought they only came in yellow. :)

    I like the new theme. I liked the old one too. I’m not going to say I prefer one to the other. I think a design should fit the purpose and function of a site, and since you’ve felt you needed to freshen it up—- more power to you! ;) Perhaps your focus and audience have changed over the past two years and the site was calling for a new design.

  21. March 29, 2005 by Timo

    It looks great! A much cleaner look, big improvement. I love that header with the grasshopper and I like the background color on the hovered links, the green ties in well.

  22. March 29, 2005 by Roger Johansson (Author comment)

    The one pixel jump in Firefox was caused by a rounding error in Gecko (it happens in all Mozilla based browsers) when max-width is specified in ems. Using pixels instead removes the problem, but makes the design less flexible. Neither is perfect, but I’ve changed it to pixels… for now.

    I really like the elastic design that comes with using ems though. Anyone know if work is being done on the rounding problems in Gecko?

  23. It does something very strange in firefox/win 1.0.2 when you load up the web developer extension sidebar. It just keeps flashing between the styled and unstyled version.

    I opened the sidebar to play with your text a little. To me it feels too much like one of those old computer news sites that were a bore to read. Everything looks good, but the type just doesn’t suit me. I was going to play with letter spacing or new typefaces, but alas, the page started bugging out.

  24. March 29, 2005 by Micke K

    Looking good (Snyggt, härlig vårfärg!)

  25. March 29, 2005 by Roger Johansson (Author comment)

    Scott: That’s odd. I can’t reproduce that flashing. You mean the Edit CSS sidebar, right?

    Feel free to suggest better fonts for Windows users. I’ve never been able to find anything that looks good on Windows, but that’s probably because I’m spoiled by Mac OS X.

  26. I’m getting that strange flashing when using the wed developer extension CSS sidebar too(Firefox/Win) - seems to just want to keep reloading the page.

    Have to view your CSS the old-fashioned way ;>)

    Rob

  27. Well, just noticed I was on Web Developer Extension 0.8, upgraded to 0.9.3 and the problem noted above seems to have disappeared! Maybe why only some people are seeing it.

    Rob

  28. March 30, 2005 by Teddy Zetterlund

    Den nya designen ser ut att fungera fin fint och då kan jag även passa på att tacka för alla goa artiklar du spottar ur dig oftare än vad kan verkas vara mänskligt!

  29. I have just found this great site :-)

    I personly really like the the white space and its composure. Nice/snyggt!

  30. God, public pharmacy, I can’t believe there’s a country in the world with that public facility. Even we French don’t have public pharmacy service ;)

    Splendid MikeDavidson-ish header!

    I really enjoy this redesign. I like white backgrounds (check my website…).

  31. Looking good, Roger. First time I’ve seen someone deliberately adding a “bug” in the masthead, though. :)

    I like how you’ve added a:focus styles (except for the nav bar) and the hidden-until-tabbed-to skip links. Too few designers care about keyboard navigations. Kudos for that.

    Stark black-on-white is a bit straining for the eyes on a good, 500:1 TFT, but that’s just a subjective opinion.

  32. March 30, 2005 by Maarten

    Nice work! I like the new look. One of the advantages i do miss here and you did have in your old site is that i would know on which site i was, even without any content loaded. But that just was the checkered background i guess.

    p.s. shouldn’t you have a min-width, so the meny doesn’t collapse?

  33. Nice job on the redesign.

    For me, I can’t quite put a finger on what irks me with your navbar text size or font choice. (But that’s just me)

    Anyway, I like this one a lot more than the old version, much easier for me to read and browse around.

  34. Awesome design!

  35. March 30, 2005 by Maria

    Det mesta är väl redan sagt… men jag måste säga att jag gillar gräshoppan… den är toppen! Hela sajten får mig att känna vårkänslor.

  36. Excellent design, but missing one thing in my opinion: a print stylesheet.

    “Print version” links shouldn’t be necessary.

  37. I like it - nice colours.

  38. March 30, 2005 by Rob Waring

    As its only been done once:

    Looks a bit buggy to me

    Arf arf, roll around on floor, etc.

    Seriously, it looks nice.

  39. I can’t believe you didn’t see the diss in comment #3. More like your personality. And you said it. Dull. ;)

    No, really. The old was functional. This is nicer. And nicer but not less functional is more functional. Rambling rambling.

  40. I absolutely adore the new design. Its a huge improvement IMO… takes the best bits of the old one, and combines them with new things. Easier to read, and more eye candy in the masthead area.

  41. March 30, 2005 by Roger Johansson (Author comment)

    Milan: Nope, there are red ones too :-)

    Tommy: Glad you like it. I’ll look into styling the focus state for the nav links as well, and I made the text just a little bit lighter.

    Maarten: I considered using min-width, but in the end I didn’t. I figure if you want or need to make your browser window that narrow, the nav wrapping is better than getting a horizontal scrollbar.

    David: Print stylesheets are good, but I think they are also a bit limiting. What if you want to print what you see in your browser? That, and many people not expecting what comes out of the printer to look completely different from what the see on-screen is why I’ve chosen to do it this way. All the print version link does is reload the same page with a print css.

  42. Good looking design there Roger, like it more than the other dull one you had before. One question, why did you go for HTML 4.01 and not XHTML 1.x, any reason for that?

    Also, good colours on links and great hover effect. One thing though, the dotted underline is commonly used for abbrivations, you use it for all links, any thought on this?

  43. Roger, you copycat! I redesigned my blog and two days later you’re redesigned your web site! ;-)

    I do like the new design better, but, as said in other comments, the navigation kind of felt weird at first. But I think it’s something one has to get used to, it feels better every time I look at it now!

    However, I noticed that your pages start with the XML declaration (), which will throw Internet Explorer 6 into quirks mode. Is that intentional, and then sorted out in the IE-specific CSS file used through conditional comments?

    Personally, I tend to let the page start with the strict xhtml doctype so IE 6 will use its strict rendering, and then just use the qirks mode/incorrect box model for IE 5.x and handle that in its own CSS file.

    In that case I get as much CSS in the same file as possible (for overview and maintenance purposes), and I also use the correct box model in as many browsers as possible.

  44. Looks good Roger, and it even works well in IE (I’m viewing it with Feeddemon). First thought that came to mind though was how trippy that header image is. I love it, looks slick!

  45. March 30, 2005 by Roger Johansson (Author comment)

    Jens, Robert: I’m using content negotiation to serve XHTML 1.0 Strict as “application/xhtml+xml” to browsers that handle it, and converted to HTML 4.01 Strict as “text/html” to others. So IE is not getting the XML declaration.

    About the dotted bottom border on links; I haven’t used it a lot so I’m trying it for a while. Yes, it is possible that it could make abbreviations look a little bit like links, but links have a different colour, are bold, and have a hover effect.

    I’m not 100% happy with the navigation myself, so don’t be surprised if it changes a bit sometime soon.

    And Robert, I started working on this before I noticed your redesign! ;-)

  46. My bad, I only chose View Page Source in Firefox and took for granted it was the same. :-)

    And since your web site’s layout doesn’t resemble my blog at all, I don’t really think I inspired you. :-)

  47. I loved the previous design, so was surprised when my RSS feed displayed the title of this article this morning. But then I read down and found in the 7th paragraph what I had always hoped: an end to the fixed width format.

    Alas Roger, it doesn’t work! And you say why in comment 22: that you had to give up ems in favour of pixels to accommodate a bug in Gecko. So goodbye variable width, and all because of having to cater to a buggy browser. Sound familiar?

    I’ve come across the rounding error in Gecko before and in the end had to resort to 1px negative margins to get rid of it. A nasty bit of coding.

    Aside from these gripes, you have one of the best sites I have come across with a design/development flavour. Thanks.

  48. March 30, 2005 by Roger Johansson (Author comment)

    Paul: Yep, all too familiar. I really want the elastic design back though, so I’m hoping to find a workaround for the Gecko problem. If I don’t, well, I guess I’ll let the bug out again and hope that someone with the appropriate skills can help the people at working on Gecko fix it.

  49. It’s looking great Roger, I really do like that header image!

  50. That’s nice, mister Johansson. The active state on the nav works great, referencing to the image and all.

  51. Ahhh. Liquid design. I like. And ‘concertina padding’ too. A joy to see, and gracefully combined with a max-width.

    Non-fixed width is a subject I’m keen to bring back to the fore at SxSW next year - might you be interested in contributing (mail me offline if so)?

  52. Oh my, Richard, I expected this on May 1st. Caught me off-guard.

    In any case, I absolutely love it. The other design, I agree, had gotten a bit old. The content rocks, though; for the entries you post, I’d visit your site even if it looked like something from Geocities (God forbid). I really like it, though, good job! The brighter, bolder colors make it more vivacious.

  53. It may be just my eyes, but I have trouble reading the writing in the dark box on the header. Other than that, I like it. But then I am rather partial to monochrome with a dash of red…:-)

  54. Oh I really like it now. It was a bit cold and strict here though it corresponded of course with the content and language. It seemed also to be a bit overloaded (just visually). But now it is so bright and light! Really like it, thank you!

  55. I’ve thought you’ve been up for a rewrite for a month :P This is much better, great job!

  56. March 30, 2005 by Philipe

    Why not XHTML 1.1 ?

  57. March 30, 2005 by Roger Johansson (Author comment)

    Ok, I’ve been looking into the one pixel jump bug in Mozillas and here’s what happens: when the main container is positioned relative, has a max-width specified in ems, and the viewport is wide enough for that container to reach its maximum allowed width, a vertical one pixel wide row is cropped from the right side of the container when the window width is an odd number of pixels. When the window width is an even number of pixels, that row is visible. This can be seen clearly by resizing the window.

    Removing position:relative (needed to position the text in the header) or using pixels for the max-width prevents the problem, but I’m not doing either. I’m back to elastic width (resize the text in your browser too see what I mean).

    Richard: Sure :-)

    Jewel: Are you using IE by any chance? Since it doesn’t support PNG alpha transparency it gets a GIF with every second pixel transparent instead. That does make the text a bit hard to read, but that info isn’t really essential.

    Anders: Hehe, guess you’ve noticed every little tweak I’ve been doing, huh ;-)

    Philipe: No reason other than that it would make my content negotiation script more complicated for no real benefit.

  58. A fine update. The elastic set up is great and the site appears a lot cleaner.

  59. Badass. Nuff said.

  60. March 31, 2005 by Björn Hagström

    Me like. Nicely done.

    But I think the projection stuff you added gave you a css validation problem or is it just me?

    I especially like the way the width of the content area flows but doesn’t exceed a certain width. But hey, that may even be old news? I mostly read you thru the rss.

  61. Great redesign, nice image in the top and I like the navigation. Good work

  62. March 31, 2005 by Roger Johansson (Author comment)

    Björn: Thanks!

    The CSS Validator has a problem with multiple media types. It’s a known bug.

    The elastic, max-width layout is new. The old one was all rigid and pixel-constrained ;-)

  63. Nice work Rodger, it looks great.

    I am interested in your div#skip a:focus css rules.Why does the left value have to be 10009px to make the block appear? I would have tried a value of 10px first, but that doesn’t work, why is this?

    #skip a:focus,
    #skip a:active {
    display:block;
    position:absolute;
    top:10px;
    left:10009px;
    z-index:10;
    font-size:1.8em;
    line-height:120%;
    padding:0.5em;
    border:2px solid #91cc14;
    width:15em;
    background:#F1F8E1;
    }
    

    Cheers, Neil.

  64. Your ‘skip nav’ thingie comes completely last in the tabbing order. Kind of defeats the purpose. When I first used that technique with off-screen positioning more than 2 years ago, I used tabindex, but that was disturbing as well. In the end I settled by having those links come early in the source code (check on my site).

    PS - the white background is a bit too bright for me.

  65. April 2, 2005 by Roger Johansson (Author comment)

    Neil: That’s because they are positioned relative to their parent element, the ul, which in turn is absolutely positioned at -9999px.

    Philippe: That’s odd. The skip links are first in the tab order in every browser I’ve tested in, and they are at the top of the source code. Which browser/OS combo are you using?

  66. Oops, you’re right. Firefox nightly. I must have had some other link already focussed when I started tabbing thru. Sorry for the noise.

  67. Ahhh, now I get it.

    Thanks for sharing man :)

  68. I like the redesign, oh yes I do. Good piece of work! (but cant the sidebar hava another background color than white? ;-)

  69. It looks awesome! A great improvement. And you have my admiration for supporting IE mac… my site looks absolutely garbled in it even though it’s perfectly standards compliant.

    Great job, I’ve always liked this weblog and now I like it even better!

  70. My favourite website at the moment. Nice design and great content.

  71. April 3, 2005 by Zelnox

    Very nice now. Much more pleasant to read now. Hehe. ^_^

  72. I really like it! :) Much brighter and sharper than the old design. Lovely masthead, too!

  73. Sorry. I don’t think this design is an improvement.

    It’s an exceptionally competant design, in that it’s readable, layed out well, etc…

    Your site was always visually quite distinctive, whilst still being a blog.

    I think it’s lost that, now it doesn’t look any different from the myriad of other blog sites out there. It’s lost any branding it had, which is a terrible shame.

  74. April 4, 2005 by Roger Johansson (Author comment)

    Kevin: I appreciate your comments. I see what you mean, and I did consider that while working on this. That said, there’s nothing stopping me from letting the new design evolve into something more distinctive.

  75. I am browsing tons of websites and blogs daily; the quality of content and discussion on your site is superb, congratulations! Great design too.

  76. It looks like the design is fixed width on IE/Win in addition to IE/Mac. It wraps nicely in Mozilla though.

  77. Roger, You new design looks great! I really like the new header image with all that color. It provides a good overall feel. Nice work!

  78. April 11, 2005 by Erwin Heiser

    The new menu looks more “professional” and slick even though it’s not a huge redesign. God is in the details, I guess. I like this clean look so it’s all good. Maybe give the background a bit more contrast but that’s my only suggestion…

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.