Responsive Design with WordPress and HTML5 Boilerplate
So at Graphic Granola we’re big fans of forward thinking design, and a client came along that seemed perfect for us to dive into something that’s been garnering a lot of attention lately: Responsive Design. The client is a Video production company, and they wanted something hip to set their organization apart from the others. We decided to go with a ‘one-page’ website to maximize conversions and describe the organization in a somewhat more curated form, almost as a narrative.
We’re also huge fans of WordPress as Graphic Granola, and develop almost exclusively with it. So I got the fun task of making a responsive, single-page template for WordPress.
Boilerplate
My first step with the customization was to install a basic templating theme, and make a child theme of that. I like Boilerplate for WordPress, as it has a lot of the great new HTML5 elements out of the box, and literally nothing else. when i comes to templating themes I am very wary, but Boilerplate simply put’s everything in the tags they are supposed to be in.
<article>
<header>
Post Title
</header>
Post Content
<footer>Post meta-info</footer>
</article>
etc… Boilerplate actually does a lot more stuff under the hood than that, but I’ve never really figured out the intricacies of it. Not a best practice maybe, but I guess I trust that the developers know what they’re doing.
320 and Up
After installing Boilerplate and making a child theme of it, I decided to go with a bare-bones CSS library called 320 and Up. This library is actually an ‘extension’ for Boilerplate, so I feel confidant that the two should play well together. The first thing I noticed with 320 and Up was that, for a CSS library, it sure contained a lot of Javascript and images.
Ah, then I noticed this on the 320 and Up page:
-
Replace 404.html, index.html, /css/, /img/ and /js/ from HTML5 Boilerplate with ‘320 and Up’
So these are there to replace files in the boilerplate. This might be an issue, if I change files in the Boilerplate directory, and then update the Boilerplate theme down the road, then that means all my fancy responsiveness goes down the drain. So I’ve got to see just how handy WordPress is at replacing things intelligently using child themes. That is to say: If I simply include the 320 and Up changes in my child theme, will WordPress know to replace the Javascript, CSS, AND images with the new ones? Find out Wednesday in my ongoing exploration and tutorial of how to use responsive design philosophy with WordPress.
