ben tedder

Making my website responsive

Try resizing the window, I've swallowed the pill and made my website responsive. It's a sloppy job I'm sure, but it seems to work ok. I accomplished this with a few things:

  • CSS3 Media Queries
  • Modernizr.js
  • Respond.js (don't think it loaded by default for some reason in modernizr. weird)

I've decided on 3 main sizes. They aren't particularly standard practice, but they work for my site. In my case, I have pretty basic stylistic differences between screen sizes. Here's my setup:

@media only screen and (min-width: 716px) and (max-width: 970px) {...}

@media only screen and (max-width: 716px) {...}

Because my site runs on wordpress, I've also installed a Modernizr and Respond plugin. Yes, I could have put them in myself, but the goal was a quick and dirty implementation of responsive design. I've tested in Safari, Firefox, and IE7/8/9. Everything seems to work except my background-size declaration in any version below IE9. Oh well. For another time…

I'll also be writing soon on the differences on doing responsive design vs using something like jQuery mobile.

A few resources:
Responsive Web Design: What It Is and How To Use It
Modernizr
Taking Advantage of HTML5 and CSS3 with Modernizr