Yes, this is another “My First Responsive Website” blog post. I know there are a great many such posts scattered throughout the internet, but dammit, I am excited about this damn site, so I am going to post my own damn post about it. Dammit.
I love responsive design. Then entire concept of making a site device agnostic and future-proof (to a certain extent) appeals to the part of me that would rather buy bulk canned food than repeatedly go to the supermarket: I hate doing things over and over. Which, unfortunately, is the nature of web design/development. So building a site with a framework that can be easily tweaked to compensate for new technologies is super awesome. Also also, it’s fun! I definitely had a great time deciding how to make elements of the site behave at different resolutions and window sizes. I even stuck a few Easter eggs throughout that only appear at certain resolutions. It makes the nerd in me happy. I should also note that having previously read Ethan Marcotte’s Responsive Website Design, I was more than prepared to tackle this. I can’t recommend that book enough if you plan on doing this yourself.
So the nitty gritty…
I designed my site using the 960.gs grid overlay and then built a fluid grid from scratch using percentages to make the whole thing flexible. Doing shit myself instead of using pre-built work helps me get a feel for how all the moving parts work. But if you prefer to save yourself time, just go here: grids.heroku.com. After I built the grid, most of the dev process was like any other wordpress build. Setting my container to have a max width of 960 made my grid stop expanding at that point, but left it very easy to expand should I ever want to adapt the site for larger, wider screens. After the site was built out, it was time for fun with media queries.
Why I Don’t Give a Shit About IE
A few other bits I found very heplful in this build were Isotope (see my portfolio), which I integrated very nicely with wordpress so it is powered by posts and categories, and Modernizr for accessibility and compatibility. My next couple posts will be about these items, but I wanted to give credit where it’s due.