The good thing about the microdata (itemscope, itemtype, itemprop, etc.) part of the HTML5 spec is that it is part of the HTML5 spec; it’s built into HTML5. That really is a good thing. On the other hand, it’s potentially yet another competitor in the semantic lineup and it’s a newcomer in a spec that’s not entirely finalized.

Its integration with HTML5 (and, who knows, its design) may make it a better way to add semantic meaning to our HTML documents than microformats, but I personally won’t commit to that one way or another until I’ve attempted to use it in a variety of real-world situations.  I won’t make any comparisons to RDFa (which it’s not entirely incompatible with according to this source who knows far more than me about it) or comments about namespaces…for my own safety.  Yes, I have an opinion, and, no, it’s not entirely favorable toward HTML5.  But forget that.  This post isn’t about the theoretical rigor of this HTML5 feature — just about how to use it alongside other semantic options, like the hCard microformat, to add semantic meaning that is machine readable.

Note that my understanding of HTML5 microdata (henceforth referred to as “item” stuff) suggests that it is not meant only or necessarily to be a “microformat killer” or to replace RDFa, but one of its possible applications certainly is duplicating some of the “functionality”* of stuff like hCard or FOAF.

Some good news is that Google is already starting to support “item” parsing (and I’m sure others will follow), but it’s important to remember that both the microformats.org formats and RDFa have been around for several years and therefore have already established themselves in many implementations across the web.

I say this to point out that the surge of articles which will surely be written about about HTML5’s “items” don’t mean that it’s time to throw out microformats/RDFa (for a variety of reason I’m sure others will point out).  One purely pragmatic reason is breadth and depth of support — it’s too early to chuck out microformats that already have support in favor of HTML5 “items.” Unfortunately, that means writing redundant code.

Below is an example of a “profile” I’ve been working on as a basic structure for contact information/profiles. It already used HTML5 tags and microformats and was awaiting some RDFa. When a coworker sent me the Dive into HTML5 article I spent some time at lunch adding HTML5 microdata and tested it in Google’s Rich Snippets Testing Tool.

I won’t go into exhaustive detail about every line. The sites I linked above give good introductions to the details. I’ll just draw your attention to a few things I think are worth noting.

Semantic person in HTML5

I started with the new HTML5 figure tag. It designates a section of a document that contains multimedia with a caption. figure seems like a good fit to me because…

1. Most profiles tend to show a picture of a person which is captioned with the name of the person.  The two are related in a way that figure alone communicates.
2. Often profiles are embedded in ways that make the profile an independent part of the page that is supplementary to the page content.

So, figure jumped out at me for the reason it seems to fit semantically and for the reason it “feels” modular.

<figure class="vcard" id="vcard-lastfirst-idnum123"
 itemscope="itemscope" itemtype="http://www.data-vocabulary.org/Person/"
 title="Firstname Lastname">

• To “activate” hCard I’ve added class="vcard",
• And to add HTML5’s “item” functionality/microdata I’ve added itemscope and itemtype.
• I’ve used the definitions in Google’s Data Vocabulary which is integrated into their Rich Snippets and can be written as a microformat, an HTML5 item, or RDFa.
• I’ve added an id to remind myself to give the card a unique ID so that it can be easily referenced using the microformat include.
• I’ve used a title attribute because I’ve noted it sometimes appears in accessibility plugins.  I don’t want to be redundant, but some software has seemed to ignore headers (not in reading it, but in labeling navigation) even with WA-ARIA (which I haven’t included in this sample anyway), so title is in.

Organization within Person

When you’re giving a person’s organization and title, that organization is another entity itself that you may want to give additional information about. All of the places I’ve tested so far support nested vcards, and Google’s Rich Snippet Tester appeared to do well with nested items.

...
<span class="org" itemprop="affiliation" title="Organization"
 itemscope="itemscope" itemtype="http://www.data-vocabulary.org/Organization/">
	<div class="vcard">
		<span class="organization-name fn" itemprop="name">Organization Name</span>
			<div class="adr" itemprop="address"
			 itemscope="itemscope" itemtype="http://data-vocabulary.org/Address/">
				<!-- Address --><span class="street-address" itemprop="street-address">6601 N Monroe</span>
				<!-- City --><span class="locality" itemprop="locality">Tallahassee</span>,
				<!-- State --><abbr class="region" itemprop="region" title="Florida">FL</abbr>
				<!-- Zip --><abbr class="postal-code" itemprop="postal-code" title="32303-9329">32303</abbr>
				<!-- Country --><abbr class="country-name" itemprop="country-name" title="United States">USA</abbr>
				<!-- Lat/Lon (Metadata) -->
				<span class="geo" itemprop="geo"
				  itemscope="itemscope" itemtype="http://data-vocabulary.org/Geo/">
					<abbr class="latitude" itemprop="latitude" title="60.6060606060">60.6060606060</abbr>
					<abbr class="longitude" itemprop="longitude" title="-60.6060606060">-60.6060606060</abbr>
				</span>
			</div> <!--/ .adr -->
	</div> <!--/ .vcard -->
	<span class="organization-unit">Unit</span>
	<span class="title" itemprop="title">Job Title</span>
</span> <!--/ .org -->
...

That’s a geo location nested within an address nested within an organization nested within a person. You start with the person and mention the organization as a name, then include the separate vcard for the organization. The organization has its own address and that address has its own geo code.

Telephone & E-mail

Google’s data vocabulary doesn’t specify telephone numbers for a person, only for organizations. It also lacks any reference to e-mail addresses anywhere. Since my test case is primarily for a person and the hCard microformat doesn’t have that problem I’ve used the pattern that works for hCard and incorrectly bolted Google’s data vocabulary on with HTML5’s microdata/item properties. It’s wrong for Google’s data vocabulary. I did it, but I’m thinking it’s probably best to leave it out and let the hCard microformat handle that part**.

Contact Info/Profile with HTML5, microdata, and microformats

