The hReview format on Yahoo! Tech

Yahoo! Tech launched with basic support for the hReview microformat. Initially, I had no way of testing the output and didn’t realize our limited output. Tails, a Firefox extension, has helped me fine-tune the hReviews. However, Yahoo! Tech still has an outstanding bug with these reviews.

microformats logo
Due to the modular construction of this page,  I am not able to get the product name into the hReview. Dan Cederholm’s post about using the object include microformat pattern may actually solve this issue.

The include pattern lets you define the product or person’s identity earlier in the page and then reference it in individual reviews or blog posts with an object tag. Unfortunately, Safari and Internet Explorer do not behave properly when the object element appears multiple times. An updated version of the pattern uses the link tag instead.

Link-based Object Pattern

Before you get to your reviews, define the product or person with the microformat classes item and fn. Item defines the nature of the content and fn tells us the content is the formatted name of the item. You’ll also need to add a unique id.

Product Name

In your hReview, you need to reference this product by its id.

Unfortunately, a screen reader will announce this as a link. We have a special class, microformatdetail, to hide microformat details that are not part of the visual design. This is a convenient way to add some background information to your hReview, hCard, and hCalendar elements.

.microformatdetail {display:none; /*content for microformat parsing only */}

The final Yahoo! Tech hReview microformat

Let’s look at the code for a digital camera product page. We’ll first define the product name in the top module and then present the reviews later on the page.

Add the product name at the top of the page

Olympus CAMEDIA C-5500 Sport Zoom Digital Camera

Create an individual review

Note: the new link is at the end of the metadetails paragraph

good camera

By John Doe - See all John Doe's reviews - 02/09/06

  • Overall: 5/5
  • Features: 5/5
  • Quality: 5/5
  • Support: 5/5
  • Value: 5/5
Pros:
great camera
Cons:
blurry when flash is off

I got it for 170 $ it us a great camera, I have loved it great pictures great features and a great value i would recomend it to any one

How is the hReview actually used?

We are still working on this final element of hReviews on our product pages. Once it is live, we should begin seeing the benefits. Technorati is the first search engine to begin scraping microformatted information. When hReviews become more prevalent, more search engines and sites will consolidate products with their reviews from around the web. This will give users much more flexibility with shopping decisions.

Resources

Background image for visited links

Visited and unvisited screenshots on designmeltdown.com
I’ve been a recent convert to Design Meltdown. The site disects a visual theme and gives examples on how to use them and where they are being used. While exploring the latest post about sketches for the web, I noticed an interesting approach to the visited pages.

The Breakdown

The site has a series of floated divs to display the screenshots. The screenshot is applied as the background image of the div with an inline style. Inside the div is a link that is given display:block and a transparent background image.

Great idea – room for improvement?

While I think the visual design for these screenshots is well thought-out. I don’t like the underlying code. The screenshots are content; miniature representations of other sites. Adding them to the CSS is treating them as decorative elements. The text for each link is: “SCREENSHOT, ” making the page unusable with the styles disabled. To give this page more structure and semantic strength, I would modify the underlying code as such:

HTML Code

CSS Code


.screenshotlist {float:left; list-style-type:none;}
.screenshotlist li {float:left; margin:9px; }
.screenshotlist a {display:block; width:146px; height:130px; position:relative; }
.screenshotlist a strong {text-indent:-1000em; z-index:20; position: absolute; top:0; left:0; width:100%; height:100%; background:url(screenshot.png) no-repeat -154px 0; }
.screenshotlist a:visited strong {background-position:0 0;}
.screenshotlist a img {margin:5px 0 0 5px; border:none; z-index:1;}

Benefits of the new code

screenshot mask
The screenshots now have some structure; an unordered list with links full of good, crunchy content. Screenreaders and those without CSS will have access to the information. Javascript can be used to target links within the screenshotthumb div to open a new window without the need of inline scripting.

Cavaets: I haven’t tested this code yet. It’s very possible the z-index styles are not required. As an alternative, remove the margin on the image and replace it with a border. Add a rule to change the border color on hover and visited.

Design Meltdown is a great site for learning about design concepts. I’ve gleaned a number of nice ideas from them and would love to say I gave a bit of help back to them.