New Blog Design

It is now official get out of your RSS reader day. Take a few minutes to check out the new and browse around a bit. This is, I believe, the fifth major iteration of the design here but it’s the first one since 2003. When I last freshened the paint around here it got a link from Zeldman saying “lucky in redesign” and I figured I would never be able to top that, so I left the design the same for years. The only major change was the introduction of Asides in 2004.

Well I couldn’t top the last design, but Nicolò Volpato had no trouble creating something beautiful I started coding up earlier this weekend. Nicolò is still working on mocking up a few of the pages, and in the meantime I’ve been working on a little additional functionality around the site, particularly with photos.

Here are a few things you might notice so far: related posts on entry pages, recent entries shown in the sidebar on entries older than 2 weeks, when a blog is from the same day as a photo album random photos from that day are shown at the bottom, and likewise a photo will show when there’s a post that day.

The main goals of the photo integration were to enable a little more serendipity. There are a lot of other little Easter eggs, but those will remain an exercise for the reader.

154 thoughts on “New Blog Design

  1. Someone has to be on a plane tomorrow. Don’t you have to go to sleep?

    And yes, I love this redesign, though I’ve said so many times already. I think the integration of all of these photos into the design is going to keep you on your toes to take more photos… a very good thing, of course. =D

  2. I can actually say that I saw this design before it was coded, over some of Mr. Boren’s luscious steak. This is a great leap forward from your last design, and it really keeps your personality around for the trip.

    You’re giving this de-uglifier a run for his money. Nicolo has a lot to be proud of.

  3. A good redesign Matt. The colors are great and the photos integration is subtle. The only thing that I did not like so much was the big header. Though it looks classy, it consumes more than half the screen. Otherwise it is very vibrant, will pull me more often out of feedreaders 🙂

  4. this design looks way too better than the old one!! while the old one was neat, this one is pretty!! 😉

    good job on the facelift Matt!! 🙂

  5. I noticed the redesign earlier today and for a minute, thought I stumbled onto the wrong site until I realized that hey, it says “Photo Matt”, has the same tagline, and your face is on the layout. Very nice change, although I keep forgetting about the “Home” tab and thinking that clicking on the site name will bring me back to the homepage…

  6. Great new look. Definitely more vibrant and alive than the previous design. I’m still looking through some of the different pages. So far so good. Can’t wait to see what other pages are being mocked-up. The masthead collage is great, I need to get me one of those WordPress stickers to plaster on to something in real life.

  7. Absolutely beautiful design.
    Navigation is pure logic – breezy!

    One small problem seems to be that the really wonderful header takes its time to load. For a ( short ) while the upper part of the page is empty ( apart from the background ). It also means, we’ll have to wait for the navigational system.

    Congratulations and do keep this beauty, at least for a while 😉

  8. Major improvement. The header graphic is great. Wakes up the reader but doesn’t induce a headache – which red can do if it isn’t used as subtly as here! Much better than the old look.

  9. header is cool, but it doesn’t load at all on my crappy Sri Lankan connection. Reloaded and it did, but guess it works for proper broadband. Best wishes

  10. I really like your redesign, except that the header is way too big, it loads rather slow; which again might cause that people turn images of to view your site, but then they sit without any navigation.

    Have you considered doing a image map instead of using the header image as a css background property?

  11. A few people have said they dislike the header, that it’s too big, but I think it makes the design. The colour scheme is vibrant and the header is perfectly disheveled.

    Wonderful re-design Matt.

  12. Wow!! The new design is fantastic!! I love the “then” and “now” pictures – a nice blend of where you’ve been, and what’s coming!
    …I have to give you my first thought, though, on seeing the new header for the first time: “Well, that’s definately not his writing!” 🙂 Miss you and hugs, C.

  13. Nice design!!

    On my own website I’m trying to integrate my photo album (Gallery2) with my WP site, but it looks awful – what plugin did you use? 🙂

  14. Very nice rework!
    But consider saving the haeder-image with Photoshop’s save for web feature, it saves a lot of kb.
    I did an its more comfortable for my (not so much readers), because some of them and me too are not using broadband internet.

  15. Umm, very nice. I *love* the header design. It is a little bit “giant” for my tastes, but it looks really good.

  16. As a fellow big-header guy, I say ignore the nay-sayers and enjoy. It’s your blog and it does look fantastic! I love the fading pattern background. That’s a really nice touch. Great job!

  17. Looks grrrrrrrrrreat. I love it. One suggestion with the header would be to leave it that big on your entrance page but shrink it down to maybe 1/3rd that height on all interior pages. I don’t even so much have a problem with how it loads, but rather that on a non maximized 1024×768 screen, when you click a navigation button it doesn’t look like you’ve gone to a new page because all of the content is below the fold.

    Great work though… it’s v. nice.

  18. Wow! Super slick. love the physicalness of it.
    Very impressive.
    I rather like the pattern more than anything, but the simple stain through the nav gives it a bit of used and abused which is also visually appealling.

  19. Coool ! I guess many have already mentioned it, the header is tooo big, on my widescreen, initially i saw only a blank page and after some time the header loaded up 🙂

  20. Personally, I like this new design much better than the previous one. However, I have to admit that I am sucker for one-column blog templates. I especially like the header image, it hints to us what kinda person you are.

  21. Pingback:
  22. matt, you’re an inspiration. i’ve never spent this much time on, reading or going through a blog before. ths design is well-thought out, serene and inviting. i used to be a programmer many years ago. how long ago? can you say ‘assembly language’? yep! that long. google it.

    so, now, i’m gonna get my feet wet, again, and start designing some wp themes.

    look out world, here comes, vanchisel.

  23. What a gorgeous design! I love the details, like the background and the coffee stains, and how the submit button even has a faint pattern on it. Nicolo did a fabulous job.

  24. I found a Moses reference.

    Really interesting is how the header background doesn’t match up with the site background, but the pattern is such that it isn’t really noticeable except while you’re resizing.

  25. Very nice, but I highly recommend using overflow:hidden on the links in your main navigation. It will take those long outline boxes when someone clicks on a nav item and make the interactivity a lot prettier. Sorry, that’s a huge personal peeve of mine.

  26. Wow, that is a BIG CLUNKY header. More visible header per no content in my normally sized browser window. Ick. Do I come to photomatt to look at the header? no, the content. Yuck.

  27. Very cool, trendy stuff Matt. Its much more personal looking now. Bigger random photo would be cool. So your secret to success has been revealed: Ramen Noodles and Coffee.

  28. Very nice Matt! I’d say it is definitely eclectic in a weird sort of Tudor meets Victorian meets Americana sort of way. Considering your level of European travel lately, I’d say that has made an influence. BTW, I need stickers!

  29. Lots of nice touches, Matt: the coffee stain, the piece of tape, the copyright message (or did I just not notice that before?). Good to see a photo of you prominently on the site. Insert something insightful about being able to see what the writer of a weblog looks like here. But one thing I find hard to believe: do you really code PHP with pen and paper in your notebook?

    Regardless, Matt, great design. Red is the new pink!

  30. Looks great! Did you design the wallpaper pattern yourself or did you found it somewhere in the web? I’ve been trying to search similar copyright free pattern myself – with poor luck 🙁

  31. I like it. It’s straight outta 2004 with the wallpaper background and serifs and grungy bits, but it’s all the better for that. Aside from the fact that nobody in their right mind would have implemented a 150kb header back then (it’s a bit doubtful now, but there’s no point trying to explain to Americans that not everyone in the world has TV-sized monitors and broadband. And I’m always prepared to allow people a bit more leeway on personal sites, where they’re entitled to pick and choose their audience.)

  32. Your beautiful website loaded quickly out here in the woods of New hampshire, with a top dial up speed of 31.2 bps.
    And that is always appreciated. 99 percent of the time I duck out of loading anything that appears stuck.
    I just switched to WordPress from whatever, and was looking for you to thank you for that ridiculous plug in that makes me smile when I see it. Hello Dolly.
    You have great creativity in this world of code…

  33. Great looking site. Just found it, so I’ll trust the redesign is heads and tails above whatever was before. Great photos too – a true skill.


  34. I really enjoy seeing a new blog design that is well done and beautiful. Unfortunately I have poor theme-choosing skills and I sometimes become a little jealous.
    I’m currently green and not happy with my current color scheme or list-style choice , I blame you!

  35. It is a great looking header page, but yeah, try and browse through your photo gallery. On every page, we’re forced to scroll down to look at the picture in question, and then you hit next, and WHAM! “” you’re back looking at that big ol header image again, and then you scroll down, and then you hit next, and then WHAM! “” you’re back looking at that big ol header image again, and then you scroll down, and then you hit next, and then WHAM! “” you’re back looking at that big ol header image again, and then you scroll down, and then you hit next, and then WHAM! “” you’re back looking at that big ol header image again, and then you scroll down, and then you hit next, and then…oh, sorry.

  36. Hi. This has probably already been mentioned times without number. My input is not about the physical dimensions of the header itself or the design but the fact that even on my 8MB broadband connection the header loads much later than the rest of the page leaving a void at the top probably due to its weight. In comparison the older design loaded literally in an instant. I’ve no doubt that Photomatt knows better.

  37. I have been meaning to compliment you on the redesign. I experience most of the web through bookmarks, not feeds, so good design is always noticed and appreciated. Awesome work.

  38. Hey, I just noticed that for the time on all of your comments the minutes are the same as hours. Is there a reason for that, or is it just one of your “easter eggs”?

  39. Nice new look, but I do like the Jazz one as well (it’s so you) – it was so romantic, chic and stylish theme! I wish I can ‘steal’ the jazz theme to my own blog! lol

    Time to have a new theme!