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
I am not going to go into too much more depth about building a responsive site because you really can find all this info in a million different places, and my experience isn’t super different than many others’. But one thing I do want to write about is my decision to disable responsiveness for every version of IE below 9. If you visit this site on IE 8 or below, once your browser screen drops below 960px width, you will get a horizontal scroll bar…just like most sites made in the last several years. (This was simple: just add an IE < 9 stylesheet that adds a min-width:960px attribute to the container element.) As most developers know, below IE 9, there is no support for media queries. This can be overcome using javascript, but every method has drawbacks. I spent a lot of time trying to make it work, and lots of foul language was uttered along the way. Then I took a step back and asked myself why it even mattered. One of the main reasons I want to make my site responsive is to deliver the best user experience, regardless of the user’s device. It’s fairly safe to assume that someone still using IE 8 or below is used to browsing full screen, eliminating any benefit to a responsive site. But more importantly, I looked at my google analytics. In the past year, only 10% of my web traffic has come from IE. A bit over half of that is IE 9 (which is refreshingly compatible). So less than 5% of my traffic comes from IE 8 and below and that number will only continue to decrease. So it made no sense to waste time and effort to attempt to provide a user experience that less than 5% of my audience would benefit from (and as mentioned previously, most of those people wouldn’t notice a damn thing anyway). I voted in favor of stability and less javascript.
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.