I've gone responsive

So this weekend, with Ethan’s book in hand, I sat down to tweak my blog. (See my previous post for a review of the book itself.) When I launched this design back in March, I had used the A List Apart article to set it up and prep it for a liquid layout, knowing that I would eventually come back and make it truly responsive. Well, this weekend the time came and I set about to add in the media queries and see how I could make the design flex depending on the width of the browser.

I have to say, it was so much fun. It really only took me a couple of hours to get the basics down and have it flexing from 3 columns, down to 2 columns, down to 1 for the smallest screens. I did run into a few bugs, things that I missed or wasn’t sure about, but I loved having the book by my side to help me work through all those issues. After getting the basic layout to conform, it was then time to decide about the design.

While making it flexible, I decided to do some very minor tweaks to the design. I got rid of my name and made my tag line the main line, Pixel Coder. I also took a look at how the navigation was working on the smaller widths and I hope that I solved the problems there and made it easier to use at smaller sizes. In addition, on the work page, I implemented the fluid image idea and I am loving how that flexes and changes as the screen size changes.

The other major change is the type. I have gone all Typekit, all the time. So now my whole site, both headers and body text, is using one of two different fonts from Typekit. Because this site is mainly about reading I wanted to choose a type that was easy to read. I chose Chaparral Pro for the main typeface and I upped the size of the type for the body text, hopefully making it easier to read. I also decided to have the body and header type the same, I like the unified look. I am using Urbana for my navigation, I just love the tight, sleek quality of it and felt that it was a nice contrast to have a sans serif font there when I am using a serif everywhere else. I’ll see how this goes as time goes on, there is always tweaking to be done, but right now I am happy with the outcome. The only thing I am still pondering are font sizes  for the different widths, not sure I’ve got them exactly right yet.

Since I only have a few devices myself, I could only test this in a few different screen sizes, but things seems to be working well for the iPhone, iPad2 and Kindle. If you see anything weird, please do let me know. I am eager to try it on a few others if I can track down someone at work who will let me take a gander at my site on their device.

I of course still have things I want to change, tweak, investigate. I am still learning about Wordpress, so there are things not working exactly as I’d like behind the scenes. I know that my stylesheet could be cleaner and more compact. But I am loving that I am now serving my content up in a legible, easy to use layout no matter the device users are using to read it. Thank you Ethan, your clarity of writing made this fun and easy!