<!--- Photo with Caption --->
<figure class="vcard" id="vcard-lastfirst-idnum123"
 itemscope="itemscope" itemtype="http://www.data-vocabulary.org/Person/"
 title="Firstname Lastname">
	<!-- Photo -->
	<img src="#" width="180" height="240" alt="" class="photo" itemprop="photo" />
	<!-- alt redundant; image labeled by context, leave empty (webaim) -->
	<!-- Caption -->
	<figcaption>
		<!-- Profile -->
		<section class="profile">
			<!-- Name -->
			<header class="n" title="Name">
				<span class="fn" itemprop="name">
					<span class="given-name">Firstname</span>
					<span class="additional-name">Middlename</span>
					<span class="family-name">Lastname</span>
				</span> <!--/ .fn -->
				<span class="nickname" itemprop="nickname">Nickname</span>
			</header> <!--/ .n -->
			<!-- Organization -->
			<span class="org" itemprop="affiliation" title="Organization"
			 itemscope="itemscope" itemtype="http://www.data-vocabulary.org/Organization/">
				<div class="vcard">
					<span class="organization-name fn" itemprop="name">Organization Name</span>
						<div class="adr" itemprop="address"
						 itemscope="itemscope" itemtype="http://data-vocabulary.org/Address/">
							<!-- Address --><span class="street-address" itemprop="street-address">6601 N Monroe</span>
							<!-- City --><span class="locality" itemprop="locality">Tallahassee</span>,
							<!-- State --><abbr class="region" itemprop="region" title="Florida">FL</abbr>
							<!-- Zip --><abbr class="postal-code" itemprop="postal-code" title="32303-9329">32303</abbr>
							<!-- Country --><abbr class="country-name" itemprop="country-name" title="United States">USA</abbr>
							<!-- Lat/Lon (Metadata) -->
							<span class="geo" itemprop="geo"
							  itemscope="itemscope" itemtype="http://data-vocabulary.org/Geo/">
								<abbr class="latitude" itemprop="latitude" title="60.6060606060">60.6060606060</abbr>
								<abbr class="longitude" itemprop="longitude" title="-60.6060606060">-60.6060606060</abbr>
							</span>
						</div> <!--/ .adr -->
				</div> <!--/ .vcard -->
				<span class="organization-unit">Unit</span>
				<span class="title" itemprop="title">Job Title</span>
			</span> <!--/ .org -->
			<!-- Location -->
			<address class="adr" itemprop="address" title="Location"
			 itemscope="itemscope" itemtype="http://data-vocabulary.org/Address/">
				<!-- Address --><span class="street-address" itemprop="street-address">1532 Chadwick way</span>
				<!-- City --><span class="locality" itemprop="locality">Tallahassee</span>,
				<!-- State --><abbr class="region" itemprop="region" title="Florida">FL</abbr>
				<!-- Zip --><abbr class="postal-code" itemprop="postal-code" title="32303-9329">32312</abbr>
				<!-- Country --><abbr class="country-name" itemprop="country-name" title="United States">USA</abbr>
				<!-- Lat/Lon (Metadata) -->
				<span class="geo" itemprop="geo"
				  itemscope="itemscope" itemtype="http://data-vocabulary.org/Geo/">
					<abbr class="latitude" itemprop="latitude" title="30.3030303030">30.3030303030</abbr>
					<abbr class="longitude" itemprop="longitude" title="-30.3030303030">-30.30303030</abbr>
				</span>
			</address> <!--/ .adr -->
			<!-- Contact -->
			<a href="mailto:email" class="email">test@example.org</a>
			<div class="tel"
			  itemscope="itemscope" itemtype="http://www.data-vocabulary.org/Organization/">
				<abbr class="type" title="home pref">Home:</abbr> <abbr class="value" itemprop="tel" title="+1##########">(###) ###-####</abbr>
				<abbr class="type" title="work">Office:</abbr> <abbr class="value" itemprop="tel" title="+1##########">(###) ###-####</abbr>
				<abbr class="type" title="mobile">Cell:</abbr> <abbr class="value" itemprop="tel" title="+1##########">(###) ###-####</abbr>
				<abbr class="type" title="fax">Fax:</abbr> <abbr class="value" itemprop="tel" title="+1##########">(###) ###-####</abbr>
			</div>
		</section> <!--/ .profile -->
		<!-- Links -->
		<section class="note">
			<ul>
				<li><a href="http://www.example.org/" class="url" itemprop="url" rel="me self external">example.org</a></li>
				<li><a href="http://www.example.org/" class="url" itemprop="url" rel="me self external">example.org</a></li>
				<li><a href="http://www.example.org/" class="url" itemprop="url" rel="me self external">example.org</a></li>
				<li><a href="http://www.example.org/" class="url" itemprop="url" rel="me self external">example.org</a></li>
				<li><a href="http://www.example.org/" class="url" itemprop="url" rel="me self external">example.org</a></li>
				<li><a href="http://www.example.org/" class="url" itemprop="url" rel="me self external">example.org</a></li>
				<li><a href="http://www.example.org/" class="url" itemprop="url" rel="me self external">example.org</a></li>
			</ul>
		</section>
	</figcaption> <!--/ .figcaption -->
</figure> <!--/ .figure.vcard -->

Download the current version of Microformats in Profiles & Contact Information here.  You can also see the use of HTML5 microdata + Google’s Review Data Vocabulary + hReview in there along with a few other things.  It’s still under development so I recommend you use the link to ensure you are looking at the most recent code.

Or: No, really, how do you actually declare fonts anymore?

The real answers are still pending!

1. Update: Ben Walker was kind enough to share some very relevant information about the topic.
2. Update Again: I have confirmation that my solutions in this post are not final. Scott MacDonald found that my font stacks would break font rendering on his system (weird)! You may also want to check out my long theoretical response if you’ve got a lot of spare time on your hands.

Because when I say “safe” I don’t mean “using only web safe fonts”, I mean “how the heck do you get the non-web-safe-font to show up when you know you have it”?  I swear, back when I used “web safe” fonts almost-exclusively it wasn’t this complicated to figure out a font’s name. Sometimes I’d want to look up a “better” alternative than the generic font family for a particular system to add to the font stack, but it just wasn’t this irritating. At least, if it was, I never noticed it.  I mean, I don’t recall ever typing “ArialBlack”, “Arial-Black”, “Arial Black”, which says enough itself.  Or — maybe it never worked and I just didn’t notice.  *shrug*

It’s relevant to a design I’m working on right now.  The designer has used Helvetica and Helvetica Neue — these are not web safe fonts, though since they are installed on most Macs, I think a not-insignificant portion of people have them.  So I’d like to make them available to the people that do.  But so far, even though I do have some Helvetica Neue fonts installed, I can’t see them.  I’d like for both myself and the rest of us dealing with the development to be able to see Helvetica Neue when I list it — if only to reassure myself that I still know how to write CSS!

(Ultimately I’m not sure how I’ll deal with fonts on this design; I haven’t finalized everything. Some @font-face embedding, sIFR, cufon, and/or image replacement will likely be used in addition to generally asking for Helvetica Neue when it’s present.)

Unfortunately, searching the web for how to do this has only answered a few of my questions and hasn’t given me quite enough information to feel fully confident about these font stacks.  Basically, it raised more questions than it really answered.

The challenges are several:

1. First, it seems that different systems — either having to do with the operating system or the browser — deal with spaces differently (or something)?  Sometimes you need to take them out, sometimes you need to use hyphens.
2. Second, the properties font-weight and font-stretch are inconsistently (and often incorrectly) supported.

#1 – Spaces?

One system might recognize “HelveticaNeue” and another “Helvetica Neue.”  I found that much on the web, but since none of the posts explained why I’m not entirely sure which systems will need addressing in that manner and when.  Or whether it actually has to do with spaces only, or matching post script names, or the browser, or something else.  As a consequence I’m not sure if my assumptions on the names of some of these Helvetica Neue examples are right or not; particularly when it comes to, say, a light/condensed font.  For example, one post demonstrated that Helvetica Neue Light should be rendered at least once as “HelveticaNeue-Light” — but what about Ultra Light?  “HelveticaNeue-UltraLight” or “HelveticaNeue-Ultra-Light”?  Anyone with insight how to consistently predict when to replace spaces in font names with nothing or with hyphens, please let me know…

#2 – Weights and Stretch

And, for various reasons, most of which seems to center around inconsistent support for more specific font-weights and the general lack of support for font-stretch, sometimes you need to declare the font-weight and font-stretch as the part of the font name in font-family, other times you can (perhaps) expect font-weight and font-stretch to work.  I believe as a general rule you can expect CSS3-supporting browsers to begin to handle font-stretch (as it was taken out of CSS 2.1, and is [so far] back in CSS3). #1 of course has bearing on this, because if you want to get the right font, you’re going to have to get the name right: spaces, no spaces, hyphens, whatever…

And of course, you have to deal with the general problem of fallback fonts with similar x-height, weight, etc.  Which I tend to skim over in real life, praying for luck, but I really should pay more attention to.

Grasping at Font Stacks

Helvetica Neue – Normal (No Stretch)

Helvetica Neue Black Font Stack

font-family: "HelveticaNeueBlack", "HelveticaNeue-Black", "Helvetica Neue Black", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Arial Black", sans-serif;
font-weight:800;
font-stretch:normal;

Helvetica Neue Heavy Font Stack

font-family: "HelveticaNeueHeavy", "HelveticaNeue-Heavy", "Helvetica Neue Heavy", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Arial Black", sans-serif;
font-weight:700;
font-stretch:normal;

Helvetica Neue Bold Font Stack

font-family: "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
font-weight:600;
font-stretch:normal;

Helvetica Neue Medium Font Stack

font-family: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
font-weight:500;
font-stretch:normal;

Helvetica Neue Regular Font Stack

font-family: "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
font-weight:400;
font-stretch:normal;

Helvetica Neue Light Font Stack

font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
font-weight:300;
font-stretch:normal;

Helvetica Neue Thin Font Stack

font-family: "HelveticaNeueThin", "HelveticaNeue-Thin", "Helvetica Neue Thin", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Arial", sans-serif;
font-weight:200;
font-stretch:normal;

Helvetica Neue Ultra Light Font Stack

font-family: "HelveticaNeueUltraLight", "HelveticaNeue-Ultra-Light", "Helvetica Neue Ultra Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Arial", sans-serif;
font-weight:100;
font-stretch:normal;

Helvetica Neue – Extended

Helvetica Neue Black Extended Font Stack

font-family: "HelveticaNeueBlackExtended", "HelveticaNeue-Black-Extended", "Helvetica Neue Black Extended", "HelveticaNeueBlack", "HelveticaNeue-Black", "Helvetica Neue Black", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Arial Black", sans-serif;
font-weight:800;
font-stretch:expanded;

Helvetica Neue Heavy Extended Font Stack

font-family: "HelveticaNeueHeavyExtended", "HelveticaNeue-Heavy-Extended", "Helvetica Neue Heavy Extended", "HelveticaNeueHeavy", "HelveticaNeue-Heavy", "Helvetica Neue Heavy", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Arial Black", sans-serif;
font-weight:700;
font-stretch:expanded;

Helvetica Neue Bold Extended Font Stack

font-family: "HelveticaNeueBoldExtended", "HelveticaNeue-Bold-Extended", "Helvetica Neue Bold Extended", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
font-weight:600;
font-stretch:expanded;

Helvetica Neue Medium Extended Font Stack

font-family: "HelveticaNeueMediumExtended", "HelveticaNeue-Medium-Extended", "Helvetica Neue Medium Extended", "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
font-weight:500;
font-stretch:expanded;

Helvetica Neue Regular Extended Font Stack

font-family: "HelveticaNeueExtended", "HelveticaNeue-Extended", "Helvetica Neue Extended",  "HelveticaNeueRomanExtended", "HelveticaNeue-Roman-Extended", "Helvetica Neue Roman Extended", "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
font-weight:400;
font-stretch:expanded;

Helvetica Neue Light Extended Font Stack

font-family: "HelveticaNeueLightExtended", "HelveticaNeue-Light-Extended", "Helvetica Neue Light Extended", "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
font-weight:300;
font-stretch:expanded;

Helvetica Neue Thin Extended Font Stack

font-family: "HelveticaNeueThinExtended", "HelveticaNeue-Thin-Extended", "Helvetica Neue Thin Extended", "HelveticaNeueThin", "HelveticaNeue-Thin", "Helvetica Neue Thin", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Arial", sans-serif;
font-weight:200;
font-stretch:expanded;

Helvetica Neue Ultra Light Extended Font Stack

font-family: "HelveticaNeueUltraLightExtended", "HelveticaNeue-Ultra-Light-Extended", "Helvetica Neue Ultra Light Extended", "HelveticaNeueUltraLight", "HelveticaNeue-Ultra-Light", "Helvetica Neue Ultra Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Arial", sans-serif;
font-weight:100;
font-stretch:expanded;

Helvetica Neue – Condensed

Helvetica Neue Black Condensed Font Stack

font-family: "HelveticaNeueBlackCondensed", "HelveticaNeue-Black-Condensed", "Helvetica Neue Black Condensed", "HelveticaNeueBlack", "HelveticaNeue-Black", "Helvetica Neue Black", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnBold', "Arial Narrow", "Arial", sans-serif;
font-weight:800;
font-stretch:condensed;

Helvetica Neue Heavy Condensed Font Stack

font-family: "HelveticaNeueHeavyCondensed", "HelveticaNeue-Heavy-Condensed", "Helvetica Neue Heavy Condensed", "HelveticaNeueHeavy", "HelveticaNeue-Heavy", "Helvetica Neue Heavy", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnBold', "Arial Narrow", "Arial", sans-serif;
font-weight:700;
font-stretch:condensed;

Helvetica Neue Bold Condensed Font Stack

font-family: "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnBold', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif;
font-weight:600;
font-stretch:condensed;

Helvetica Neue Medium Condensed Font Stack

font-family: "HelveticaNeueMediumCondensed", "HelveticaNeue-Medium-Condensed", "Helvetica Neue Medium Condensed", "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnRegular', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif;
font-weight:500;
font-stretch:condensed;

Helvetica Neue Regular Condensed Font Stack

font-family: "HelveticaNeueCondensed", "HelveticaNeue-Condensed", "Helvetica Neue Condensed",  "HelveticaNeueRomanCondensed", "HelveticaNeue-Roman-Condensed", "Helvetica Neue Roman Condensed", "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosCnRegular', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif;
font-weight:400;
font-stretch:condensed;

Helvetica Neue Light Condensed Font Stack

font-family: "HelveticaNeueLightCondensed", "HelveticaNeue-Light-Condensed", "Helvetica Neue Light Condensed", "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnRegular', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif;
font-weight:300;
font-stretch:condensed;

Helvetica Neue Thin Condensed Font Stack

font-family: "HelveticaNeueThinCondensed", "HelveticaNeue-Thin-Condensed", "Helvetica Neue Thin Condensed", "HelveticaNeueThin", "HelveticaNeue-Thin", "Helvetica Neue Thin", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnRegular', "Arial Narrow", "Arial", sans-serif;
font-weight:200;
font-stretch:condensed;

Helvetica Neue Ultra Light Condensed Font Stack

font-family: "HelveticaNeueUltraLightCondensed", "HelveticaNeue-Ultra-Light-Condensed", "Helvetica Neue Ultra Light Condensed", "HelveticaNeueUltraLight", "HelveticaNeue-Ultra-Light", "Helvetica Neue Ultra Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnRegular', "Arial Narrow", "Arial", sans-serif;
font-weight:100;
font-stretch:condensed;

Currently I am using an @font-face embedded font which is free, embeddable, and fairly similar to Helvetica, TeX Gyre Heros (found on Font Squirrel), as part of my font stack. A convention I am forming for myself is to use single quotes around my @font-face embedded fonts and double quotes around fonts I am hoping/expecting will be installed by the user, for at-a-glance reference. As you can see the stacks are almost prohibitively long and I’m still not sure they’re really going to work…plus, some of the fallbacks still need tweaking. Time to test.

• Windows XP/Firefox 3.6.2 works pretty well. I don’t have any expanded or condensed version of the font, however, so I don’t see it — meaning I also have no way to tell if my assumption on how to get those two showing up is working.
• Windows XP/Opera 10.51 seems to be afflicted by a bug of some sort.  I found references to Opera @font-face bugs in the initial release of Opera 10 in 2009, but I think that’s supposedly fixed, so it seems to be a different problem.  A lot of the fonts show up as serif.  Except when I first open a page — it shows up as I’d expect.  Then if I refresh it becomes Times New Roman.  Open a new tab, different file, same fonts…Times New Roman.  Close Opera.  Open Opera with original file — right fonts.  Repeat.

After reading an interesting blog entry about the breadcrumbs on Apple’s website, I undertook to experiment with breadcrumb design — as I haven’t had real need for them in any recent projects. I had a few objectives:

1. Create a flexible coding pattern for breadcrumbs that could be dressed up or dressed down.
2. Experiment with a drop-down effect on the crumbs as seen on Zillow.
3. Indicate the parts of the trail that will “disappear” if a particular crumb is clicked.

HTML for Breadcrumbs

I decided to use an ordered list for the breadcrumbs. First of all, I use unordered lists for most navigation and I get tired of seeing them. Second, a hierarchy implies an order (although an ordered list isn’t ultimately the correct choice, theoretically, for indicating hierarchal rather than linear order). Finally, it allowed me to see a distinct difference between the top-level breadcrumb navigation and the drop-down navigation.

I can, in a variety of ways, design a simple text-only breadcrumb or I can, again in a variety of ways, dress the list up to make fancier breadcrumbs. So the ordered list satisfies my requirement for flexibility and modularity.

<div id="breadcrumbs">
<ol>
<li><a href="#">My Website</a></li>
<li><a href="#">My Category</a></li>
<li><a href="#">My Page</a></li>
<li>You Are Here</li>
</ol>
</div>

Drop-Down Breadcrumbs

The drop-down effect on breadcrumbs is one I am seeing more often of late. I am sort of tickled by it. It could have similar uses as those ugly directory pages for search engine optimization, but it’s contextual and tucked away. It might be helpful to a visitor and, if used in moderation, is unlikely to hurt.

<div id="breadcrumbs">
<ol>
<li><a href="#">My Website</a></li>
<li><a href="#">My Category</a></li>
<li><a href="#">My Page</a></li>
<li>You Are (Dropping Down) Here
<ul>
<li><a href="#">Dropdown Breadcrumb Link</a></li>
<li><a href="#">Dropdown Breadcrumb Link</a></li>
<li><a href="#">Dropdown Breadcrumb Link</a></li>
</ul>
</li>
</ol>
</div>

Breaking the trail

Sometimes breadcrumbs can just be very boring and once I had a drop-down in place I began to feel that the added complexity called for some enhancement when a visitor was moving back up the path, too. I’m sure I’ve seen a similar effect before that inspired the idea, but darned if I can remember where (probably lots of places).

The idea here is that if someone is 3 sections in and hovers over the 2nd breadcrumb, the crumbs after that will change to reflect the fact that, if the 2nd breadcrumb is clicked, the proceeding ones will cease to be there. For this I began experimenting with the CSS3 general sibling selector.

#breadcrumbs > ol > li:hover ~ li{}

The Meat of…the bread of the…here it is

You can view the breadcrumbs and utilize them under the terms of a Creative Commons BY-NC-SA license. There is only one design and version as of right now, generally just me playing structure and effects, but I’m sure eventually I’ll design more (did one similar for work already).

I have tested the navigation design in Chrome 3.0, Firefox 3.6, Opera 10.1, IE 7, and Safari 4 (Windows).  The functionality slightly from browser to browser — the “best” support appears in Firefox and Opera and the “worst” in IE 7, with Safari and Chrome in between.  But, of course, the breadcrumbs degrade gracefully (only real thing keeping me from proclaiming it fully “progressive enhancement” is the absence of separators between the crumbs in IE 7 due to the lack of support for :after).

Caveats

I am using the CSS content property for purposes of demonstration and wouldn’t necessarily encourage it due to the whole inaccessibility thing, though it’s viable — I’m not sure the > are going to be desirable in all accessibility scenarios.

In production, due to browser bugs (outlined below) some javascript enhancement would likely be called for.

While working with these enhanced breadcrumbs I found what I feel is a bug in browsers using the webkit rendering engine. Using the general sibling selector and :hover just doesn’t work in Chrome or Safari and, in fact, it gets downright ugly if you apply CSS3 transitions (brief lock-ups, etc.).

Of course, as usual, you’d have to work around IE’s lack of :hover on list items.

Final Note

I also began wondering if the behavior I was seeing, of the general sibling selector selecting only the general siblings after the affected crumb was really right. It seems pretty consistent across all the browsers (sans :hover anyway), but when you think about it, it certainly sounds like it should select all siblings, not just the ones after. Of course, the ones after the hovered element are the ones I want, so I’m not complaining.

1. What made you want to pursue a career involving graphic design?

   I’ve always identified as a creative person, but I have never seemed to have natural artist genius. You know those people who could draw amazingly before the age of 10? That was never me, but I wanted it to be. When my family got a computer (I was already 16) and I first began making websites, the process was so fast…I was able to see a design take shape quickly and see improvement in my skills quickly. The web as a medium gave me the positive feedback I needed to keep motivated. There was always something more to learn because so many different things played a critical part in the final product, so it was, and still is, exciting for many reasons.

2. How did you get started in this profession?

   I actually got started in web design because I wanted to be a writer. In High School I wanted to go to Berkeley for its reputation (plenty of amazing artists and writers as graduates), but didn’t really have quite the necessary GPA in the end…nor the drive and courage required to even go for it — I never even applied! But when we got our first computer I discovered a thriving amateur writing community online and promptly joined it. The next logical step was having a website of my own for my writing, which was the reason I created my first website. I had always drawn a lot of bad illustrations to go along with my stories and everything kind of grew from there. It felt like the web was something I’d been waiting for without knowing it.

3. What kind of education did you receive?

   I’m mostly self-taught, but I attended TCC (Tallahassee Community College) for a number of years; got my AA and came within a few classes of an AS in Multimedia. I was never really able to find a Bachelor program that felt “right” to me (that balanced the technical and the artistic). So while I came very near to pursuing several different Bachelor programs, I never committed to one. And since I’ve been working full time the last few years it hasn’t been urgent, though I do intend to complete a BA or BS someday. Classes sometimes didn’t seem relevant to me, but in almost all cases the experience and practice were ultimately worthwhile.

4. Do you enjoy being a Freelance Graphic Designer?

   I do. I limit my freelance work, though, because it can be very time consuming. Not so much the work itself, but all the ramifications of doing freelance work, like dealing with a customer without any buffer and having to deal with legalities and finances myself. Not to mention the discipline required to make enough time to finish projects! If I didn’t have a full time job I might dedicate more of my resources to freelance, perhaps, but freelance income is difficult to guarantee.

5. What does your daily routine consist of?

   I have a full time job in addition to doing freelance work. I get up about an hour before work, get ready, and work as a web developer by day. Some evenings when I get home I work on freelance work, other evenings I chill out. Scattered throughout the average week I do a fair amount of reading: current industry news, blogs, tutorials, and experiment with new techniques.

6. What software do you use to produce your art?

   Adobe Photoshop, Adobe Illustrator, GIMP, paper, pencil, paint, a scanner, digital camera, and Crimson Editor, Dreamweaver, Firefox (GridFox, Web Developer, Firebug), jQuery, etc.

   As an aside, I used to love and work primarily in Macromedia Fireworks. There are still some reasons that Fireworks can be viewed as better for web design than Photoshop…so I feel my reason for primarily working in Photoshop these days is comfort/habit.

7. Is it easy to find work?

   Yes and no. More people contact me than I accept work from, but it wouldn’t be enough to support myself without a full time job by any stretch of the imagination. I have some acquaintances who have the reserves of time and energy to do a lot more freelance work than I do, but most of them are in a similar position. The steady income of a regular job is quite welcome.

8. Do you recommend this profession?

   It depends on what you mean, I guess. Properly speaking I am web designer, rather than a graphic designer. But in this “industry”, generally speaking, it’s hard to put a consistent label on your skill set, because that label changes with the context. I do some graphic design, but I personally associate graphic design specifically with graphic design for print. My personal definition requires that a “web designer” have both design-for-web and coding (if not programming) skills. Some places you’ll find that’s a “front-end web developer” and “web designer” looks more like “graphic designer.” Other places not.

   That’s something that’s been on my mind lately, so it comes immediately to the front when asked about my profession. It may not seem like an answer, but I think the answer may be in there somewhere. I suppose that I mean that the job title isn’t as important as the duties. And that the web is still a place where things can get pretty fuzzy, so finding the right environment is essential. Design, graphic or web, can be an incredibly rewarding profession, but (as always) things can get complicated; so look out for yourself and don’t settle until you find what’s really right for you…but don’t turn down an experience if you don’t have anything better knocking. Experience is rewarding in itself. I once worked for a year as secretary for a landscaping company…and that alone is the reason I got the experience that originally qualified me as a web developer!

9. What is your favorite thing (logos, websites, etc.) to design?

   Websites, definitely. I could go on for pages and pages about why websites are different and about all the things that make the web a fascinating medium for me, but I’ll spare you…unless you really need more. Suffice it to say that a web site is rarely static and rarely truly finished. There are never any guarantees about the user agent (or how the person visiting your site is seeing it). This can complicate the design process and be ‘limiting’ in many respects, but it’s also a challenge that never gets old.

A Brief History of Websites

The web as we know it is a descendant of networks dreamed up by military consultants and initially utilized by educational institutions. When I was born there was no “www”; when I was in high school and getting interested in web design the computer lab had dial-up and Netscape.  The web was brand new.

When the internet first came to the home there was not really any such thing as a web designer or a web developer. There were software engineers, computer programmers, and there were graphic designers.  Many graphic designers had learned the trade before the invention of desktop publishing software.  Art for the computer screen was a new concept. But it certainly made sense in those days to hire a graphic designer to do the design of a website — who could possibly be better qualified among internet pioneers?

That’s hardly the case now – there is a generation of people with experience in and education about the creation of web sites specifically. But in the 1990’s there were no professional web designers who’d dreamed of a web design career as kids; there were just kids starting to dream as they discovered this exciting new medium.  Today those kids have grown up and become professionals.

What is Design?

Design is different from art; design is a problem solving process. You can certainly apply a critical methodology to art, but there is a fundamental difference between an artist’s approach to creation and a designer’s approach to creation. A designer is an artist who approaches the visual medium of their choice in order to solve a problem. An artist has artistic license and does not have to have an articulated purpose, though the nature of art itself defies this sort of generalization.  But a designer has failed if the product does not adequately meet their client’s needs.

Wikipedia states that, “design is the planning that lays the basis for the making of every object or system. In its broadest sense no other limitations exist and the final product can be anything from clothing to graphical user interfaces to skyscrapers.” Merriam Webster states that a designer designs “for a specific function or end.”  Design is utilitarian at heart; when design is beautiful that beauty serves a mundane purpose.  (Don’t cringe, talk to an artist who doesn’t consider himself a designer — when designing, you’re part artist, but the purity of your art is rarely the only consideration.)

On the web, design involves navigation, graphics, HTML, CSS, and JavaScript. A well-designed website must tell someone where they are, what is exciting about it, where they can go and make it easy to do those things. If there is content, it must be easy to read, and it is best if the website is accessible to those who use screen readers.  Because a website is not static and visiting a website involves interaction there are different states for many graphical elements (which are difficult to convey in static mock-ups).

The web is a unique medium; most websites grow and evolve. Unlike a graphic designer, whose job is done after the printers roll and who knows his clients will see the same flyer he sees, it is rare that a web designer has the luxury to clap his hands and say, “there, it’s done.” The presentation of a website varies according to the screen, operating system, browser, and plug-ins available to the user. It is all but assured that the content and needs of the site will change to the point that the interface and experience will have to be adjusted.

It is essential that a web designer be equally as invested in the process as it is that a web designer be able to create pretty pictures. If a web designer is unwilling or unable to take into account the technical realities he will be unable to create a superior design. A web designer must not only be adept with graphics, he must have a bone-deep familiarity with rendering engines, an ability to accommodate a range of user experiences by both progressively enhancing and gracefully degrading an interface, and an understanding of the fundamentals SEM and SEO so that the final website is optimized and marketable.

What is Development?

Wikipedia states that, “among web professionals ‘web development’ usually refers only to the non-design aspects of building websites, e.g. writing markup and coding.” If design is a process and a plan, development may be called the execution of that plan. Yet by that measurement, the graphic designer who utilizes InDesign to create a magazine is undertaking graphic development.

Merriam Webster states that to develop is, “to create or produce especially by deliberate effort over time.” This is a concept that is absolutely inseparable from both website design and development, because a website is often like a living organism that creates itself over time. Without new posts, a blog is not a blog; it is the growth and expansion of the blog that makes it a blog.

So how is a web developer distinct from a web designer?  A developer would certainly be expected to undertake more programming than a designer, so he may cite technologies with which he is familiar, “I develop using HTML, CSS, JavaScript, PHP, and MySQL.”  Web development, like web design, is impossible without myriad technologies like servers and databases as well as web programming languages.  Simply viewing a generic WordPress site requires the cooperation of a number of very technical technologies: TCP/IP, a server with Apache installed, an .htaccess file for friendly URLs, PHP, a MySQL database, and HTTP — just to name a few.

A thorough knowledge of all of these is not common — there are network administrators, server administrators, and database administrators for the more esoteric and exacting tasks.  But the average web developer is normally able to set up a development environment of Apache, PHP, and MySQL on his computer and write both SQL queries and PHP code.  He may not be an expert in the HTTP protocol, but he at least knows the cosmetic difference between GET and POST and can utilize them.   Programming in a chosen language is itself is an art form with its own various methodologies and there are concepts like object orientation and model-view-controller architecture that span languages.  Ultimately there are a number of specialties within web development, but there is also unquestionably a breadth of knowledge necessary to develop effectively.

Since I assert that the success of a website design relies on the correctly designed use of all these many front end and back end technologies, what is a web developer?  However essential good web development is to the experience, much of web development is invisible to the viewer.  You can point to a button, but to explain all that is involved in having that button display another page is dizzying to the layman.  Are web developers the blue-collar workers of the web, the ones who construct the masterpieces designed by web designers?  Or is the divide between web design and web development based upon an outdated fallacy that a web site can be separated into “the art parts” versus “the programming parts”?

Again, only with more W’s

It’s a complicated subject to be sure and, possibly for that reason, the titles of “web designer” and “web developer” are applied very inconsistently to web professionals. This inconsistency leads to confusion, job dissatisfaction, and the placement of poorly qualified individuals.

In some offices there may be a room of individuals called “web designers” who use Photoshop to create mock-ups. Once the mock-up is approved the “web design” part of the process is considered complete and it is handed off to the “web developer” who not only writes all the HTML and CSS, but also makes decisions that affect the user experience.

Other businesses may hire employees with the title of “web designer” who use Photoshop, HTML, CSS, and possibly JavaScript to create templates that may lack necessary server-side code, but are complete down to the user experience. In these environments the designer is responsible for designing the entire front-end experience, whether or not he actually writes all the final production front-end code.

You can probably already tell which scenario I favor. As far as I am concerned the first group should not be called web designers. Without utilizing HTML and CSS, how can a designer truly design a website — can an artist draw without using a pencil?  Didn’t the genius painters of the Renaissance mix their own paints?  Don’t graphic designers have to know about printing processes and inks, even if they don’t physically run the printing press to print their posters?  Each visual discipline has “technical” skills associated with it that require more than dreaming in the right brain.  Web design is not an exception, in fact, it is an artistic discipline for which this truth is even more stark and inescapable.

A designer who creates a static mock-up of a website, even one which indicates user interaction, but who does not know through his own abilities what HTML, CSS, and JavaScript can do is not even producing graphic art; he is designing based on what he has seen on other websites.  In short, he is not even exercising creativity, he is copying what others have done. Imagine! “I know we can do a carousel like this because I have seen it on other websites, so ‘insert carousel here.’ No, I don’t have a design for the animation or interaction, because I can’t do more than a static mock-up.”

If I sound harsh, it is because this sort of so-called designer does not even have the defense of artistic integrity; he is a slapdash copycat. A real designer concerned about the quality of his art would consider these details important. Yet an endless series of mock-ups and cumbersome sprites showing the various states of interaction, which would at least meet the minimum criteria I have set, are far from an ideal answer.

The answer is: hire a web designer.

The last time I posted about customer service I was wondering about freelance customer service because of several bad experiences I’d had.  Freelancers occupy a unique place that doesn’t necessarily place a lot emphasis on traditional customer service, though I’m sure the experience ranges from exceptional to awful depending on the freelancer.

But this post doesn’t really have any relationship with freelance web design or web development, it’s about an experience I just had with Bealls and Amazon.com.

One of those bad experiences I had a few months ago was with a Shoes.com purchase I made through Amazon.com.  Shoes.com sent me the wrong size shoe.  Even though it was their mistake and I made my preference clear, Shoes.com refused to make an exception to their “no exchanges on Amazon.com orders” policy.  By the time I finally got the return label (the process was fraught with delays and technical problems) they didn’t have my size anymore and I gave the shoes to my sister with the promise that I would never order any product from Shoes.com again. It’s not that they were the worst ever. But they caused a problem and then placed most of the onus of solving that problem on me without even holding a my original order for me.

Contrast that with Bealls.  A few days ago I ordered some shirts from Bealls through Amazon.com.  I had purchased this particular style of shirt in black at a local store.  After wearing it a few times I decided I liked it enough to search for it on Amazon in the hopes someone would have it in other colors.  I ordered a red one and a brown one from Bealls.  When the package arrived (in just a couple of days), I opened it to find that one of the shirts wasn’t quite what I’d ordered.

I have a problem with one of the shirts I received. The red shirt is of the same brand and material, but a different cut of collar (than what is pictured on the site and in comparison to the brown).

The picture on the site and the brown shirt show a v-neck that is rather wide. The “back” of the collar does not have the wide hem that the front of the shirt has. This causes the shirt to fit very differently than the red shirt I received, which has a narrow v-neck with a wide hem all the way around.

I don’t actually care to return it because I don’t want to go through the hassle. But I *would* like to receive a red shirt of the same cut as I ordered (the shirt pictured on the site, the same cut as the brown).

I will pay for it, but I want to make sure I receive the right one this time.

I received this amazing response just a few hours later!

Thank you for taking the time to contact www.BeallsFlorida.com

We apologize for the incident that has occurred. Bealls will issue a credit back to your account for the amount of $11.99. Please do not return the shirt, you may keep it or donate to charity. However, if you
would like to reorder the shirt please call and speak with a customer service representative at 1-800-569-9038. Thank you.

Thank you for shopping with BeallsFlorida.com
Bria-Call Center Agent
Bealls Department Stores
bdsorders@beallsinc.com
1-800-569-9038

This is the right way to do customer service. I didn’t hate the red shirt I got, I just prefer the style of shirt I have in black and brown. But their response not only made the “to return or not to return” dilemma completely simple, it also completely acknowledged and made reparation for the mistake.  I didn’t even have to ask!  In fact, I wouldn’t have asked for the solution they offered because I’ve become too jaded to expect that kind of service.

Ultimately I think this is the type of service that every business should give to its customers. But I know through personal experience that many, actually most, businesses do not provide this level of service.  So I want to share it with heartfelt thanks to Bealls.

I personally feel this stifles the potential of the cite tag. When I read that definition I mentally measured it against situations in which I have considered coding with or have coded with cite in the past and felt it made what could be a very useful tag rather shallow. Google (it knows all, it sees all) showed me that my thoughts are shared by others, but there are many ideas which have been expressed regarding cite which haven’t been implemented and which I think are very good notions.

The current definition of cite means it is suitable for scenarios such as a blog entry which states, “Let’s see, what is going on with me right now? I am currently re-reading Storm Front from The Dresden Files by Jim Butcher. And my little sister has left for Spain — the lucky dog!” Of course cite can also be used in references (though only around titles) like “Butcher, Jim. (1999). Storm Front. New York, NY: Idunno Press.” There’s a pretty huge gap between those two situations and it suggests that cite is equivalent to “the title of something” rather than “the source of citation” — a tad confusing given the literal word involved.

I don’t intend to suggest that cite should only be useful for formal scholastic citations, but I do mean to suggest that it could be more useful for both formal citations as well as for everyman’s casual citations without doing any harm.  I believe the cite element will benefit if it can simply be used as if it is what it sounds like it is, rather being specified in a way contrary to “common sense”.

Untitled by Rachael L. Moore

The HTML5 definition makes cite less useful in “real” citations than it certainly should be. Perhaps the HTML5 WG do not remember college research papers and have blocked from their minds the vagaries of APA, MLA, Chicago, etc. This flashback is brought to you as a reminder that you can and people do cite authors, chapters, websites, and untitled pages on anonymous websites as well as the types of works listed in the HTML5 spec. What a content author needs to cite and the appropriate way to cite varies with what information is being presented and where that information came from. In the real world a real citation is not always a title, therefore cite should not be limited to titles.

So It’s A Homonym?

And just contrast that with the cite attribute — it’s the same word and sometimes serves the same purpose, but implemented with completely different data! cite-the-element can only contain titles and cite-the-attribute can only contain valid URLs (whatever that means in the HTML5 spec). Hilariously, cite-the-attribute is not a valid attribute for cite-the-element (which would be a bit dizzying). Combining the two is nevertheless useful; yet I wonder why a tag and an attribute with the same name and overlapping purposes are each unnecessarily limited and mutually exclusive.

Dunno Where That Book is, Mate

Presumably if you’re using cite, you will often have other content on the page which the cite relates to. If you don’t, it’s just the title of something you happen to be writing down for some whimsical reason. Yet the cite tag conspicuously lacks any way to perform this basic task of associating a citation with the information being cited 1. I consider this a correctable oversight.

Examples

Below are some examples, some of which are ways to use cite that wouldn’t necessarily be valid in HTML5, but should be considered.  In some sets I have contrasted my experiment(s) with other examples which (I think) would be valid in HTML5. I don’t necessarily endorse all these examples; you can think of them as a stream of consciousness. I will probably update them post-publishing as they occur to me.

Example Set 1

In Example 1a you can see how cite could theoretically be associated with content using for 2. In Example 1b I’ve attempted to render the same information in valid HTML5 (at least, so far as I understand it). I’ve also done some things with dfn and for in Example 1a which may muddy the example somewhat. But part of the idea is that for could become generic, so I wanted to test the efficacy & ease-of-use.

Example 1a

In the <cite href="http://www.w3.org/TR/html5/text-level-semantics.html#the-cite-element" for="cite-definition">HTML5</cite> specification <code id="cite-tag" class="tag tag-element">cite</code> tag is defined as <q id="cite-definition"><dfn for="cite-tag">... the title of a work ... [which] can be ... quoted or referenced in detail ... or ... mentioned in passing</dfn></q>.

Example 1b

In the <cite>HTML5</cite> specification <a href="#cite-tag-html5"><code class="tag tag-element">cite</code></a> tag is defined as <q cite="http://www.w3.org/TR/html5/text-level-semantics.html#the-cite-element"><dfn id="cite-tag-html5" title="cite">... the title of a work ... [which] can be ... quoted or referenced in detail ... or ... mentioned in passing</dfn></q>.

Example Set 2

I like the cite attribute, though I have some reservations and questions about it. Is a relative URL a “valid URL” here? If so I think a fragment identifier could be used like in Example 2a and Example 2b. What about a tag URI? If I understand the spec’s admonitions and the associated draft Web addresses in HTML 5 correctly, the way HTML5 defines a “URL” includes URIs (maybe?), so it has potential because “urn:isbn:0-486-27557-4″ could be used.

Example 2a

In the <cite href="http://www.w3.org/TR/html5/text-level-semantics.html#the-cite-element" id="cite-html5">HTML5</cite> specification <code id="cite-tag-html5" class="tag tag-element">cite</code> tag is defined as <q cite="#cite-html5"><dfn for="cite-tag-html5">... the title of a work ... [which] can be ... quoted or referenced in detail ... or ... mentioned in passing</dfn></q>.

Example 2b

In the <cite id="cite-html5"><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-cite-element">HTML5</a></cite> specification <a href="#cite-tag-html5"><code class="tag tag-element">cite</code></a> tag is defined as <q cite="#cite-html5"><dfn id="cite-tag-html5" title="cite">... the title of a work ... [which] can be ... quoted or referenced in detail ... or ... mentioned in passing</dfn></q>.

Example Set 3

I find Example 3a more elegant than Example 3b, but I concede it’s a matter of personal taste. Incidentally I am generally in agreement with Eric Meyer’s suggestions about linking (though, for one thing, I see potential use cases for article and href … if it is in fact appropriate to use the article tag for excerpts/summaries that link to the full article).

Example 3a

<p id="cite-339858343">
In <cite href="http://meyerweb.com/eric/html-xhtml/html5-linking.html" for="cite-339858343">HTML5: More Flexible Linking</cite>, Eric Meyer proposed adding <code class="tag tag-attribute">href</code> to the <code class="tag tag-element">cite</code> tag. I think this makes a lot of sense.
<code class="example excerpt">
<p><cite href="http://www.whatwg.org/specs/web-apps/current-work/">HTML5</cite> is a work in progress.</p>
</code>
</p>

Example 3b

<p>
In <cite><a href="http://meyerweb.com/eric/html-xhtml/html5-linking.html">HTML5: More Flexible Linking</a></cite>, Eric Meyer proposed adding <code class="tag tag-attribute">href</code> to the <code class="tag tag-element">cite</code> tag. I think this makes a lot of sense.
<code class="example excerpt" cite="http://meyerweb.com/eric/html-xhtml/html5-linking.html">
<p><cite href="http://www.whatwg.org/specs/web-apps/current-work/">HTML5</cite> is a work in progress.</p>
</code>
</p>

Example Set 4

Do you really need to cite your mother? Well, probably not, but I can imagine a legitimate need for cite in scenarios where a person would be cited: spoken words not recorded, aphorisms associated with a person rather than a specific document, etc. in addition certain formal citations.

Example 4a

<cite for="quote-833243">Kathy Moore</cite>, my mother, frequently stated that, <q id="quote-833243">you catch more flies with honey than with vinegar</q>. To my sincere dismay I find implementing this difficult.

Example 4b

<cite id="quote-833243">Kathy Moore</cite>, my mother, frequently stated that, <q cite="#quote-833243">you catch more flies with honey than with vinegar</q>. To my sincere dismay I find implementing this difficult.

Example 4c

Kathy Moore, my mother, frequently stated that, <q cite="Kathy Moore">you catch more flies with honey than with vinegar</q>. To my sincere dismay I find implementing this difficult.

Example 4d

Kathy Moore, my mother, frequently stated that, <q cite="sgn://example.com/?ident=kathymoore">you catch more flies with honey than with vinegar</q>. To my sincere dismay I find implementing this difficult.

Example 4e

Kathy Moore, my mother, frequently stated that, <q cite="mailto:kathy@example.com">you catch more flies with honey than with vinegar</q>. To my sincere dismay I find implementing this difficult.

Example 4f

Kathy Moore, my mother, frequently stated that, <q>you catch more flies with honey than with vinegar</q>. To my sincere dismay I find implementing this difficult.

Example Set 5

You caught me…I want the cite tag to convey that I am citing the source of content that would benefit from a citation. Not to mark up all my titles so that they are italic.  There are several things I might want to do as a result: associate a q (material) with a particular cite tag (source), have the cite tag (source) to direct to the q (material), have the cite tag (source) to link to a URL, and/or have the q (material) direct to the cite tag (source).  Maybe not all at once, but associating the material with the source does create more coherent relationships between sections of a document and starts down the road of making advanced citing concise.  A bunch of examples follow…

Example 5a

<q id="quote-309342">A fallacy is a misconception resulting from incorrect reasoning in logical argumentation.</q>
...
...
<cite for="quote-309342">Fallacy. (2009, September 21). In Wikipedia, the free encyclopedia. Retrieved September 23, 2009, from http://en.wikipedia.org/wiki/Fallacy</cite>

Example 5b

<q cite="#cite-309342">A fallacy is a misconception resulting from incorrect reasoning in logical argumentation.</q>
...
...
<cite id="cite-309342" href="http://en.wikipedia.org/wiki/Fallacy">Fallacy. (2009, September 21). In Wikipedia, the free encyclopedia. Retrieved September 23, 2009, from http://en.wikipedia.org/wiki/Fallacy</cite>

Example 5c

<q cite="#cite-309342">A fallacy is a misconception resulting from incorrect reasoning in logical argumentation.</q>
...
...
<cite id="cite-309342" href="http://en.wikipedia.org/wiki/Fallacy">Fallacy</cite>. (2009, September 21). In Wikipedia, the free encyclopedia. Retrieved September 23, 2009, from http://en.wikipedia.org/wiki/Fallacy

Example 5d

<q cite="#cite-309342">A fallacy is a misconception resulting from incorrect reasoning in logical argumentation.</q>
...
...
<cite id="cite-309342"><a href="http://en.wikipedia.org/wiki/Fallacy">Fallacy</a></cite>. (2009, September 21). In Wikipedia, the free encyclopedia. Retrieved September 23, 2009, from http://en.wikipedia.org/wiki/Fallacy

Example 5e

<q id="quote-309342">A fallacy is a misconception resulting from incorrect reasoning in logical argumentation.</q>
...
...
<a href="#quote-309342"><cite>Fallacy</cite>. (2009, September 21). In Wikipedia, the free encyclopedia. Retrieved September 23, 2009, from http://en.wikipedia.org/wiki/Fallacy</a>

Example 5f

<q cite="http://en.wikipedia.org/wiki/Fallacy">A fallacy is a misconception resulting from incorrect reasoning in logical argumentation.</q>
...
...
<cite>Fallacy</cite>. (2009, September 21). In Wikipedia, the free encyclopedia. Retrieved September 23, 2009, from http://en.wikipedia.org/wiki/Fallacy

Your Moment of Zen?

There comes a time in every woman’s life when the chaos in the world becomes overwhelming…

Ian Hickson

I don’t understand why it would be more useful [to allow author names and full formal citations as valid cite content]. Having an element for the typographic [AN: presentational?] purpose of marking up titles seems more useful than an element for the [AN: semantic?] purpose of indicating what is a citation.

Perhaps I don’t understand.  That word “semantic” sure is tricky.  But it’s fun to say.  Try it, 9 times fast!

WHATWG HTML5 Working Draft

This specification is limited to providing a semantic-level markup language … The scope of this specification does not include providing mechanisms for media-specific customization of presentation … The WHATWG was based on several core principles, in particular that technologies need to be backwards compatible, that specifications and implementations need to match even if this means changing the specification rather than the implementations…

Footnotes

1. cite can make use of the global attributes defined by HTML5 which include item, itemfor, and itemprop. It may be that these would optionally create some relevant functionality. I have not yet investigated these attributes beyond noting their existence. However, if it turns out that itemfor is a close relation to for I think its inclusion in the spec may be redundant — or at least not relevant as a complete solution to my cite wishlist. Better to specify the implementations already exist and codify the common and familiar usages, right, HTML5?
2. for is already familiar to us from using it with label and input. for explicitly associates a label with an input. For that reason it is well-suited to associate cite with whatever content might need a citation. I conjecture it ought be easiest for search engines, browsers, scripts, validators, and authors to expand upon the use of something already accommodated and familiar. Especially since it’s so goshdarn literal and doesn’t sound any alarms for me as a philosophically bad practice — what’s good for the goose (label) is good for the gander (cite).

Related Reading

• cite definition
• citation definition
• HTML5: The Cite Element
• Web addresses in HTML 5
• HTML 5: More flexible linking
• The HTML 5 Superfriends: cite
• The Cite Element in HTML 4.01 and HTML5
• All these years, I’ve been using the cite element incorrectly
• XML-encoded textContent of cite elements
  
• cite=”…” attributes values
• [whatwg] the cite element
• [html5] Author of a quote – how to mark up?
• what is dt? / Speakers in Dialogues (Was: what is dt?)

:after

No pun intended–my technique involves using the :after pseudo-element in place of an empty span tag. This  it has some faults.  Although it may not be the best choice for production sites, I think it worth sharing because I think it is interesting:  minimalist and possibly someday a worthy successor to my favorite image replacement technique.  My preferred image replacement procedure is the one credited to Levin Alexander, which involves nesting an additional empty span.  I feel (and the report cards seem to agree) that it is the most robust.  Its only downside is that it requires extra markup.  I wanted to find a way to duplicate the principle with CSS alone.

<style type="text/css">
	h1#irstyle4,
	h1#irstyle4:after{
		display:block;
		width:600px;
		height:100px;
	}
		h1#irstyle4{position:relative;}
		h1#irstyle4:after{
			position:absolute;
			top:0;left:0;
			content:url("testtitle.jpg");
		}
</style>

<h1 id="irstyle4" title="Test Text 4">Test Text 4</h1>

Successful Rendering

You can see the close relationship to Levin Alexander’s empty span image replacement.  The :after pseudo-element is positioned to cover the heading text.  A title tag can be added to the heading to create a tooltip.

Problems … Solutions?

There are a few known issues.

1. One problem is that some browsers, particularly browsers based on earlier versions of the Gecko layout engine, break and display the text above the image.  You could use CSS hacks to target Mozilla and apply a tried-and-true image replacement technique such as the negative text-indent to fix this.  I disdain CSS hacks and this is a conceptual demo, so I didn’t apply any workarounds.
2. Firefox 3.0.11 with the Web Developer toolbar still shows the image with “hide images” set!  I’m not sure if this would occur in other “images off” scenarios, but there are possible alternatives–such as applying the image as a background:url() in the :after pseudo-element rather than inserting it using content:url().
3. This image replacement technique, like the positioned span on which it is based, will not work well with transparent images.  An additional way to hide the text (such as the negative text-indent) would have to be utilized in addition to or instead of this technique.

You may also feel, looking at the list below, that the functionality breaks in more browsers than it works–but most of those browsers have either a minuscule market share or are browsers in which you would expect problems.  Firefox prior to 3.5 is the most notable failure.  Which isn’t to say that it’s a production-ready technique with no drawbacks…

Compatibility Overview

I used browsershots.org to test a large variety of browsers across multiple versions and operating systems.

Broken: Text above Image

• Flock
• Seamonkey
• Galeon
• Firefox (<= 3.1)
• Seamonkey (< 2.0)
• Iceweasel
• Epiphany
• Iceape
• Navigator
• K-Meleon

Broken Rendering

Gracefully Degrading: Text Only

• Avant
• MSIE 4.01
• MSIE 5.01
• MSIE 5.5
• MSIE 6
• MSIE 7
• Dillo

Graceful Degradation

Working! Success Stories

• Minefield
• Firefox (> 3.1)
• Opera (7.54 +)
• Chrome
• Safari (3.2.1 +)
• Shiretoko (3.5)
• Seamonkey (2.0)
• MSIE 8

Successful Rendering

(Note that some browsers [Opera, Chrome, and Safari if I recall correctly] will actually replace the content in an element with generated content.  So in those browsers you could set the heading’s CSS content property to the banner and get at least partway there.  There’s no telling if that behavior (or if  :after behavior) will ever become consistent enough in this respect to make a good all-purpose image replacement medium.  Obviously for replacement Opera’s behavior is preferred, but it’s been a while since I read that part of the CSS spec, so I don’t know what how the implementation is specified.  I promise to check at some point in the near future.)

Lately, however, I’ve spent enough time programming at work that the idea of writing my own content management system (which I’ve started, of course) has gotten less attractive.  My standards for usability and flexibility are too high.  It’s still a good programming project to undertake as a learning experience, of course, but I would never be fully satisfied with my own work.  I’m not even satisfied with many content management systems with years of work put in by dozens of developers!

If you asked me what the biggest 3 content management systems were I’d probably say: Wordpress, Drupal, and Joomla followed by PHPNuke, Expression Engine, and that-one-we-used-at-TCC.  I don’t have numbers on that, it’s based on the production web sites I’ve seen in and what comes up in Google.  Strangely, those first 3 CMS are ones I have never used on my own site!  It’s probably time to take a closer look.

I started by looking at Wordpress.  I actually really like Wordpress.  I like the backend, I like the features.  But the organization falls flat for me when using Wordpress for a site.  I can make a page or a post.  I can categorize the post or tag the post.  It just isn’t robust enough for a really organized site structure, especially if the structure is complicated, though I’ve given some consideration to making more use of custom fields by writing a plugin that suits my preferred information architecture.

Next, I looked at Joomla.  I remember reading an article that said Joomla’s interface was poorly designed in comparison to Wordpress and I agree.  I’ve used at least a dozen content management systems and I agree.  I found myself confused about a lot of things.  I played around with it and decided that, though I liked some things about it, I wanted to see some more options.

After that, I looked at TextPattern.  I didn’t give TextPattern as much time as others because my criteria was both a CMS I felt I could use as a web design and web developer and a CMS I felt very non-technical customers could use.  The TextPattern input, though interesting, I felt would have as big a learning curve for customers as a limited HTML tagset.

I’ve started falling in love with the very last one I tried: Drupal.  It’s early in the honeymoon, of course, but the ability to create your own content types and customize the inputs, create custom views and override default views, and create taxonomy sorted into various vocabularies that can either be optional,  required, or typed in…  Well, that is robust.  It can lend itself to a simple site structure or a complex one.  Best of all, the choices Drupal has made just make sense to me personally…it fits the way I think about sites.  It’s pretty darn close to the way I was planning to develop my own content management system!  I don’t remember any of that from the last time I tried Drupal out.

One of the things I don’t like, which is common to almost every CMS and is simply the way the web development world works, is the need for all those plugins.  I really dislike having to look for, install, and update plugins separately for certain functionality.  If it were something really offbeat…but c’est la vie.  You can’t even use a browser these days without wanting a host of plugins…unless you’re using Opera, which I often do.

I also haven’t undertaken that most dreaded of all tasks…templating.  But I hope I’ve found a CMS I can work with on my personal projects.  And it’s one of the most ubiquitous.  I’m pleased, even if I am behind the rest of the pack.

But privately…I hate multimedia. A friend of mine just sent me an invitation to Dropbox. Now, I’ve read about Dropbox and I didn’t run out and sign up. But I think my friends wants my referral, so I figured I’d take another look. I don’t want to sign up for something I have absolutely no need for (I’ve got too many accounts scattered around the internet as it is). So I glanced around the invitation page for a “More about Dropbox” link. What I saw was this, “Want to learn more? Check out our screencast.”

Screenshot of a portion of the Dropbox sign-up page, showing an overview of their product and links (a screencast link is emphasized).

My reaction to this was to frown and sigh.  I thought, “The powers-that-be have are always saying that video presentations are a better way to convey information…but I hate them!”  I also realized that I never, ever watch them, even when I really want the information, unless I have no other choice.  And sometimes not even then.  For example, I read two blogs that often include videos or do periodic podcasts/screencasts.  I’ve starred some of them in Google Reader for later consumption, but I have never gone back to them, even though the topics interest me.

You see, I browse with my computer sound off.  If the sound is on, it’s because I’m listening to music.  But mostly the sound stays off because, as sad it is, I still come across websites with songs and other irritating sound effects embedded in them.  Not often (unless you count MySpace), but one 2am audio surprise a month is far too many.

So when videos are substituted for text and screenshots, I know I am going to have to turn on my speakers (or dig out my headphones, or turn off my music), check the volume levels, and do nothing but watch and listen for several minutes.  I hate having to interrupt my groove to watch a video.  I hate watching a video skip because of inadequate buffering.  And perhaps my attention span is bad, but when I am looking up a tutorial I tend to skim until I find the part I need — I normally don’t need to read all of it — and I can read much faster than the presenter can talk.  More often than not, I end up feeling like it’s a huge waste of my time.

I can think of only two situations in which I will watch multimedia presentations or videos online.  One of those is for the sake of a laugh (Man in the Box, anyone?) or entertainment.  The other is utilize a series of video tutorials on software I don’t know anything about.  But even for those two reasons, I will normally put off watching YouTube videos or online tutorials and, in truth, I often fail to come back to watch.

I’m just one person, but it’s got me wondering if “they” are slightly exaggerating the benefits of multimedia and video.  What if a significant minority of visitors feel the same way I do?  In my mind, that doesn’t say not to use video…it just provides another reason to concentrate on accessibility.  Accessibility guidelines state that accessible alternatives should be provided for presentations and video.  I suspect that may be a good idea for more than just accessibility: also for usability.

A long post to say that offering transcripts of your videos is a good idea for several reasons!

Now, Gmail long ago took steps to enable back and forward buttons.  Most things you click on in Gmail will change the site address in the address bar.  On a non-ajax site the query string would most likely change, in Gmail the hash, or token, changes.  The hash part of a URL is the part following the # (pound sign).  This part of the URL is normally used to allow users to navigate throughout a page, ie: “jump to content”.  The hash/token is therefore admirably suited to identifying states in an ajax driven site.

But how is that accomplished?  Many web developers are probably already familiar with how to do it, either by writing the javascript themselves, using a library, or some combination of the two.  As I mentioned in my last post, however, I feel that I’ve been spoiled by free javascript downloads and could use some more practice.  Sure, I can use other people’s scripts and modify them, but I don’t write much javascript on my own.  I feel I should at least get a grasp of the concepts involved in enabling the back button on an ajax menu, even if I ultimately use a pre-written javascript plugin in the interest of added features or stability.

Enough rambling!  What have I learned so far about javascript enhanced navigation in ajax sites?  The steps needed are:

1. Ensure a hash/token is added the URL when links that should be navigated are clicked.
2. Monitor the URL for changes to the hash/token and load the appropriate state upon a change.

That sounds a bit easier than it should, but it isn’t really that hard (although, as you will see, it doesn’t take the navigation quite as far as it needs to go).  Setting the hash/token is very simple and so far I’ve only seen two ways monitor the URL: an iFrame and SetInterval.  Here is what I have done to create a usable javascript enhanced menu with ajax to load the pages and gracefully degrade.

The actual code to bind a custom “change” event to the window.location came from Ben Nadel, but I don’t feel like I “cheated” on my goal because I had gotten it working with regular javascript functions, but while researching SetInterval() for more info I found his post and realized his jQuery solution was far more elegant.  I am vaguely familiar with jQuery’s ability to create and trigger custom events from seeing it in a pagination plugin I once downloaded, but I need to look into this “anonymous function” idea further.  Anyway, it is a far more elegant way to write the javascript because, as Ben explains, it will go ahead and execute at once (which helps with the bookmarking part) and, well, it just looks nicer than my series of 8-or-so functions.  You can write like it’s a normal event in jQuery doing it this way, too.

However, even the bound change event ultimately relies on SetInterval() — it’s not really an event binding, because a change in window.location just isn’t a javascript event; the way that I understand it, if SetInterval() weren’t checking for a change every so often, the binding wouldn’t actually detect changes to window.location (unlike a normal click binding always detects click events).  You can achieve the same end without using jQuery to bind and trigger the custom event, but using jQuery this way certainly streamlines the resulting code.

Something I have done personally which I haven’t seen yet (though I doubt it’s original) is that I have chosen to translate the hash/token directly into a possible file path.  If you’ve read the section of the W3 CSS specification about naming classes and ids, you’ll know that you can use special characters in CSS class and id names by escaping them with a backslash \ and using their hex code.  The url_from_token() function translates common URL characters.  This way, your hash can express “the file test1.html that is in the page folder” or “the file pages.php with the query string ?id=test” (which reminds me that I forgot to translate the equal sign, whoops, I’ll have to correct that).  That function needs work aside from forgetting the equal sign, though, I think it’s inefficient…or, well, it looks inefficient.

The whole thing is not production ready.  Not only is there some tweaking to be done (and some further exploration on my part into the use of iFrames in place of/in addition to SetInterval()), but the functionality isn’t 100%.  My tests (on Windows) so far show:

Safari (for Windows) 3.2.2 (525.28.1)
Google Chrome 2.0.172.31

• Loads content
• Back button works
• Forward buton works
• Direct entry works
• Bookmarks work

Firefox 3.0.10

• Loads content
• Back button works
• Forward buton works
• Direct entry works
• Bookmarks work
• Swaps \ in href to /

Internet Explorer 7.0.5730.13

• Loads content
• Back button works
• Direct entry works
• Bookmarks work
• Forward button does not work

Opera 9.64

• Loads content
• Back button works
• Forward button works
• Direct entry does not work
• Bookmarks do not work

So, be on the lookout for at least a third post summarizing all my research and explaining the code in sections.

Verizon Wireless, who have previously shone in the customer service department, didn’t even try to troubleshoot my problem logging in beyond telling me to use Internet Explorer 7.  Nevermind that I’ve used Opera and Firefox to log in the entire time I’ve had my account.  Seagate’s support website is an absolute disaster: it’s difficult to find a contact form, then the form repeatedly fails on the required “have you read all these articles in our knowledge base?” escalation step.  Zenni Optical took over twice as long as promised to deliver my glasses and, even though I asked several times, never told me why my order was delayed.  In fact, at least one representative got audibly annoyed with me — I won’t bore you by recounting the uninformative e-mails I received and the rude comments the representative made.  A teller at my bank, Envision Credit Union, refused to let me purchase a money order (which I needed to pay my rent)–after letting me change my PIN and deposit my paycheck (putting it out of my reach) because my driver’s license is expired.  I was standing right there and could have verified my identity in a number of  other ways, but apparently uptight adherence to their policy supersedes both the policy’s purpose in protecting me and their implied obligation to provide me with service.  Envision has also failed to reply to two e-mails I sent prior to this experience.  Shoes.com still hasn’t replied to my e-mail, sent over a week ago, about the fact that they sent me the wrong size of shoe (which is frightening given their “No Exchange” policy).

I’ve worked directly serving customers, in some form or another, most of my life.  My first job was concessionist at a movie theater, my second retail sales at a video game store, while my third and fourth heavily involved phone and e-mail tech support.  I know the frustrations.  It sometimes seems that people never read directions.  Answering the same question over and over is tiresome, that’s inescapable.  It’s hard to keep smiling when you know that a customer is being deliberately difficult in an effort to “work the system” and get special treatment or a discount.  When you are talking to that customer–the one that hasn’t paid for 3 months and is insisting, while insulting you, that s/he should not only continue to receive service, but also should have the past due balance waived–it’s hard to keep in mind that, really,  “special treatment” should be the rule.  As a customer service representative, you shouldn’t be frowning at the idea of special treatment, you should be happily providing special treatment to every customer with whom you interact!

In the “real world”, though, policies and procedures are in place to do things like protect the customer from fraud and  ensure the efficiency and accuracy of support responses.  Making exceptions can do more harm than good–doing “too much” for one client can mean not doing anything for 3 more clients who are waiting on hold in your call queue.  Your manager may not appreciate it as much as the client, either.  I understand that, too.  That doesn’t change the fact that the customer service representative’s responsibility is to service, not stall.

All the bad experiences I’ve had lately have made me wonder what kind of experience most clients have with their freelance web designers and web developers.  After all, there is a stereotype applicable to each that doesn’t bode well for providing good customer service!  For web designers, we have the temperamental artist (I’ll dust off my beret).  For web developers, we have the socially inept nerd (and on go my thick-rimmed glasses!).

Certainly I think that freelance web designers/web developers occupy a different position than a technical support employee.  You hire a freelance designer/developer, hopefully, because their portfolio of work convinces you that they are an expert in their field.  A freelance designer or freelance developer acts as a consultant in addition to a contract employee.  Often a freelance designer/developer is understood to have specialized knowledge.  This makes some conversations easier, but it doesn’t really change the fact that a paying customer has the right to make the final decision.

Ideals aside, one of the advantages of being self employed is being able to decide what jobs you want to take and how much grief you are willing to put up with, isn’t it?  So when the freelance designer vehemently disagrees with the decision, when the freelance developer is having a bad day, or when the customer is being a jerk, what inhibition aside from good manners will assure a freelance client of good customer service?

On the other hand, a freelancer (even one suffering pangs of artistic integrity!) has a front-row seat to the effect of bad customer service on his/her income.  If a freelance developer depends on his/her freelance employment for the majority of his/her income, a customer service failure could be economically fatal!  But there’s no guarantee that a given freelance designer will have significant customer service experience or a philosophy that holds customer service in high esteem.

So I wonder how well customer satisfaction ranks among clients of freelance designers.  If you are a freelance designer yourself you can ask or gauge by your repeat business and referrals.  I’d also like to ask freelance designers and developers how much attention they give to their customer service skills.  How important do freelance designers and freelance developers consider good customer service during the fulfillment of a freelance contract?

Having been a customer and a customer service rep, I know how overwhelming the frustration on both sides can be and I also know how easy it is for failures to occur, whether those failures are deliberate or accidental.  How often do customer service horror stories occur in the career of the average freelancer?  ‘Cause, personally, I’m closing my bank account, even though I’ve been with that bank for 10 years.  Some frustrations can be ignored and some rifts can be healed, but my bank teller willfully putting me at risk of  getting evicted because I no longer drive a car is just ridiculous.

This presents several challenges.  A visitor should be able to navigate to states (when those states emulate a traditional page) through bookmarks, the browser back and forward, etc.  The expectations of navigation already in place due to the pre-existing paradigm are as important –perhaps MORE important–to site/navigation usability as the javascript enhancements are.

If you know me, you know that I”m not a huge fan of javascript.  I don’t think javascript should ever replace functionality, but merely enhance it.  As a result, I have only limited knowledge of javascript because I have only made limited use of javascript.  The jQuery library has really captured my imagination, especially with the jQuery UI family.  Seeing the functionality of the FogBugz website (particularly the “Learn More” section’s accordion menu) inspired me further.  This is everything that a javascript-enhanced site should be.  Without javascript, the site functions normally–the accordion is a flat hierarchal menu, the link hrefs point to a normal html page.  With javascript, the menu is an accordion and upon a click the content is loaded via an ajax call.  Bookmarking and browser back/forward navigation work.

Why this isn’t built into jQuery UI already I don’t know.  Expectation plays a huge role in the success or failure of a UI.  My prior lack of interest in javascript is a huge hindrance to me here–I can read through the FogBugz javascript and identify certain areas I’m sure are critical to the functionality, but I don’t really *understand* it enough to write my own code to fix the navigation problems in the the jQuery UI.

So I’m going to do my best to study this issue and document my findings about how to emulate traditional navigation on javascript enhanced sites.  That emulation should include graceful degradation,  bookmarking, linking, and back/forward (plus any other details that are slipping my mind).  In my opinion, unless all those bases are covered the interface is a failure.

What do I know so far?  First, there is a pre-existing practice for referring to a particular spot on a page.  That is the token (aka hash aka anchor aka fragment).  Give an element an id token of “spot” and then link to #spot and the hash will be appended to the address and browser will jump to that element .  Many javascript enhanced sites use this part of the URL to remember states and provide navigation.  There are probably other ways to provide a unique address, but I favor this one.

When you set a click event on an anchor or otherwise interrupt its normal function with javascript, often the hash won’t actually be appended.  You can set it and add it to the address by explicitly setting window.location.hash to whatever it needs to be.  That’s all well and good, but it doesn’t seem like that works the same way with browser back/forward buttons as “regular” hash.

I’ve done some preliminary reading and it seems IE back/forward doesn’t generally work well with a hash and there is some talk of hidden iframes to force browsers to register history more fully.  From there on I don’t know much of anything, so this should be an interesting investigation.

“Offers advisory information about the element for which it is set.” – HTML 4

“Offers advisory information. Some Web browsers will display this information as tooltips. Assistive technologies may make this information available to users as additional information about the element.” – XHTML

“Represents advisory information for the element, such as would be appropriate for a tooltip.” – HTML 5

The most common behavior in IE, Firefox, Opera, Chrome, and Safari (for Windows) is for a pale tooltip to appear when the user hovers over the titled element. Rumor has it that screen readers can read the title attribute aloud. Javascript can retreive the text entered into the title attribute and use it elsewhere–on enhanced tooltips, for example.

Sometimes it’s very clear how to use the title attribute…in an abbr (abbreviation) the title should be used to give the full text of the abbreviation. In a dfn (definition) the title should be used to give the definition. But one place it’s not as clear–and, yet, one of the places the title has incredible potential–is in use within forms. Title attributes can be used on a form, fieldset, legend, label, input, textarea, or option (but not on a select).

This has bearing on questions of how to lay out and style a form. For example, if you make use of implicit label association by wrapping an input in its label, hovering over the label or the input will show the title.

Text Input:

<label for="textinput1" title="Information about this text input">Text Input: <input type="text" name="textinput1" id="textinput1" /></label>

This allows you to write one assistive title for a form form field that will appear on the label and the field as well as on any other inline element you place within the label, such as one of those little (i) icons. There are a few advantages to this–it’s cleaner in the markup than creating different or repeating titles for the label and input and I imagine that it might cut down on redundant reading by overly literal screen readers.

However, as my last post mentions, it is somewhat easier to style forms if the input is not wrapped in the label. Getting a consistent label width in a form using label wrapped inputs requires either extraneous spans or CSS gymnastics.

This led me to a question…is it appropriate to title the label and input with the same information? In practice, I believe it is. Would there be benefits to titling each individually, however? The label’s title would define the label in more detail. The input’s title would offer details about what to input.

Text Input:

<label title="Your text input label definition" for="textinput2">Text Input:</label> <input type="text" id="textinput2" name="textinput2" title="Enter numbers and letters here for text input" />

Form markup is complicated to write and read.  The addition of titles make it even more complicated to read.  I am personally dedicated to the use of titles in forms due to the vast potential to increase accessibility and enhance usability with javascript without adding extra meaningless elements.

I have trouble deciding what the best practice would be for adding titles to forms, unfortunately.  I can see arguments for both!

One of the things I’ve been slowly working on lately is taking a close look at forms: best practices, accessibility, styling, etc.

I don’t mean styling form controls–no, I’ve played around with it before and have read enough articles to feel that it’s not only impossible, but undesirable.  Some good reading:

• http://www.456bereastreet.com/archive/200409/styling_form_controls/
• http://www.456bereastreet.com/archive/200410/styling_even_more_form_controls/
• http://www.456bereastreet.com/archive/200701/styling_form_controls_with_css_revisited/
• http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/
• http://www.456bereastreet.com/archive/200705/why_styling_form_controls_with_css_is_problematic/

So, no, I don’t believe form controls should be styled barring very small tweaks that you don’t mind seeing only in a few browsers.

Semantic Forms

What I want to do is get a solid foundation for a simple (and hopefully semantic) form with as robust a stylesheet as I (and geniuses I find through Google) can come up with.  If fancier effects are desired, they can be built up.  But the final result should be suitable for most forms while remaining simple and semantic.

I’ve been using a method where I wrap inputs in labels and set the labels to block–then use classes to create columns, etc.  But it tended to get bloated.  So I thought it might be time to take another look.

The biggest inspiration for the form styling was:

• http://www.websiteoptimization.com/speed/tweak/forms/

That site gave me lots of ideas about how to use and line up labels and what to think about for accessibility and the appearance of forms without the stylesheet.  The author mentioned a few alternatives tried that caused failures in browser testing — so I was able to begin where s/he left off.

Legends

One of the most challenging parts of form design with semantic form elements is styling form legends.  The following resources were helpful there:

• http://beckism.com/2008/12/display_block_legend/
• http://www.tyssendesign.com.au/articles/css/legends-of-style/
• http://www.communitymx.com/blog/index.cfm?newsid=923
• http://www.w3conversions.com/presos/AEA/2_form/form2.htm

My goals

• Use form, fieldset, legend, label, and input/select/textarea and maybe br to build a form — avoiding spans, divisions, lists, and other extraneous markup.
• Use CSS to style the form–making the CSS cross browser without bloating the stylesheet or using hacks.
• Make the form flexible without bloating the HTML — it should not be obscure.
• The markup for checkboxes and radio fields should make sense.
• Make the form accessible.  Ensure it is readable without the stylesheet.  Use accesskeys and associate labels.
• Make the form usable.  Make labels and layout clear.  Provide input hints.  Provide focus styles.
• Provide clear errors both at the top and next to the affected field.  Ensure the error display is consistent both with the first-level javascript and the second-level server side validation.  (Obviously the serverside will vary, but it should be easy to integrate serverside errors).

There is still some tweaking and integration of javascript to go before I call it “finished” — I’ve made some notes in comments about my to-do list, which is:

• Use javascript to create “input hints” inside text inputs–on focus they disappear, on blur they reappear if nothing has been entered.
• Use javascript for first-level validation and error display.
• Adding a few classes to the fieldsets would accomplish several things.  Part of my reduced-code-and-css approach was to also avoid the use of classes.  Once I’ve got a handle on the semi-final product, I may make some different versions that utilize classes to a greater or lesser extent.
• Tweak the form presentation for effective reading without the stylesheet (there are some problems with this atm).
• Test, test, test. 

So here’s the first version…

Some final notes

It doesn’t validate!

Semantics - Looking pretty good!

CSS - To keep the testing code concise, a CSS hack was used–this would be moved to an IE conditional stylesheet in a production version, obviating the need for the validation-breaking hack.

XHTML - I like XHTML, I really do.  Normally I deploy in XHTML transitional.  I validate using XHTML strict normally, if I can, however.  Since this is in testing the strict doctype is used.  But the errors here (if you take a look), well, honestly…I think they’re stupid.  So I will probably ignore them.  I don’t see any reason why an accesskey shouldn’t be used on a select element  if it works in the user agent (though I’ll do some research on it to see if there actually is a good reason).  As for the other errors…sometimes I think the XHTML strict working group was smoking crack.  You must wrap ALL form elements in a fieldset?  Why?  It’s already in a form.  It’s a form field.  *shrug*

Input hints (usability, accessibility)

For input hints (in addition to the preliminary thoughts on plain-text instructions that you can see) I decided the best place to put hints would be in the title attribute on the input.  I don’t know if this is a “new” idea, though I haven’t seen it before.  My thoughts were that, using the title tag, most browsers (even without javascript) will display the hint on hover!

The plain text hints/instructions are very preliminary.

Display without styles (accessibility)

So far, the form is pretty readable without styles.  Using the line break tag preserves the general vertical layout.  Using labels next to inputs preserves the general horizontal layout.  The major wrenches in the display are the plain text input hints (and, upon errors, the errors might case some bad readability).  You can also see the nesting of fieldsets much more clearly without the stylesheets.  That doesn’t bother me, overall–fieldsets can be nested and the meaning of a fieldset  — “a set of associated fields” is respected by the markup.

Semantic markup (best practices, accessibility)

Eventually in a form, you pretty much have to use non-form elements.  For additional instructions, to fix a layout quirk, etc.  I wanted to keep it as simple as possible.  But instructions, plain text code hints, errors, and legends required p, span, and div (I used as seemed appropriate).  Only legends that need extra styling need to use spans, though, so you will see it’s only used in a couple of places.  I’m also still working on plain text instructions and even the errors will probably go through some additional tweaking.

• Windows XP
• Apache 2
• PHP 5

This means, obviously, I don’t compile anything.  Personally I like to install PHP with the Windows binary and then download the full zip package as well.  After I’ve installed I unzip and copy and paste all the libraries/DLLs I don’t have from the zip to my installation directory.  (I just overwrite all the extensions…I’m little more choosy with the DLLs that are in the PHP root folder.  Normally the zip contains more libraries than the PHP installer provides and this helps ensure I’m not “missing” files.)  After that I attend to customizing php.ini (and, of course, Apache).

Using the cURL library with PHP 4 was as simple as uncommenting extension=php_curl.dll in php.ini (as I recall).  But with PHP 5 I was getting the following startup error:

Unable to load dynamic library php_curl.dll – The specified module could not be found

But it was there…and I was looking right at it — the exact path was the one the error claimed did not exist.  And my other extensions in that directory were working.

If you are using Windows, Apache, and PHP 5 and can’t get cURL to work/cURL to load even though it seems like it should, check that these two files:

• libeay32.dll
• ssleay32.dll

Are located C:\Windows\System32

You can get those from the aforementioned zip.  I dunno why, I just know it worked.

Yes, we all make mistakes.  Mine was mistakenly thinking that the HTML name attribute was deprecated for all elements, including form elements.  In actuality, though XHTML deprecates the name attribute on anchor tags and the form itself, the name attribute is an integral part of XHTML forms — as much as HTML forms.

Here was where I got lost in illogic.  In order to create a set of related radio inputs or checkbox inputs in a form, you give all those inputs an identical name.  For a radio, this will cause the average browser to enforce the only-select-one rule.  Since I had mistakenly assumed that name was deprecated, I would use both id and name on a form input and give them all the same token, like “favorite_food” (or whatever).

Obviously this is wrong.  I swear I did know that id was supposed to be unique–really, I did–I just thought that a form would have to be an exception with id replacing name someday (which is not happening).  But it wasn’t that big a deal until a bug showed up in Firefox, making it pretty much impossible to successfully use an input if its id was duplicated elsewhere.

I wrote up a big ol’ document about it.  Probably more than it deserves, but I guess I was bored.  Check out HTML / XHTML Forms: Using ID and NAME.

I’ve been doing some brainstorming and reviewing old techniques for image replacement. This file just shows some preliminary experimentation with CSS image replacement.

http://www.virtualrevolution.net/fbin/ir/content_test.html

My criteria for truly successful image replacement is:

- Functions with CSS + images
- Functions with CSS and no images
- Functions for screen readers (to the best of my knowledge)
- Functions with no CSS and no images
- Does not require any extra tags (though I will insert a span tag or an img tag failing to achieve all of the former).

<address class="vcard">
	<img src=" width=" height=" alt=" class="photo" />

	<h6 class="fn">
	Rachael L. Moore
	</h6>

	<a href="http://www.virtualrevolution.net/" class="org url" rel="me">
	Virtual Revolution
	</a>

	<div class="adr">
		<span class="type">postal</a>
		<span class="street-address">1532 Chadwick way</span>
		<span class="locality">Tallahassee</span>,
		<span class="region">Florida</span>
		<span class="postal-code">32312</span>
		<span class="country-name">United States</span>
	</div>
	<div class="tel">
		<span class="type">Cell</span>
		<span class="value">+1.850.445.6859</span>
	</div>

</address>

• Make use of microformats such a hCard, rel-license, and rel-tag: http://microformats.org/
  Tagging (Has some flexible SEO applications and is foundation for navigation and searching)
• Facelift with graceful degradation?  http://www.mikeindustries.com/sifr, http://www.swfir.com/
• Make use of some format, either hResume or XML Resume Library for resumes
• Make use of RDF site maps in addition to search engine sitemaps.
• Choose an online store platform to create an online store
• XFN + links page to make more use of social networking sites