Experiments
Trial & Error
The "how to" and code for various web design elements I've tried during the course of my work as a web designer. And, yes, the relative success of these experiments has been achieved through trial and error … with a touch of luck, a dash of knowledge and a good dose of hackery.
- The Beauty of Semantic Markup, Part 3: Headings
- 11/07/2010
- I always find myself drawn to fundamental concepts, because they can be deceptively simple. Headings are like that. You know, <h1>-<h6>. They seem simple until you take time to think … think about structure, semantics, accessibility, search engines and, now, HTML5's sectioning model. And I have, indeed, been thinking about headings lately, especially as I dive into HTML5 and (re?)consider the approaches I've taken in the past. So this series now shifts focus to <h1>, <h2>, <h3>, <h4>, <h5> and…
- The Beauty of Semantic Markup, Part 2:
<strong>,<b>,<em>,<i> - 08/06/2010
- So, I had planned to focus the second installment of this series on markup for images with captions. The topic was a request from my friend Ian and his birthday was coming up. However, his birthday has passed, and I'm just now writing. Plus, I've been thinking a lot lately about something more fundamental: bold and italicized text. This may seem a trivial thing to be consuming my "markup mind," but after Tantek Çelik's HTML5 presentation, it's been bugging me.…
- The Beauty of Semantic Markup, Part 1: Quotes & Citations
- 07/15/2010
- As I mentioned in my introduction, this series is going to take a close look at the fundamentals of semantic markup. In this first installment, I'm focusing on quotes and citations. Before we get started, if you'd like to know more about semantic markup — what it is, why you should develop your sites with it — check out my article, Meaningful Markup: POSH and Beyond. Now, let's get to it!
- Getting Semantic With Microformats, Part 8: Value Class Pattern
- 06/02/2009
- Update: 2009-10-20 Tantek Çelik requested that I add inline examples of the value-class pattern markup in this article, so people working on applications to parse uses of the pattern can reference this article as a live example. I finally obliged, and you will see those inline examples below, each of which is indicated as an update. No, your eyes aren't deceiving you. It's another installment of my Getting Semantic With Microformats series (with a special thanks to Ben Ward for…
- Microformats, hAccessibility & Moving Forward
- 01/26/2009
- Last week, Andy Clarke posted a design solution for the hAccessibility issue in microformats. It's an interesting workaround, combining the current standard for marking up dates in microformats with the broadly-accepted use of skip links. But Wait, What Is hAccessibility? Before I get too far into this article, though, I should probably explain hAccessibility. As I've mentioned previously, hAccessibility was coined by The Web Standards Project to describe an accessibility issue related to the use of the abbr design pattern…
- Getting Semantic With Microformats, Part 6: hResume
- 11/10/2008
- I began this series a little over two months ago. I wanted to share my love of microformats and detail how I've implemented them, in hopes of encouraging more people to embrace them. So far, I've covered a lot: Rel-based microformats in Part 1 XFN in Part 2 hCard in Part 3 hCalendar in Part 4 hAtom in Part 5 And now, as I conclude this series, it is time to talk about the hResume microformat which is used to…
- Getting Semantic With Microformats, Part 5: hAtom
- 10/15/2008
- Over the course of this series, I've discussed the various microformats I've implemented on A Blog Not Limited: rel-based, XFN, hCard and hCalendar. Now, it's time to talk about the hAtom microformat, which adds semantics and structure to web content that could be syndicated, such as blog posts or news articles.
- Getting Semantic With Microformats, Part 4: hCalendar
- 10/01/2008
- Here we are again, delving into the exciting (for me, at least) world of microformats. Based on what I planned at the outset, this article is about mid-way through the series. So far, I've discussed three implementations of microformats on A Blog Not Limited: Specifying link-based relationships using the rel attribute in Part 1 Giving a "human face" to links using the XFN microformat in Part 2 Describing people, companies and places with the hCard microformat in Part 3 Not…
- Getting Semantic With Microformats, Part 3: hCard
- 09/22/2008
- I began this series by detailing the microformats for link-based relationships using the rel attribute in Part 1. I then followed up in Part 2 with a discussion about extending the rel attribute with XFN values to connote social relationships on the web. Both XFN and the rel-based microformats are relatively simple, requiring only the addition of the rel attribute to links (<a>) and the proper value(s) to provide semantic context. Now it is time to take this microformats discussion…
- Getting Semantic With Microformats, Part 2: XFN
- 09/17/2008
- In Part 1 of this series, I explained various implementations of the rel microformat on A Blog Not Limited. While explaining rel-me, I briefly touched on the XFN microformat. It's now time to spend some more time on this very cool microformat, which was one of the first.
- Getting Semantic With Microformats, Part 1:
rel - 09/09/2008
- As I mentioned in the introduction to this series, I'm a freak for microformats. I love the semantics, the structure, the simplicity and the potential. I decided I must share this love with the world (or at least my four readers) by detailing how I've used various microformats on A Blog Not Limited. This first installment of the series focuses on microformats for link-based relationships using the rel attribute. Let's get started, shall we?
- Adding Social Media Links to ExpressionEngine Templates
- 08/22/2008
- Even though the "social" nature of the web isn't anything new (at least in web terms), I've only recently joined the masses. Yeah, I've been working in the web industry for over 10 years now, but I was a latecomer to social networks like Facebook, Twitter and (the horror) MySpace. I was even late to the social bookmarking sites like Digg, Ma.gnolia and, my preference, Delicious (yeah, I have it right: they aren't using the periods in their name anymore).…
- Customizing ExpressionEngine RSS 2.0 Template
- 08/10/2008
- Like everything with this blog, I wasn't entirely satisfied with ExpressionEngine's out–of–the–box solution for my RSS feeds (surprise, surprise). Some of the features I wanted that didn't come standard with EE's RSS: Links and markup to display properly formatted Display blog name Display author name Link to the category in which the article is published Links to the tags with which the article is tagged Tracking for links to support analytics Two feeds; one for full articles and one for…
- IE6 and Link Pseudo-Classes
- 08/03/2008
- While working on a freelance project a few months ago, I spent hours upon hours struggling with a bug in IE6. But a bug for which I could find absolutely no documentation. And a bug I had never seen before. IE6 wasn't properly recognizing the styles I had assigned to my navigation links :hover pseudo-class. After far too many hours (especially considering it was a freelance job), I discovered the solution to my problem.
- Live Comment Preview for ExpressionEngine
- 07/19/2008
- Much of the functionality and organization I'm implementing on this blog has been inspired by Jason Santa Maria. On his newly-redesigned blog, he provides a live comment preview that I just love. So, that's what I decided I wanted for A Blog Not Limited. Unfortunately, the built-in comment preview functionality for ExpressionEngine doesn't even come close.
