Just today I launched the new design of my blog. I had been upset over my old design for a while; I couldn’t really put my finger on why, but I just felt that the design was really messy and unprofessional. One of things that REALLY bugged me is that the colours looked awful on Windows machines. For the new design, I decided to play it safe and stick with mostly grayscale colours.


The old design…ew!!

I grabbed the background pattern that I created last year, and used it as a foundation of the new design. I didn’t want it to be too distracting so I toned down its opacity quite a bit. I’d like to work on a new background sometime soon because I feel this one is a bit too disorganized.


My repeatable background pattern

I went through various variations of the design, getting feedback from friends and coworkers. Mark Dunkley gave me a lot of quality feedback, as usual. I really liked the idea of having a 100% width <div>’s for the headers and footers. Later on I felt that having multiple <div>’s spanning across the page was a bit overkill, so I decided to keep it for just the footer.

Big props to Steve Hatcher’s CSS Sticky Footer, which I’m using using for this site. I can’t even think of how much time I would have spent if I were to figure out how to make a sticky footer on my own. Thank you, Mr. Hatcher!!


An earlier version of the new design

I think now I can finally say that I’m content with the design of my blog. Any feedback/comments would be greatly appreciated! I also have a pretty kick-ass Shopify tutorial coming up, so stay tuned!

UPDATE (11/20/2009): Taking Caroline’s advice, I decided to make it so that my logo is only present on the index page. This should make it easier for visitors with smaller laptops to browse my site :). Also, created a 404 page.

3 Responses to “New Design!”

  1. Caroline Schnapp on November 19th, 2009

    Looks great, Tetsu. I like the span-across header too. I like both variations: that other one and this one. Your pattern is fantastic!!! and it has just the right intensity the way you use it for your background now. The width of your content is optimal, and so is text size. Your blog is very readable (something I always appreciate immensely). Most people use laptops to read you, I would assume (or maybe my brain is farting). Styling for the ‘active’ menu item is a nice touch. And that menu is just perfect by the way. I am glad you’re using your iconic piggy head (or is it rabbit slash pig).

    Your old theme looked professional by the way. It’s all relative :) the stakes have been raised higher with this new theme. It’s better, yeah. Better than great.

  2. Caroline Schnapp on November 19th, 2009

    For people who don’t need to scroll to see both header and footer I totally see why this header works better than the span-across-black. No sandwich. But besides the sandwich, this variation has grown on me already and I appreciate it more now. I looks better.

    I was wondering if there could be a skip to content link for people who use laptop like me. Header takes quite a bit of vertical space. Really need to scroll to content each time. But then again, I would hate if I were you to add something to that header. I always prefer to remove rather than add, you know.

  3. Admin Image
    Tetsuro on November 19th, 2009

    Hi Caroline, thanks for the great feedback! I especially liked the comment about the sandwich :), I definitely want to avoid that.

    You are absolutely right about the header. It does take up quite a large amount of vertical real estate, and this will definitely be a problem for 13″ laptops. I’m going to think about making the header a bit smaller, or maybe even make it so that the bunny + bubble is only present on the index page.

    Thanks again for your comments Caroline! You rock!

Leave a Reply: