Recently, I built my first “responsive” Drupal website.  I also decided to add some HTML5 to the mix, so you’ll see HTML5 elements like section, header, etc in the markup.  Plus, we threw in some nifty web fonts and a cool one-page slider effect just for giggles.  Actually, we did it on purpose, but you know what I meant!

I was surprised at how easy it was to make it responsive, but it did require some additional thinking from the outset. Now, to be totally fair, the site isn’t 100% responsive becuase it does max out in width between 900-1000 pixels.  That said, I found the most important thing to remember was to keep the floats and positioning styles in their own “desktop” media query.  Also, by thinking “mobile first” I was able to linearize the site from the beginning, which kept my “desktop” media query very lean.  I used Scott Jehl’s respond.js script to make the media queries happen in IE 8 and below.

Overall, the site was really fun to build as it was a live “test” using some newer techniques in Drupal.  Design credit for the site goes to the wonderful Haley Ahlers.