Site Redesign May 2012 part 1: My approach

I’m finally redesigning this site!  I’m putting it on GitHub for version control, but also because I think it’s neat to be able to learn from others’ source code.  Here is the repository.  In addition to fully commenting everything, I’m keeping notes on sites I find really useful while I’m working on this.

I’m attempting a responsive design (read Responsive Web Design!  It’s awesome).  I’ve decided to do basic layout structuring for three different layouts (small, normal, big) in stand-alone stylesheets first, then build up with media queries from the small one to the big one (my attempt at mobile-first).  So far I’ve done the normal and the small.  Next is to do the big layout, then combine them into one stylesheet with media queries so it’s actually responsive.  Then, add real styles instead of this ugly temporary yellow boxy look.  And finally… the part I’m unsure about… is integrating this with WordPress.  We’ll see!

I really like Media Queries, which is where I’m getting a lot of inspiration for responsive designs.  I’ve taken to resizing nearly every site I come across now, to see if it’s responsive.  That’s how I found the awesome little detail on CSS-Tricks – the narrower the width, the more worried the frog gets!  See for yourself!

I also wanted to note that HTML5 Boilerplate is awesome.  I’m not using it, because it’s a little too full-featured for me (I want to learn and start from the basics on my own instead of using a whole pre-built structure right now), but the comments in it are so useful and great to learn from.  I’m starting reading source code a lot more lately.  Which reminds me, I remember back when I was playing around with websites in middle school, there was that trend of disallowing right-click so that people couldn’t “steal” images or source code…  Things have changed so much now, there are even ads in source code!  Check it out – look at this source code of Blacktie.  I have no idea what that site is (I found it through HTML5 Gallery), and I found that source code ad on accident, but I think it’s awesome despite the fact that it’s an ad.  It’s an interesting way to get to your target audience!

Responsive Web Design by Ethan Marcotte

I finished this book a few weeks ago, but never got around to writing about it.  I loved it though!

Ever since I came across the idea of responsive design, I’ve been fascinated with it.  I just think it’s such a neat idea, and it seems so obvious after you hear about it.  After I finish the Infinite Parallax experiment I’m going to make a responsive layout for BaconFriedRice!  Yes, two years later, I’m finally going to actually work on it! (For real!)

Anyway, Responsive Web Design by Ethan Marcotte is amazing, especially because it is written by the guy who came up with the idea in the first place.  Just like all the other A Book Apart books, the writing tone is awesome, and the content tells you things you can do to create a responsive site right now.  He shows you how to do it by creating an example page that you can actually go view and play around with.

One thing I really like that Marcotte says is that a web designer’s canvas is the browser (page 3).  However, unlike other art mediums where the canvas is precisely selected beforehand, the browser continually changes, and you can’t rely on a consistent format, which make web design pretty challenging.  I’ve never thought of it that way before, but now I view it all in a whole new way.

Marcotte sees three ingredients of responsive web design, and breaks up the chapters accordingly: 1) a flexible, grid-based layout, 2) flexible images and media, and 3) media queries (page 9).  I won’t go too much into exactly what he says in the book, but I found it extremely helpful.  He breaks down the steps he takes to make a layout responsive, which makes it pretty easy to follow, and it seems like it’s not too hard to break into creating responsive designs.

Basically: read this book!

Also, he made an “over 9000” joke :) He put comments above some media query breakpoint examples: “Default, linear layout”, “Small screen!”, “Desktop”… and “IT’S OVER 9000”!

Just read it!