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!