The Tour of the North website.

Prep

The planned route was a 5-day zig-zag from Lancaster to Scarborough, taking in the finest riding available.

Before heading north I encouraged all but the least tech member of our 4-man team to get on Twitter and get their heads around hashtags and geo-located tweets. Three of us, thankfully, had iPhones, which made this pretty easy.

Navigation

Tom was in charge of navigation: in addition to route maps, he brought with him the GPS Motion-X app for iPhone, which records detailed route data including distance, time, speed, and 3-dimensional coordinates (with elevation).

After each day’s leg was completed, Tom emailed the KML route data to all of us to ensure everything was backed up.

Website

The Tour of the North microsite has two components:

• a page built out from my existing blog at http://www.legsfeelingnopressure.com/the-tour-of-the-north/
• a dedicated map page with geolocated photos and tweets at http://www.legsfeelingnopressure.com/totn-map

The blog page features some neat CSS3 transitions, scrolling elevation charts and a lightbox to display the Flickr images. The trickiest element by far was processing the KML data to display accurately on the maps, and then using the Flickr and Twitter APIs to add photos and tweets to the dedicated map page.

Mapping the ride: a Google Map with plotted KML routes, Flickr photos and tweets.

Mapping

Creating the maps involved various stages:

• Cleaning up the Motion-X KML data – Motion-X adds quite a lot of extraneous cruft to its exported KML route files, including Motion-X logos and route data that is loaded into Google Maps info windows by default.
• Repairing KML files where necessary – we suffered a technical malfunction on day 2, which resulted in a gap in the coordinates (it loos like we teleported). I had to populate the KML with dummy coordinates.
• Hosting KML files on Amazon S3 – so they load super-fast.
• Programming the Google Maps API to plot the KML overlays onto the maps.

Twitter & Flickr APIs

I downloaded each tweeter’s JSON for the 5 days of riding and combined them into a single .json file to reduce file size and speed up the rendering of the markers onto the map.

// get a combined stream of tweets, downloaded from Twitter immediately after the trip
	$.getJSON('js/combined.json', function(data) {
		for (index in data) addTweetMarker(data[index]);
	});

Because the main map needs to access more than 20 tagged photos from Flickr, I had to use the Flickr API with a key (check the source code). Also, of course, any photos uploaded to Flickr from a standard camera without geodata had to be manually added to Flickr’s (not very detailed) maps – harder than it sounds when you’re talking about a hillside in the Dales.

Elevation charts

I stumbled across a really awesome online tool called GPS Visualiser which converts .gps and .kml files into all kinds of things, including profile graphics.

Future developments

• Swap out the Daytum iframes for some javascript graphs using Flot or Sparklines.
• Fix the map so that the Flickr info windows display the photo author and link to the original on Flickr.
• Go on another, similar trip and set all this up in advance with live tweets and route-plotting.

The starting point was a visual identity for the blog. Legs Feeling No Pressure isn’t a brand as such – it’s just a slightly cryptic statement about what I get out of cycling – but as a name it needed a design that somehow communicated more than the name itself could do.

David Hardy, who is our LCF graphic designer and similarly a bike-nut (he’s into scooters), agreed to help me out, and we started knocking around some ideas. In a nutshell, here was my brief:

• bold, sans-serif typeface (although I do like some serifs used in the bike world’s, notably Rapha’s)
• no need to include cycling-related imagery like wheels (old hat)
• maybe a colour
• I like fancy Italian bikes but I also ride around town on a filthy hack (style vs grittiness?)

David got his head down, and a few thousand furious mouse-clicks later he supplied a suite of 18 draft logos.

Logo design drafts #1 sheet 1

Logo design drafts #1 sheet 2

Logo design drafts #1 sheet 3

I emailed the designs around a few friends to see what they thought. Perhaps predictably, this wasn’t a very useful step in deciding on an initial direction; some preferred N (the C-shaped design on sheet 2), but equally, others liked the tag styles, and quite a few actually liked the distressed font (B on sheet 1, which I instantly dismissed).

At this point we rejected a few, and moved forward with some others, exploring further the tag style as well as adding in a cheeky wrench-head / Pacman design (N, below):

Logo design drafts #2

Personally, I was leaning more towards version I – a rounded, surfy, retro tag with a mixture of bold sans-serif and ‘classic’ serif that I thought echoed the masterful pairing of typefaces in the Rapha Condor logo. However, as so often happens with logo design, hours of close examination had made the words ‘Legs Feeling No Pressure’  themselves practically incomprehensible as a phrase. We needed some distance.

A couple of days later we arrived at a final three:

Draft #3 option 1

Draft #3 option 2

Draft #3 option 3

It was David who swayed me towards option 1: he reasoned that a) I took cycling quite seriously, so I ought to have a solid, bold logo, instead of a tag more at home on a pair of board shorts; and b) that the crisp edges of option 1 would look better in a blog header anyway.

The next question was that of colour. David prepared a fourth suite of options, which introduced a red element, and also offered some variations on the solid serif, just to make absolutely sure we had the right one:

Draft #4 sheet 1

Draft #4 sheet 2

One final touch was the addition of the tagline ‘What I think about when I think about cycling’, which I borrowed from Haruki Murakami’s book What I Talk About When I Talk About Running. Now I could see that our original bold serif was still working really well, and that it was now perfectly finished by the red ‘No’, with the patterned gradient within it suggesting all kinds of training-related things like hills, heart rate, and precision.

We had it – the finished logo:

The finished logo, including tagline.

London Phoenix home page

The visual design is really bold and striking, the blog is packed with content, it’s got an embedded Google calendar with events up to May ’09, a forum – is there a better bike club website in the UK?

• More on the bike blog.

I’ve been pointed towards Bikeoff a couple of times now. ‘An initiative of the Design Against Crime Research Centre’, and based at Central Saint Martins College of Art and Design, it’s a laudable venture, and I’m looking forward to reading into it in much more detail. Bikeoff TV in particular looks like a nice Google maps / Flash video project.

However, at least superficially, I really do have to slate the design – especially given the extensive list of design personnel listed on the about page. Here’s what I think’s wrong:

• Table-based design – in this day and age there really is NO reason to be laying out a website using tables. Tables are for tabular data. End of story. 
• The bubbles around the chunks of content does work alongside the colour-coding to make it easier to separate bits of information – but it still feels cluttered.
• As used (in)famously and stubbornly by Jakob Nielsen, that hyperlink blue is the blue that browsers colour link text by default. In this case, Bikeoff just hasn’t got round to styling its links in the CSS. It looks pretty bad.

The bike race is the scene for a wild culture clash: the calm, pale-skinned Japanese battling extreme heat, potholes and herds of farm animals on the rural roads of West Africa. Director Giovanni Giommi cuts back and forth between French-speaking Burkina Faso and the cyclists’ home towns in Japan, drawing out the riders’ hopes and dreams one minute, the next returning to the race, and the lives of the ordinary Burkinabé drawn into the race as spectators, drivers, commentators or soigneurs.

Prior to the main screening, the organisers presented Natali Fabrizio’s short ‘Pantani e “Le Tour de France”‘, a trippy but totally awesome 9 minutes that cut flickery motorbike-cam video of Marco Pantani racing against Indurain in the 1994 Tour, to a pounding house soundtrack. I felt compelled to follow this up with a late-night glut of Pantani vids on YouTube.

Update 8/10/08:

On Sunday afternoon I returned to BFF08 to catch a bonus screening of Road to Roubaix, directed by David Deal and David Cooper. The film is a documentary about the Paris-Roubaix one-day road race, that has taken place every April since 1896 on the cobbled roads of northern France and Belgium.

The opening minutes were a real buzz – lots of gritty black and white footage of tough guys riding through clouds of mud and dust, the whites of their eyes standing out from faces caked in dirt and sweat. An early highlight was the interview with Lance Armstrong, who described the 200km route – the Queen of the Classics, which he has famously never entered – as ‘insane’.

However the 75 minutes included too many talking heads offering similar viewpoints. An hour in, we pretty much got the message that the race was hard. Road to Roubaix was less successful where I hear (not having seen it) that Jørgen Leth’s 1977 documentary A Sunday in Hell was in a class of its own: namely, in offering an up-close analysis of the actual riding of the race, the changing fortunes, the bursts of speed, the grappling for position, the sheer, brutal Darwinism of the event.

  

Wiggle package arrives. Cue oohs and aahs around the office.

The package looks empty, but wait...

The true scandal revealed.

Four replacement Campagnolo Veloce brake blocks in a box that could have contained 400 of them. Run out of Jiffy bags Wiggle?

I’ve been trying to keep abreast of the Tour de France since it started on July 5th. Considering it’s the world’s biggest (and best – bike bias acknowledged) annual sporting event, TV coverage is woeful: a 1-hour slot on ITV 4 every evening. But – wait a second – how convenient! You can catch up online on itv.com!

Here are a couple of screen grabs that sum up my experience of watching the Tour on itv.com:

Great!

Just great.

Over the past week of viewing on a Mac (which is supported) in 2 different locations (thus ruling out bandwidth or bad internet connection as possible faults) I’ve encountered a grim catalogue of errors:

• player hangs or freezes during playback
• selected video doesn’t play on request (this is not about buffering, I know what buffering is)
• videos are ‘not available’ for some unexplained reason
• the selection of Tour videos goes from e.g. 7 (we’re currently on Stage 9) to 2, and now at time of writing, 3 – again with no explanation 

Not to mention incomprehensible error messages, bad player controls and navigation, and having to watch the same advertisement up to 8 times in an hour of playback. And what’s with Silverlight by the way? Having to download and install it before viewing is like some nightmare flashback to Real Player days.

The Tour de France videos must be among the most popular programmes on ITV Catch Up at present. If it was any good, this would be an effective way to promote this service to viewers who perhaps wouldn’t normally use it (from the looks of it most visitors are catching up on Corrie). But it isn’t any good, it’s awful.

Hey ITV! Spend some money and sort it out!

For anyone hunting for a decent way to watch Le Tour online, try www.letour.fr. Here’s a decent video service with daily short clips summarising the day’s action, albeit without Phil Liggett. This content is re-purposed by a number of other news sites (like this one, which plays back using Jeroen Wijering’s very excellent and now ubiquitous FLV Player).

Condor Cycles, the iconic London bike builder, race team and brand name, had a ‘coming soon’ holding page on its site for most of 2007 – for so long, in fact, that I almost got in touch to offer my services. But I just checked back, and they’ve relaunched!

Here are some of the things wrong with the site:

• Sloppy code: the visual elements of the site rely on Flash, and there’s no text content, or keyword or description metadata, so it’s no surprise the site doesn’t show up on the first page of Google for a search for ‘london bike shop’.
• Dodgy user interface: I know what they were trying to do with the ‘virtual catalogue’, but the Flash page turner tool is fiddly to use and doesn’t encourage browsing, even if there are additional buttons for ‘next page’ and ‘previous page’ on certain screens. What happens if I want to download an image of one of the bikes or email to a friend? I can’t. 
• The ‘store opening hours’ page opens in a new window. A minor point, arguably, but the issue that prompted this post. Here’s why you shouldn’t do this on a single domain – or indeed ever.

So why use Flash, really? Can it be easy for Condor staff to update details in their catalogue? No – there’s no product database feeding into the site. In 2009 when their new bikes are launched, they’ll have to start over.

What Condor needs, to do justice to their excellent store, solid reputation and superb bikes, is:

• A clear, accessible site designed in standards-compliant HTML and CSS, to boost its search engine rankings and improve navigability.
• A better catalogue system that displays pages to the browser transparently, with unique URLs per product, and which the store staff can update easily.

‘I used to think I could put up with the Underground. It was only when I stopped using it that I realised how life-shortening it is… It wasn’t just the service… It was the crowds, the heat, the filthy air, the endless moronic announcements, the kids playing music on their mobile phones, the pushing and shoving, all of which delivered me to my destination in a low-level bad temper.’

‘Part of cycling’s appeal for me is that it is a last outpost of freedom in an authoritarian, CCTV city, essentially uncontrolled by anyone except the cyclist.

Happy biking AG.

Wilier Mortirolo Veloce 2007

The above is a new arrival to the strangerpixel cycle stable. Sweet, awesome – these don’t cover it. Compared to my Scott Expert (01?), this bike is like a rocket: quick, flickable, stiff under pressure, compliant over rough surfaces, sure on the descents. Classy. It turns heads.

When I test rode the Wilier about a fortnight ago, the unexpected feeling of power and speed on a climb were better than a year’s supply of Floyd Landis’s testosterone patches. It was so exciting I nearly burst a lung firing up Rosslyn Hill.

I pondered the Wilier’s rivals: efficient German engineering in the shape of the Focus Cayo on the one hand, on the other the undeniable quality of the US bike giant Trek. But I came back, remembering that first acceleration.