Towards a Responsive Design

I am not sure I had really paid attention to the term responsive design when I started the redesign for this site. I just knew I wanted something that would be as readable on an iPhone as it was on my large desktop monitor. I made some conscious decisions to remove a bunch of extraneous elements not for the mobile viewing, but I simply wanted to focus attention on what ever it was I was writing about. Sidebars full of links, tweets, buttons and badges might have been novel 6 years ago when I started this site, but not so important to me now.

I also wanted to learn more about HTML5 and CSS3. For my own site, I’m completely not interested in supporting old browsers, save for using a HTML5 polyfill for < IE 9. If someone is using IE 6, they probably don’t have much interest in what I’m sharing anyway. So I played with some max-widths and widths based on percentage until I found something that worked for me. Perhaps that’s not the best way to approach it, as the site really should be about those visiting, but I guess I made an assumption my browsers/screen resolutions/mobile devices were common enough that if it looked OK to me, it should look OK to visitors. Up until today, I was fairly happy with what I had come up with, save for the Youtube videos I’ve been posting. I have been experimenting with using the HTML5 iframe wrapper Youtube offers, and choosing a very large version of the video. Which wasn’t working out for smaller screens.

But as I’m studying more about the advanced concepts of responsive design and using media queries, I ran across Ethan Marcotte’s fluid images post. Lo and behold, I set <pre>iframe {max-width: 100%}</pre> and my video posts scale along with the surrounding content.

I’m not sure I will mess with this site anytime soon code or design wise, but I do intend to experiment with using the Less Framework and possibly the intriguing context aware responsive images script over on my cooking site, which is a blueprint based grid design spun off of the markup of this site. I don’t think it would take much to convert the grid to the Less Framework. I may think about a design that’s not quite as similar to this in the process.

Regardless of the direction, I’d like to thank Kevin Zurawel for his WordCamp Miami session on responsive design and piquing my interest on the subject even more.