Marked Up

Baselined

Stoneship’s grid is now much more visible, due to a technique explained in a recent A List Apart article titled Setting Type on the Web to a Baseline Grid. (Oddly enough, the article was published after I applied the very same technique.)

In short, Stoneship now looks as if it’s written on lined paper, without the lines. The text on the site now has a certain “rhythm” (hard to explain, really) which makes my site tidier and easier to read.

Permalinks

Every journal entry now has a little hash link (#) next to its paragraph of metadata near the top of the article. This is the permalink for this article.

Every sub-heading (such as the “Permalinks” one right above this line) now contains a permalink for the section it belongs to. Move your cursor over the header, and the permalink-hash will pop up.

Worth noting is that both kinds of permalinks are marked up with the bookmark-rel attribute—which brings me to the next section…

Microformats

This site now uses microformats everywhere. The about page has a hCard; all journal entries are rel="tag"ed; the Myst page has a few hReviews; all pages are rel="license"d; etcetera.

One common question that keeps popping up, is What can you do with microformats, exactly?. Well, you’ll need a browser or a plugin that supports them. For example, the excellent Operator extension for Firefox lets you to add hCards directly to your address book, search for photos/links/articles with the same tags as the page you are on, view a map of locations described on the page, and more.

Browsers are slowly getting support for microformats as well. For example, Firefox 3 is getting native support.

By the way, I’m considering buying the microformats book.

An Interview Microformat

The Myst section on this site has a few interviews whose markup I have been wanting to improve for a long time. p, br and strong elements may be valid HTML strict, but they are not particularly semantically meaningful.

I’ve been following a discussion about chatlog microformats for a while, and I decided to use the proposed chatlog microformat as a base for an interview one. The li elements now has two more classes: question and answer, used for marking up questions and answers. The enclosing ol element also has a new interview class.

I interviewed nobody else than the Fake Tantek for the sole purpose of creating the following interview-microformatted HTML:

<ol class="hchatlog interview">
  <li class="message question">
    <cite class="sender vcard"><span class="nickname">ddfreyne</span></cite>:
    <q>What do you think about microformats?</q>
  </li>
  <li class="message answer">
    <cite class="sender vcard"><span class="fn">Fake Tantek</span></cite>:
    <q>They are awesomely great!</q>
  </li>
</ol>

I’m quite happy with this slightly altered format. It’s worth noting that this format is very easy to style—I’ve never been quite happy with the way the interviews were marked up and styled, until now.

I’ll be looking for some feedback on this microformat variant in the next few days.

HTML5

I am tired of the seemingly endless HTML-versus-XHTML debate. I’ve tried many times to build this site in XHTML (serving as application/xhtml+xml where possible, otherwise translating the XHTML to HTML and serving as text/html) but that’s just annoying and slow. Besides, no matter what you do, most browsers will still simply see your site as HTML, and not as XHTML.

So, my site is now HTML instead, served as text/html. No more headaches.

Stoneship uses HTML5, to be precise. HTML5 is not a standard, it is not widely adopted, and there’s virtually no browser support yet. It is still usable, though, because HTML5, unlike XHTML2, is backward compatible: a HTML4 document can be a HTML5 one with very little changes (changing the doctype should suffice in most cases).

HTML5 defines useful new elements such as section, article and nav, but most browsers choke on these, due to their non-existent support for HTML5. In the mean time, I’ll stick with div’s with class="section", class="article", class="nav" and so on.

Join Me (And Together We Can Rule The Web)

These recent changes on Stoneship are a big step towards an (even) cleaner and more usable site. Stoneship is never “finished” though, so I’ll continually be updating my site, adding and updating microformats.

I predict that many people will start using microformats actively soon. Take a step and add some microformats to your own site. I recommend rel-license as well as hCard, since those are very easy to add to an existing site, and because there simply already is a lot of support for hCard.

If you do that, I’ll add you to my address book. Using your hCard, of course.