The latest version of HTML5 Boilerplate was released and the build script I worked on is included as a beta feature. I’m happy to see it in the wild even though it reminds me that I’ve got a couple of outstanding enhancements I want to take care of at some point (soon? *fingers crossed*)

Anyway, check it out and definitely take the build script for a spin. Know Ant and want to help out? Want to port it to another build system (that would be awesome)? Dive in. We’re happy for the help.

Quick, if you were to guess a technology I’d be making commits on an open source project using, would Apache Ant be at the top of the list? I didn’t think so. But yet, here I am committing an Ant Build script to Paul’s excellent HTML5 Boilerplate project. It makes sense since I’ve done work on concatenation, minification and other performance enhancements using Ant, but it’s still a weird technology to be contributing to such a cool project with…

Read the rest of this entry »

What’s the Isobar 50? Glad you asked:

Got questions? Get answers!

Let’s face it. Marketing in the digital age is hard. Where will you put your efforts? How do you know it will pay off? The Isobar 50 is our list of the top 50 challenges that online marketers are grappling with today, and our recommendations for dealing with them. If you’re an online marketer, this is the place to get answers to your most pressing marketing and online business questions.

I provided answers for three of the questions and I even sound like I know what I’m talking about:
Read the rest of this entry »

I promised one last post on HTML elements. This is it. This one will be a quick tour through some of the new semantic HTML5 elements. I’ve been using them regularly for a while now and I’m still trying to wrap my head around the best way to use some of them (in this, I’m not alone.) Hopefully sharing what I’ve learned will help jump start your own work with the new stuff and will help my clarify my own thoughts on the new elements.

This should really be fun.

header

This is one of the most straightforward of the new elements. <div id="header"> becomes <header>. Done. When I’ve presented on HTML5 people just nod when I point this element out. Hopefully this one just makes sense.

One experimental note

One thing we’ve been experimenting with at work is using multiple headers on a page. The pattern looks like this:
Read the rest of this entry »

I started doing some writing for Isobar/Molecular.

My first post:

An Introduction to HTML5

HTML5 is the latest version of the language that serves as the foundation of the web. It’s the first major revision in over 10 years and as it’s gotten closer to its final form and more and more browsers begin to implement its features it’s become a source of intense interest and contention in the technology community. This article hopes to explain the realities of HTML5, dispel a couple of myths and shine some light on the future of the web.

To begin we’ll need to define what we’re talking about when we say “HTML5.” There is a specification to refer to and much of what falls under the HTML5 name lives in that spec. In addition, there are several related specifications and APIs that are lumped together and called “HTML5″ when people talk about these things informally.

So, conversationally, HTML5 consists of the following:

New Semantic Elements

HTML5 has introduced several new elements. They aim to introduce more meaning to markup and codify existing web development patterns. Some examples of these new elements are nav (for navigation), article, header and footer.

Read the rest of this entry »

I also added a few bits and bobs to our our front-end development best practices, a doc which has been making the rounds a little bit over the past week.

Check ‘em out.

Forms. Forms are boring. 75% of all work you do with forms is exactly like all the rest of the work you do with forms. BO-RING.

But, they’re the gateway to making real money on the web, so they’re kind of important.

Hopefully, after today you’ll know all about forms and will love them.

Let’s take a look at our example form:

<form action="http://www.drunkenfist.com/304/wp-comments-post.php" method="post" id="commentform">
  <fieldset>
    <legend>Contact Info:</legend>
    <p>
      <label for="author">Name (required)</label>
      <input type="text" name="author" id="author" value="" tabindex="1" />
    </p>
    <p>
      <label for="email">Mail (will not be published)(required)</label>
      <input type="email" name="email" id="email" value="" tabindex="2" />
    </p>
    <p>
      <label for="url">Website</label>
      <input type="url" name="url" id="url" value="" tabindex="3" />
    </p>
  </fieldset>
  <p>
    <label for="comment">Comments</label>
    <textarea name="comment" tabindex="4"></textarea>
  </p>
  <div class="button">
    <input name="submit" type="submit" id="submit" tabindex="5" value="Submit" />
  </div>
</form>

This sample is based on the default WordPress theme. It’s maybe not as complicated as a sign-up form, but it does show the basics. On to it then.
Read the rest of this entry »

In case you were wondering, I’ve got two more posts after this one and then I’m moving onto CSS and JavaScript. I’ve got a post on forms (which I’ve been avoiding because forms feel like work) and then a post on the new HTML5 elements and then that’s it.

Writing about CSS and JavaScript will be fun. I’m excited. More excited than I am to write about forms at least. Which isn’t to say I won’t kick ass when writing about forms. It’ll be great.

Ignore me.

On with the show:

B, Strong, Em, I

From the just in case you were wondering what’s up with strong and em and why people use them over b and i department:

The b (bold) and i (italic) tags have been in HTML forever. I haven’t figured out when they first appeared, but they were promised as part of the documentation to the fist web site in August 1991 and later codified as part of the unofficial HTML1 spec in 1993, so 1992 is as good a bet as any.

Later on the concept of “phrase elements” was introduced. They were meant to add “structural information to text fragments” Two of those, strong and em are basically new versions of good old b and i minus the typographic baggage.

Fast forward to 2000. The W3C publishes the Web Content Accessibility Guidelines. In the section on emphasis they state:

Checkpoints in this section:

* 3.3 Use style sheets to control layout and presentation. [Priority 2]

The proper HTML elements should be used to mark up emphasis: EM and STRONG. The B and I elements should not be used; they are used to create a visual presentation effect. The EM and STRONG elements were designed to indicate structural emphasis that may be rendered in a variety of ways (font style changes, speech inflection changes, etc.)

This recommendation stuck. A lot of code has been written with strong andem and all good IDEs use them when you press the b and i buttons on the toolbar. They’re pretty standard now.

And that’s how we got to strong and em.

And now you know.

Interestingly, b and i are making a comeback in HTML5, having been given a new semantic lease on life. More on that in a couple of weeks.
Read the rest of this entry »

I did the conversion last week. As I’ve talked about blogs and HTML5 are so natural the whole conversion probably took no more than 8 hours. Of course, that 8 hours was spread out over a few days. Which is one of the big reasons I didn’t post anything last week. I was busy getting this site moved into the future.

I’ve now got 3 sites running on the shiny new futurespec and I can now say I officially like the new semantic elements. I also feel like I’m getting a good handle on them.
Read the rest of this entry »

Lists! They might seem boring, but if you look at a lot of site source code (good sites at least,) you’ll see a lot of lists. A lot of obvious content on the net is in the form of lists (which is why there are three separate constructions for them) and a few years ago we started using them for less-obvious, but still valid reasons.

Using Lists as Menus

The biggest, non-obvious, use of lists is for menus. Someone, somewhere, pointed out that menus were just lists of links. Couple that insight with the power of CSS to bend boring old lists to the designer/developer’s will and we had a de-facto standard on our hands.

Here’s what the menu system for DrunkenFist.com looks like. It’s a lot of code, but it’s a fully-realized version of the pattern, so it’s useful to look at in whole. As a note, this is an HTML5 site, so the nav element is in place signifying to browsers that “the following block represents site navigation.” I’ll be covering the new HTML5 elements as the very last post on the body.
Read the rest of this entry »

I launched the redesign of DrunkenFist.com last night. It’s my second HTML5 site. I took a lot of what I learned from the work we did on A Wider Net and applied it to a much larger project. Fun times.

A couple of notes.
Read the rest of this entry »