I've come to realize I really enjoy web development. So much in fact that I'm working on persueing a career as a web developer. Considering I never thought I would want to sit in front of a computer writing code, this comes as a surprise to me. But I can't help what I like.
So this weekend I embarked on a quest to make this site responsive. What this means is that it adapts to your browser. Whether you are viewing the site on a mobile device like a smart phone or an iPad, or you're looking at it on your widescreen monitor, it should adjust to your browser window.
I took a lot of inspiration from Ethan Marcotte's Responsive Web Design book. It's a great resource and makes you think a bit more about how you view the web. Moving the thought process away from mobile sites to mobile ready is a big step. But it can really improve the user experience.
A few notes about how I went about this process.
- I started with a mobile first methodology. I reused my previous design, but I changed the markup and styles to make the site look good in my iPhone browser.
- I used media queries, which means it may not look that great using some older browsers.
- Flexible Grid - Since my site didn't have sidebars this wasn't too difficult, but the site will expand and contract as you expand on contract your browser window on a standard browser. I did stop the expansion at 1280px. That seemed wide enough for most uses.
- I will be checking out the site on my PS3 browser soon to see what I can do to make it TV friendly.
- I actually cut down the amount of code in each page by this redesign, and my CSS files shrank as well.