Nov
13

New Blog Design

Filed under: Design, Meta | November 13th, 2006
Post

It is now official get out of your RSS reader day. Take a few minutes to check out the new photomatt.net 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.

151 Responses

  • Avatar

    seriocomic | November 13th, 2006 @ 3:53 am | Reply

    Congrats! It’s been a long time coming, but appears to be worth it. The name of the header image (giant-header.jpg) is fitting ;)

    Current score: 0
  • Avatar

    Glenda | November 13th, 2006 @ 3:56 am | Reply

    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

    Current score: 0
  • Avatar

    Bryan Veloso | November 13th, 2006 @ 4:00 am | Reply

    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.

    Current score: 0
  • Avatar

    lucacicca | November 13th, 2006 @ 4:00 am | Reply

    Mmhh… 149 KB for the header image are a lot, but the blog is beautiful.

    Current score: 0
  • Avatar

    Abhijit Nadgouda | November 13th, 2006 @ 4:04 am | Reply

    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 :-)

    Current score: 0
  • Avatar

    Amit | November 13th, 2006 @ 4:07 am | Reply

    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!! :)

    Current score: 0
  • Avatar

    Elea | November 13th, 2006 @ 4:12 am | Reply

    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…

    Current score: 0
  • Avatar

    Konstantinos | November 13th, 2006 @ 4:13 am | Reply

    Nicely done, Matt.

    Current score: 0
  • Avatar

    TDH | November 13th, 2006 @ 4:13 am | Reply

    It’s really nice Matt, a great improvement!

    Current score: 0
  • Avatar

    Derek Punsalan | November 13th, 2006 @ 4:23 am | Reply

    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.

    Current score: 0
  • Avatar

    pinguin | November 13th, 2006 @ 4:36 am | Reply

    very nice.

    Current score: 0
  • Avatar

    xinfo | November 13th, 2006 @ 4:52 am | Reply

    above back ground color look like kinda wall paper late 80’s style

    Current score: 0
  • Avatar

    Nina | November 13th, 2006 @ 5:40 am | Reply

    Wow, this is really pretty. Congrats! :D

    Current score: 0
  • Avatar

    Rob Hyndman | November 13th, 2006 @ 5:53 am | Reply

    Sweet. Really sweet.

    Current score: 0
  • Avatar

    Alistair | November 13th, 2006 @ 6:07 am | Reply

    What a great surprise to get this today Matt, fantastic redesign. Congratulations to Nicolò Volpato for putting it together for you.

    Al.

    Current score: 0
  • Avatar

    Petit | November 13th, 2006 @ 6:16 am | Reply

    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 ;)

    Current score: 0
  • Avatar

    Chris G. | November 13th, 2006 @ 6:25 am | Reply

    Stellar redesign!

    Current score: 0
  • Avatar

    David Babylon | November 13th, 2006 @ 6:28 am | Reply

    Well done. I love it.

    Current score: 0
  • Avatar

    Andy | November 13th, 2006 @ 6:33 am | Reply

    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.

    Current score: 0
  • Avatar

    indi | November 13th, 2006 @ 6:36 am | Reply

    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

    Current score: 0
  • Avatar

    dandyna | November 13th, 2006 @ 6:37 am | Reply

    oooOOOO!!! amazing!

    Current score: 0
  • Avatar

    Titanas | November 13th, 2006 @ 6:47 am | Reply

    Nice one! I like the fade out effect on the background and the huge header with red all over.

    Current score: 0
  • Avatar

    Thomas Silkjær | November 13th, 2006 @ 7:03 am | Reply

    On time ;) - And nice to see a great 1 column design.

    Current score: 0
  • Avatar

    Phu | November 13th, 2006 @ 7:09 am | Reply

    Lovely stuff. Nicolo’s worked wonders:)

    Current score: 0
  • Avatar

    Kristin | November 13th, 2006 @ 7:10 am | Reply

    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?

    Current score: 0
  • Avatar

    rzepak | November 13th, 2006 @ 7:20 am | Reply

    very nice indeed!

    Current score: 0
  • Avatar

    Kitta | November 13th, 2006 @ 7:23 am | Reply

    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.

    Current score: 0
  • Avatar

    Charleen | November 13th, 2006 @ 7:50 am | Reply

    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.

    Current score: 0
  • Avatar

    Mike Purvis | November 13th, 2006 @ 7:55 am | Reply

    This is really gorgeous; wish I had those Photoshop skills.

    Current score: 0
  • Avatar

    Aargh | November 13th, 2006 @ 8:28 am | Reply

    Love the new design. It jumps off the page at me!

    Current score: 0
  • Avatar

    Jos | November 13th, 2006 @ 8:40 am | Reply

    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? :)

    Current score: 0
  • Avatar

    Ethan Neuenswander | November 13th, 2006 @ 8:49 am | Reply

    Looks Nice, The Wordpress sticker is also nice.

    Current score: 0
  • Avatar

    Ted | November 13th, 2006 @ 9:09 am | Reply

    Very nice… I like the header design most =)

    Current score: 0
  • Avatar

    elsakawai | November 13th, 2006 @ 9:15 am | Reply

    I wish i am so smart like u!! lovely site :)

    Current score: 0
  • Avatar

    Joerg Petermann | November 13th, 2006 @ 9:22 am | Reply

    Great look, new, fresh, better than the older one.
    Colors of your life with nice photo integration. Good!

    Current score: 0
  • Avatar

    Mike Steinbaugh | November 13th, 2006 @ 9:36 am | Reply

    It looks great Matt! Good job.

    Current score: 0
  • Avatar

    Malte | November 13th, 2006 @ 9:38 am | Reply

    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.

    Current score: 0
  • Avatar

    Jonathan Rascher | November 13th, 2006 @ 9:45 am | Reply

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

    Current score: 0
  • Avatar

    ludwik | November 13th, 2006 @ 9:50 am | Reply

    very sexy!

    Current score: 0
  • Avatar

    becca | November 13th, 2006 @ 9:57 am | Reply

    nice! now you’re finally in with the times! ;)

    Current score: 0
  • Avatar

    engtech | November 13th, 2006 @ 10:06 am | Reply

    It is now official get out of your RSS reader day.

    that… that… that’s just crazy talk!

    Current score: 0
  • Avatar

    Michael K. Pate | November 13th, 2006 @ 10:12 am | Reply

    Jealous of Alex, huh?

    Current score: 0
  • Avatar

    Matt | November 13th, 2006 @ 10:33 am | Reply

    No plugin for Gallery, just an old version hacked to bits.

    Current score: 0
  • Avatar

    Eliot Landrum | November 13th, 2006 @ 10:37 am | Reply

    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!

    Current score: 0
  • Avatar

    Mike D. | November 13th, 2006 @ 10:40 am | Reply

    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.

    Current score: 0
  • Avatar

    claude | November 13th, 2006 @ 10:45 am | Reply

    very nice

    “très beau” in french

    Current score: 0
  • Avatar

    seanrox | November 13th, 2006 @ 11:11 am | Reply

    Wow Matt! This is one awesome design. Very classy and functional at the same time. It even has a bit of geek feel to it as well. Again, great job.

    Current score: 0
  • Avatar

    Eston | November 13th, 2006 @ 11:18 am | Reply

    Matt, this looks a lot better than the old layout- that’s for sure.

    Current score: 0
  • Avatar

    luke dorny | November 13th, 2006 @ 11:47 am | Reply

    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.

    Current score: 0
  • Avatar

    jess | November 13th, 2006 @ 12:11 pm | Reply

    Damnnnnnnnnn. So hot! Good job, darlin’.

    Current score: 0
  • Avatar

    photojunkie | November 13th, 2006 @ 12:12 pm | Reply

    Drool!!!!

    Awesome.

    Current score: 0
  • Avatar

    Venu | November 13th, 2006 @ 12:12 pm | Reply

    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 :)

    Current score: 0
  • Avatar

    Epat | November 13th, 2006 @ 1:04 pm | Reply

    finally, :-D
    nice design

    Current score: 0
  • Avatar

    Hiten Shah | November 13th, 2006 @ 1:47 pm | Reply

    About time…looks really good :-)

    Current score: 0
  • Avatar

    AsceticMonk | November 13th, 2006 @ 1:48 pm | Reply

    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.

    Current score: 0
  • Avatar

    Harry | November 13th, 2006 @ 2:09 pm | Reply

    A very fresh and good looking Design!
    Nice color balance.

    Current score: 0
  • Avatar

    Johan Van Mol | November 13th, 2006 @ 2:10 pm | Reply

    Great redesign!
    Huge improvement over the last design.
    I can imagine the header being too large when you’re using a low resolution, but on my 1680*1050, he’s superb.

    Current score: 0
  • Avatar

    Nate K | November 13th, 2006 @ 2:25 pm | Reply

    The new design looks great! It has a great feel and flow throughout the entire site. The header gives it great personality.

    Awesome job.

    Current score: 0
  • Avatar

    doug | November 13th, 2006 @ 3:01 pm | Reply

    Great design!

    Current score: 0
  • Avatar

    Mike | November 13th, 2006 @ 3:10 pm | Reply

    Really nice job, it does a good job of illustrating who this Matt guy is. Google and I agree: you’re the #1 Matt around.

    Current score: 0
  • Avatar

    Daniel | November 13th, 2006 @ 3:14 pm | Reply

    like the header and the red/brown background. navigation is also very usable…

    Current score: 0
  • Avatar

    ade | November 13th, 2006 @ 3:41 pm | Reply

    This is absolutely awesome.

    Current score: 0
  • Avatar

    Andre | November 13th, 2006 @ 3:46 pm | Reply

    Looking great. The new design was definatly needed.

    Current score: 0
  • Avatar

    Jonathan Dingman | November 13th, 2006 @ 6:07 pm | Reply

    Wow Matt! Awesome job with the redesign. I really like it a lot. Fresh, clean, and awesome! Good job.

    Current score: 0
  • Avatar

    siUUL | November 13th, 2006 @ 7:35 pm | Reply

    wew.. good looking ya!

    Current score: 0
  • Avatar

    dawn | November 13th, 2006 @ 8:11 pm | Reply

    I think this is the best one I’ve seen yet. The colors are nice and the navigation is clean. Well done!

    Current score: 0
  • Avatar

    Raj | November 13th, 2006 @ 9:41 pm | Reply

    very nicely done. the photo integration in your header is really cool. Should have been a little smaller in size though. :)

    Current score: 0
  • Avatar

    filosofo | November 13th, 2006 @ 10:07 pm | Reply

    For a second I thought I saw my reflection in the coffee.

    Current score: 0
  • Avatar

    DannyB | November 13th, 2006 @ 10:34 pm | Reply

    AWESOME !!

    Very nice … very hard to see things that stand out …

    Current score: 0
  • Pingback: shorty114.net

  • Avatar

    Shriram | November 13th, 2006 @ 11:41 pm | Reply

    The new design looks awesome Matt !

    Current score: 0
  • Avatar

    Lori | November 13th, 2006 @ 11:55 pm | Reply

    Beautiful design. I love the header :)

    Current score: 0
  • Avatar

    stchatterbox | November 14th, 2006 @ 12:21 am | Reply

    Very attractive design. I love the header image.

    Current score: 0
  • Avatar

    Priscilla | November 14th, 2006 @ 12:35 am | Reply

    Nice, love the header!

    Current score: 0
  • Avatar

    vanchisel | November 14th, 2006 @ 1:17 am | Reply

    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.

    Current score: 0
  • Avatar

    Kishore Balakrishnan | November 14th, 2006 @ 1:35 am | Reply

    Looks very nice. But the akismet “blue button” looks odd !

    Current score: 0
  • Avatar

    milo | November 14th, 2006 @ 2:13 am | Reply

    Congrats to you and Nicolò for the tremendous work: fresh out of the box.

    Current score: 0
  • Avatar

    Adel | November 14th, 2006 @ 3:01 am | Reply

    Lovely! A good change from the earlier one.

    Current score: 0
  • Avatar

    Miriam | November 14th, 2006 @ 3:09 am | Reply

    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.

    Current score: 0
  • Avatar

    Mark Jaquith | November 14th, 2006 @ 4:13 am | Reply

    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.

    Current score: 0
  • Avatar

    Lisa | November 14th, 2006 @ 4:30 am | Reply

    Good. I was getting tired of that yellow background.

    Current score: 0
  • Avatar

    Jem | November 14th, 2006 @ 7:46 am | Reply

    Very swish.

    Current score: 0
  • Avatar

    Ryan | November 14th, 2006 @ 8:13 am | Reply

    Excellent work by all involved.

    Current score: 0
  • Avatar

    leo | November 14th, 2006 @ 8:45 am | Reply

    awesome, looks good

    Current score: 0
  • Avatar

    engtech | November 14th, 2006 @ 9:20 am | Reply

    I’m really digging the way pingbacks don’t disrupt the conversation.

    Current score: 0
  • Avatar

    Blaze | November 14th, 2006 @ 9:50 am | Reply

    Very nice work matt! Congrats.

    Current score: 0
  • Avatar

    Baysharam | November 14th, 2006 @ 10:31 am | Reply

    Grooovy man

    Current score: 0
  • Avatar

    William H. Harle Jr. | November 14th, 2006 @ 10:45 am | Reply

    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.

    Current score: 0
  • Avatar

    JDH | November 14th, 2006 @ 10:53 am | Reply

    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.

    Current score: 0
  • Avatar

    Aaron | November 14th, 2006 @ 11:00 am | Reply

    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.

    Current score: 0
  • Avatar

    Andy | November 14th, 2006 @ 11:01 am | Reply

    This is a very nice design, both in terms the actual look and in the way the elements fit together. Bravo!

    Current score: 0
  • Avatar

    Robert Payne | November 14th, 2006 @ 12:51 pm | Reply

    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!

    Current score: 0
  • Avatar

    Empress | November 14th, 2006 @ 2:07 pm | Reply

    Wow… love the new look :) It sure makes me want to change things up on my site!

    Lurve it!

    Current score: 0
  • Avatar

    Yasnnic | November 14th, 2006 @ 2:14 pm | Reply

    well done matt!
    I love it.

    Current score: 0
  • Avatar

    typoman | November 14th, 2006 @ 4:50 pm | Reply

    On my small notebook screen, the big banner takes all the place. Perhaps a bit too big. But although a real good site! Congratulations!

    Current score: 0
  • Avatar

    Birgit | November 14th, 2006 @ 5:18 pm | Reply

    beautiful new design, congratulations!

    Current score: 0
  • Avatar

    rhythm collision | November 14th, 2006 @ 7:08 pm | Reply

    It’s so really kool!
    I like a header part.

    Current score: 0
  • Avatar

    Kory Twaites | November 14th, 2006 @ 9:20 pm | Reply

    Great layout. Nice and Clean, but gets the job done.

    Current score: 0
  • Avatar

    Matt | November 15th, 2006 @ 12:23 am | Reply

    Actually it’s hot chocolate, not coffee. :)

    Current score: 0
  • Avatar

    Richard | November 15th, 2006 @ 12:46 am | Reply

    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!

    Current score: 0
  • Avatar

    Indigo | November 15th, 2006 @ 5:41 am | Reply

    Love big masthead images that are interesting. One small criticism, sadly the design gets a bit too plain as one scrolls further down the page.

    Current score: 0
  • Avatar

    Juha Liikala | November 15th, 2006 @ 5:49 am | Reply

    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 :(

    Current score: 0
  • Avatar

    that girl again | November 15th, 2006 @ 9:40 am | Reply

    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.)

    Current score: 0
  • Avatar

    LobsterMan | November 15th, 2006 @ 10:50 am | Reply

    Amazingly beautiful!!!

    Current score: 0
  • Avatar

    Paulo Raponi | November 15th, 2006 @ 11:10 am | Reply

    beautiful

    Current score: 0
  • Avatar

    Aaron Brazell | November 15th, 2006 @ 11:16 am | Reply

    Only one word comes to mind, Matt. Sexiness. Great design.

    Current score: 0
  • Avatar

    Liza | November 15th, 2006 @ 7:00 pm | Reply

    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…
    thanks

    Current score: 0
  • Avatar

    patrick | November 15th, 2006 @ 7:20 pm | Reply

    Wah! this is beautiful design. :)

    Current score: 0
  • Avatar

    Brian | November 15th, 2006 @ 9:34 pm | Reply

    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.

    Cheers.

    Current score: 0
  • Avatar

    Damien | November 15th, 2006 @ 10:32 pm | Reply

    Have to say I do like this theme very much…good work :)

    Current score: 0
  • Avatar

    Angee | November 16th, 2006 @ 2:16 am | Reply

    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!

    Current score: