As I was redesigning a bit lately and making use of FamFamFam’s very nice Silk icon set (used under the CC Attribution License) and it occurred to me I could use CSS2.1 Attribute Selectors to show the relationships the XFN defines.

If you’re not familiar with XFN this wikipedia article gives a good introduction.

In the WordPress blogroll you get the option to add XFN relationships to the people/links, as I’ve been on a bit of a microformats kick i’ve been thinking how I can make better use

The XHTML

<ul>
<li><a rel="friend met neighbor" xhref="http://www.simoncoltman.net/">Simon Coltman</a></li>
<li><a rel="friend met" xhref="http://fberriman.com/">Frances Berriman</a></li>
<li><a rel="acquaintance" xhref="http://moglenstar.net/">Max Glenister</a></li>
<li><a rel="friend met co-worker" xhref="http://www.ricardocabello.com">Ricardo Cabello</a></li>
<li><a rel="friend met" xhref="http://www.krisswatt.co.uk">Kriss Watt</a></li>
</ul>

The CSS

ul.xfn_example a {
background-image: url(/images/icons/user_gray.gif);
}

ul.xfn_example a[rel*="acquaintance“] {
background-image: url(/images/icons/user_blue.gif);
}

ul.xfn_example a[rel*="friend“] {
background-image: url(/images/icons/user_green.gif);
}

ul.xfn_example a[rel*="co-worker“] {
background-image: url(/images/icons/user_suit.gif);
}

Browser Difficulties

Attribute selectors are not supported in IE6 so the first rule sets the background all links, if the other more complicated rules aren’t understood then the icon stays a default grey. For the browser that do understand the more complex rules, assigning icons for some of the different relationship types.

They’re ordered so that, for example co-worker will override friend, should the XFN define both of these relationships. I’ve not done it here but if you wanted to you could chain the selectors and create a specific rule (and image) for someone who is a friend and a co-worker a[rel*="friend“][rel*="co-worker“]

With the announcement that IE7 will be supporting, amongst other things, attribute selectors I can imagine them being used a lot more as IE7 adoption increases and progressive enhancements like this becoming more common.

Design Flaws

The different icons don’t do a great job of communicating the different relationships, but maybe more specific icons would help, or on a larger list maybe a key might help?

Conclusions

This isn’t a particularly complicated idea but i’ve had a couple of people ask me about it, so I thought I’d give a brief explanation and maybe encourage people to take the idea further and make something cooler.

We’ve already got some art up on the walls in our dev room at work, but two walls were boring and mostly white.

I decided to take some inspiration from one of my old Uni house-mates, Mark, who happens to be a great pixel-artist.

A while back Mark got bored and made something very neat out of a lot of coloured paper and geekyness. “This will look awesome on a big wall” we all agreed.

So we got started…

Time for an Art-Attack

Follow closely and you can recreate your own life size Pixel Art Space Invaders at home!

We got a rainbow pack of 3×3” sheets – from staples, or Rymans, or some stationary shop – for a pound or two

We cut down the largish squares of paper in to quarters with a scalpel/metal ruler.

Then mocked up a ship on the desk.

We used copious amounts of blu-tac. You might want to use white-tac as the blue showed through a little bit on the lighter colours.

You also want 3 or 4 people standing and watching whoever is putting the squares up to constantly tell them “It’s not quite straight!“

This one was a bit difficult to make as the scale version compared to the normal ships is quite a lot bigger – which looked weird on the wall – so we had to shrink it down a bit.

Extra points for the mother ship – shoot where it’s going to be.

The final result. Not bad considering it was all done rather spontaneously over lunch one day.

More Pixels and Space Invaders

There’s been loads of other great pixel/paper art, most of which blows what we did out of the water, but these ones are absolutely amazing and definately deserve a look if you haven’t seen them before.

• Mosaic-tiled Space Invaders all over the world – I love this one in Covent Garden.
• Donkey Kong over 4 floors at the University of California.
• Celebrating the 10th anniversary of Mac Office with 1300 Post-it notes.

Out of the three new ALA articles the one that really caught my eye was Ruining User Experience by Aaron Gustafson.

It describes how a site should be built upon a solid base, and then gradual layers of enhancement (Images, CSS, Flash, Ajax) applied to create as good an expirience as is possible for that user.

On the web, we don’t know anything about the person coming to our website. We don’t know what browser she is using. We don’t know if she is hitting our site from her cell phone. We don’t know if she prefers using her keyboard over her mouse. We don’t know if JavaScript (or even CSS) is enabled in the device she is using. We don’t know if she wants to print the page. We don’t know if she is using a screen reader. We really don’t know anything.

It used to be the case that screen resolution and IE or NS where the main factors, now there’s so many more options that need to accounted for. And if you want to provide a good user experience for more than the majority, you need to make the effort and do things right from the ground up.

At work we’ve done our best to work with progressive enhancement techniques, but it’s often difficult explaning to clients and even designers how and why this is important.

In a commercial situation progressive enhancement is a tricky beast, it doesn’t fit well with how many web design agencies work. There are few practices (thatI know of) to help with this challenge.

I hope this article will go some way towards improving peoples understanding of the situation.

Aaron has managed to sum up my philosophy towards web design much more succinctly and clearly than I have been able to.

So I urge you to read this article, I know i’ll be telling friends and collegues to do the same.