Blog

I’m a big fan of Microformats. Essentially, they’re all about adding extra data to your data, making it more discoverable and useful. They’re easy to use too: you just add classes to your existing (X)HTML in the prescribed manner. The address information in footer of this site is marked up in hCard format, for example.

I write occasional restaurant reviews on a group blog with friends: Salty Cracker club. We score each restaurant out of ten on a few categories: Atmosphere, Staff, Service, Food, Wine, Value for money.

I wanted to started marking these up as hReviews for better data richness and search engine listings, so I went searching in the WordPress Plugin repository. I didn’t find anything that quite matched my requirements, so I decided to write one myself.

Flexible hReview allows you to write multi-dimensional reviews attached to a Post, then display the review wherever you like using a php function, or a WordPress shortcode.

While testing the plugin with Google’s Rich Snippets Testing Tool (more on Reviews specifically) I discovered that only the first rating category (in Salty Cracker’s case, Atmosphere, not necessarily representative of the review as a whole) was picked up and used. To provide a more representative rating, I added an option in the plugin to automatically generate an overall score, and add that as the first rating. An example: using a search string mr chan cape town review shows the following at the bottom of the first page of results (at the time of writing):

Our 10-scale rating is converted to a standard 5, and is displayed as stars, giving a quick visual guide to the score.

The Flexible hReview plugin can be downloaded via the Plugins menu of the WordPress dashboard, or from either of the links below.
Download Flexible hReview from WordPress.org.
Download or Fork Flexible hReview from GitHub.

There’s been a lot of buzz around an article by Jakob Nielsen: Mobile Site vs. Full Site. .net mag has a good packet of articles:

• Nielsen is wrong on mobile by Josh Clark;
• Designers respond to Nielsen on mobile;
• Nielsen responds to mobile criticism.

The gist of the replies / rebuttals are that Nielsen seems to be stuck in the old way of thinking, and isn’t embracing what is becoming the reality for web development today: the massive number of different devices being used to access the web means applying a robust, Progressive Enhancement-driven, Responsive approach is the way forward. It doesn’t make sense to assume user intent from device context, to give mobile (or tablet, or other) users less content, or to provide separate sites at separate URLs.

Related: Browser screen resolution stats rile devs.
These screen resolution trends are nice to look at for historical reference, but that’s about it. The relation between screen resolution, browser viewport, and physical size of the screen is becoming increasingly complicated. Smartphones have physically small screens, but often have a high resolution. TVs have physically huge screens, but can have resolutions of 1920×1080: the same as many laptops.

This line of work is getting more complicated and difficult; but more interesting because of it!

The most recent issue of A List Apart has two excellent, must read, articles:
The Best Browser is the One You Have with You by Stephanie Rieger;
For a Future-Friendly Web by Brad Frost.

A word of warning, though: set aside at least half an hour for these. Good stuff, worth digesting, including the many, many, links contained therein.

There are plenty of posts doing the rounds talking about Responsive Web Design in the bigger picture sense: workflow, tools, and so on. (I find Mark Boulton particularly eloquent on the subject: always a pleasure to read!).

Two posts that really caught my eye were more focused, though:
responsive navigation patterns by Brad Frost from a few days ago (a well thought out, well written, round up of responsive navigation patterns, with pros and cons for each.);
A Responsive Design Approach for Navigation, Part 1 by Filament Group from yesterday (a step by step guide to setting up a solid, progressively enhanced, responsive navigation).

Personally, I’m tending towards using a select for smaller screens: hooking into the native UI seems like a good thing. This could mean using JavaScript (something like Filament Group’s cunning testfit in their example above) to switch the select out for a ul for larger screens.
Relying on JavaScript for anything that basic makes me uncomfortable, though, even when it’s done progressively. I’ve been wondering about putting in both select and the ul as a starting point. (Loading extra stuff is bad, yes, but these would be tiny text snippets.) Then, using media queries or some cunning RESS action (see also Dave Olsen’s excellent article) to pluck out or hide the one that’s not needed.

Filing this under: Must Think More About It.