This site functions as an archive of Conner's Blog, which was a blog from 2006-2014 located at http://connermccall.com. Images and links are likely to be broken.

Responsive Redesign

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.
I'm sure there are bugs, one of the problems of working by yourself and launching at 10pm is that you're bound to have missed something. Still, it was a fun and useful experiment, and I intend on applying the lessons I learned going forward.

Comments