New Design (Now with Responsive Goodness!)

A few months ago I stumbled across this awesome book called Responsive Web Design. No lies, this book seriously changed my life. It changed the way I looked at websites, and I was absolutely fascinated by the way media queries and responsive web sites work. I found myself looking at responsive websites and resizing the browser window for hours on end seeing how the site adjusted to the viewport size.

That’s why I spent the last month or so working on a responsive web site that I could call my own. At the same time I decided to ‘re-brand’ my site to “tetchi” (my nickname since I was a kid) because it sounds way more wicked than “tetsutakara”. Today, I’m releasing my responsive web site out in the wild!

I’m currently working on a boilerplate for Shopify, which is based off of the excellent HTML5 Boilerplate. The goal is to make it easier for Shopify theme authors to start building a theme from scratch. I then plan on building a super-basic theme with it and an up-to-date “How to build a theme from scratch” screencast for it.

Anyway, hope my first responsive website works as it should. Please leave a comment if it looks funky on your device!

PS: I may have lost some recent comments as I transitioned to this new site… sorry! Please leave another comment and I’ll try to get back to you.

Silkscreening!

On Sunday I attended a workshop run by Spins & Needles called “Silkscreening 101″. At this workshop, we learned how to make our own silkscreen frames and use them for printing. We were to bring one black & white design to the workshop, so I decided to bring my Move Your Mountain design. I’ve always wanted to make my own silkscreen so I was super-excited for this workshop!

The first step was to build the frame. The frames were put together, and then the screen was stapled onto the frame so that it was really tight on the frame.

I forgot to take a picture, but after we built our frame we applied a thin layer of photo emulsion onto our silkscreen. While we waited for the emulsion to dry, we took a walk to Katari on Elgin Street and got our designs printed on an acetate sheet.

Shopify Propaganda Poster

At Shopify, we have “design challenges” every now and then. This week’s challenge was to create a propaganda poster. Below is the poster that I designed, I’m pretty proud of it

New Design!

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.

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.

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

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.