Joseph Carrington's Internet Website

Comics and junk by a mostly friendly fellow.

Posts tagged HTML5

Sep 19

On second thought, why use a framework at all?

A few reasons why I’ve decided to eschew frameworks for this project:

  • I have the great book Responsive Web Design by A Book Apart. This makes the 320 And Up CSS framework unnecessary.
  • The needs of a ‘one page’ website are so significantly different than a multi-page site that using a framework like Boilerplate for Wordpress would be way overkill.
  • Generally speaking, it’s easier for me to learn how to do something right when I have to do it all on my own.

So what’s the plan now? Well, the first thing I did was go back to basics, and make an index.php, header.php, footer.php etc. All clear markup, sparse meta information, and laid out in the most accurate HTML5 elements I could figure.

<html>
    <head>
    </head>
    <body>
        <header>
            <nav></nav>
        </header>
        <section>
            <header><h1>{section title}</h1></header>
            {section content}
        </section>

        <section>
            <header><h1>{section title}</h1></header>
            {section content}
        </section>
        <footer></footer>
    </body>
</html>

This process took a bit of time but I think it’s well worth it to start off with a thorough architecture, this allows you to have a good gauge for where you are in the project.

Today I’ll be working on a ‘mobile first’ design implementation. (Although I’d add to that list of reasons ‘a non media-query aware browser is benefited from a mobile-first solution as well, since it will display the simplest version of the site, as opposed to the most complicated’)


Sep 12

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.

Strange file structire

Ah, then I noticed this on the 320 and Up page:

  1. 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.