Digital Web Magazine

The web professional's online magazine of choice.

Coding for Content : Comments

By Garrett Dimon

April 23, 2007


Jeremy Keith

April 24, 2007 4:25 AM

Great insights, Garrett.

As you pointed out, this could probably never be a microformat as it doesn’t solve an existing problem (and there are no aggregation benefits). However, it is a great example of POSH: Plain Old Semantic HTML.

I think when you say microformat in this context, what you really mean is a standardised way of marking up a common pattern of content. That’s what POSH is for. There’s definitely a huge benefit to be had in standardising on these patterns… but it’s a different kind of benefit that you get from a microformat.

Ryan Barr

April 24, 2007 7:27 AM

Amazing article. This actually opened some ideas in my mind for fluid-like designs!


April 24, 2007 8:39 AM

Really great article – like most of the material on this site.

Its been submitted into queue @ tweako ( )

Garrett Dimon

April 24, 2007 9:33 AM

Ryan & Mike – Thanks. I’m glad you enjoyed it.

Jeremy – I might disagree about the future of a Microformat for this, but it wouldn’t be a strong argument on my part. :) I like the idea of POSH. I’ve been referring to this conversationally as a “personal markup pattern”, or one that makes works for me personally and that I plan on reusing but doesn’t have a broad application.

More than anything though, it is simply about applying basic semantic principles to a fairly straightforward thought process. Hopefully I’ve exposed some of those ideas in a way that others can understand and apply them.


April 24, 2007 9:54 AM

i’ve been heavily influenced by Tufte myself. I first ran across his stuff in Urban Design. His concepts rock (for lack of a better term). It’s great to see some of his ideas put into practice online! keep up the good work!



April 24, 2007 10:15 AM

Nice. You’ve made me think a level deeper into my designs – ie further into the dynamic / cms based content.

Having read the other articles you referenced, I think having classes based on image size and alt is a great way to go.

Based on the comments in referenced articles, I’m sure people will find reasons to gripe about some of the choices – however I don’t think a perfect method exists, and your technique will allow for later redesign without issue.

Thanks for the insight.


April 24, 2007 10:51 AM

Great stuff Garrett. I’ve been working on a “content-centric” redesign of my own site, and while I’ve gone a bit of a different route, there are lots of similarities here.

It’s great that Jeremy was the first one to comment here. During his talk at Web 2.0 last week I began to really think about micro-design and all the little details that goes into our content. The layout, the markup, etc. On the markup side I love the idea of POSH and coming up with your own pseudo-microformats or personal standards for your own patterns.

Anyway, good stuff. Can’t wait to chat at Web Visions.


April 24, 2007 4:25 PM

Good article Garrett and I like the approach to the captions etc and reference span. I have to say I’m not a big fan of the multiple classes applied and then the need for a further one to ‘disable’ certain features. For example, the ‘figure’ class is really surplus to requirements. If you’d like some with borders and some without, wouldnt it be better to have a class with borders rather than go the other way and then have to override them when required? My current site is 2 years old and I’ve reaped what I sowed over time by applying multiple classes etc and having to override ‘global’ properties I’d set so I’m now far more careful about limiting such things to an absolute minimum where possible and when the current site eventually gets its much needed makeover, I’ll strip a lot of it out.

Sam Rayner

April 25, 2007 9:55 AM

Great article Garrett, thanks for sharing.

Did you consider using a definition list for your reference images? Perhaps instead of:

<span class=“figure m”>
<a href=“”><img src=”/images/Image.jpg” alt=“The alternate text for my image.” /></a>
<small><span>Figure 1</span> This is a very interesting image that’s related to my content in some fascinating way.</small>

You could mark each image up with:

<dl class=“figure m”>
<dt><a href=“”><img src=”/images/Image.jpg” alt=“The alternate text for my image.” /></a></dt>
<dt>Figure 1</dt>
<dd>This is a very interesting image that’s related to my content in some fascinating way.</dd>

The use of a definition list for something like is questionable but, to me, seems like a more semantic approach than using small and span elements. It also gives you a little more flexibility when adding style.

I’d be interested to know what you think.


April 27, 2007 4:54 AM

Is this not a minimal design approach where whitespace and typographic treatment (line-height, word-spacing, font-size etc.) rule the design?


April 27, 2007 4:57 AM

If I might add … your blog (personal website) does mention social webservices like flickr and sorts. Is this information essential to the content you provide?

Garrett Dimon

April 27, 2007 5:49 AM

Keith – Thanks. Yeah, I’m definitely looking forward to Web Visions too.

Damien – It was a minor tradeoff, and one that I felt was well worth it. For me, while being a bit verbose, the extra classes help describe the content. So yes, from a pure styling point of view, it’s a bit excessive. However, from a clarity and “intuitiveness” (Pretty sure that’s not a real word), I preferred the additional class. So, I think it’s a very valid point, but just came down to a personal preference for me.

Sam – I definitely didn’t consider that, but I think it makes sense. The only semantic nit-picking catch for me is that “dl” implies a list of some sort. So, I prefer to save that for situations where there are multiple consecutive items of similar structure. In this case, there’s really only one item, so it feels like too much of a stretch for my liking. That said, if it does the trick for others, I’m all for it.

Johan – To me, while the typographic aspects are the only design aspects, they exist as a minimum requirement. The entire design was created around an ability to seamlessly incorporate images. As for flickr, no, it’s not relevant to my approach. I host all of my images locally on my site.


April 30, 2007 4:24 PM

Good stuff Garrett – like I said, stilla good article and it definitely got me thinking for future use – especially regards narrowing down to the set image sizes which seem pretty flexible at the end of the day. Keep it coming.

Dan Bowling

May 1, 2007 10:24 AM

I loved this article, but I have a nitpick on the markup that I’d love to hear opinions on. The reference span could easily be converted over to a low level heading, since it is the title/heading of a portion of your document.

Secondly, this just reminds me of the lack of ability to future-proof writings for upcoming designs where column widths won’t stay consistent.

Garrett Dimon

May 1, 2007 1:15 PM

Dan – I personally wouldn’t choose to use a heading. The biggest drawback in my mind is that the text that followed the heading wouldn’t be directly related to the heading. i.e. <h6>Figure 2</h6> wouldn’t describe the text that followed. As for future-proofing. That is something that you’re absolutely right about, and I just forced myself to get over it. :) I think that’s a problem that will exist for quite some time.

Web Guy Gary

May 2, 2007 7:50 AM

I love reading stuff like this and having my design creativity expanded. My problem is, every time I learn something new and cool like this I want to go back and re-do other sites I’ve designed in the past. The trick is to think about this design on the first day of a new project, and work it forward from there.


May 26, 2007 4:38 AM

Hey Garret, you wrote a great article. The tips are great, not just only for beginners. Great Stuff. Happy regards from bushido and bisou. I hope, we will read more articles of you.


May 29, 2007 3:51 PM

A great article with fundamental informations.

Sorry, comments are closed.

Media Temple

via Ad Packs