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.

Posting content on WordPress is almost too easy. You paste text into a box and click publish, and your post is instantly pushed to your thousands of Twitter followers. Then you check the published post and find a grammatical war-zone…

Being an unashamed stickler for textual accuracy, I’ve put in place a system to catch occasional lapses by my team of WordPress content editors at LCF. Here’s how it works.

Step 1: Status notifications

Download and install the WP Status Notifier plugin. This plugin is in charge of sending emails to and from contributors and a specified approver when the status of a piece of content changes. The settings screen (Settings > Status Notifications) should look like this (fill in your admin email address of course):

WP Status Notifier settings panel.

Step 2: Roles and Capabilities

First of all, read up on the Roles and Capabilities documentation in the WordPress Codex. Next, install the Capability Manager plugin. You now have to configure the plugin to ensure that all those users whose posts you want to moderate are prevented from doing so automatically. Go to Users > Capabilities.

Most of my contributors are in fact WordPress ‘editors’ – and by default they can publish posts and pages. Therefore we need to uncheck these capabilities from the editor capabilities table.

Managing roles and capabilities in WordPress.

I would recommend installing the Roles and Capabilities plugin in any case – it’s often useful to strip out options and menus where they’re not needed, or to give certain capabilities to a user you don’t necessarily want to make an admin.

Step 3: Moderate and go

Provided you’ve configured your users’ capabilities correctly, you should now receive an email whenever a post is ready for approval. This will happen the first time a user clicks ‘Save’ (be wary here about jumping in to approve instantly – the user might still be editing the content). Once you’ve had a chance to check the content and click Publish, the author will receive a confirmation email.

There are a profusion of (often very full-featured and cool) WordPress plugins out there providing geolocation or geotagging functionality. However, none of them really fit my purposes for any or all of the following reasons:

• they use geolocation data from the blogger who is writing the post, as opposed to manually-entered coordinates.
• they are focussed on providing mapping within WordPress, as opposed to generating a feed for use externally.
• they added unnecessary calls to Google or Yahoo scripts in wp_head().
• they used out-of-date versions of the Google Maps API.

gPress is currently the most promising-looking complete package for mapping in WordPress, and it apparently offers geoRSS functionality, although I haven’t checked it out yet. However, I simply wanted to provide a geoRSS feed without any additional baggage, besides wanting to build the nuts and bolts myself.

Generating a new feed

In functions.php, add the following:

add_action('init', 'my_maps_init');

function my_maps_init() {
    add_feed('georss','my_georss_feed');
}

function my_georss_feed() {
    load_template( TEMPLATEPATH . '/feed-georss.php' );
}

Now you can create your new feed-georss.php template. I based my code on the output from Flickr’s geoRSS feed, as used in this example. It contains latitude and longitude coordinates from two new custom fields set up in the post itself. Note the special RSS template tags e.g. the_title_rss() that strip out tags and convert characters to present the raw data via RSS.

Assuming you have some posts ready with geo-coordinates in custom fields, you can test the feed output at:

http://www.yourblog.com/?feed=georss

If you are only adding coordinates to posts in certain categories you can also use e.g.:

http://www.yourblog.com/category/maps/?feed=georss

Google Maps

Assuming your feed is working correctly, you can now get your geotagged posts to show up on a Google map using a KML Layer. You’ll need to read up on the documentation first, but for reference here’s the relevant snippet of my code:

var kmlLayerOptions = {
	map: map,
	preserveViewport: true,
	suppressInfoWindows: true
}

var georssLayer = new google.maps.KmlLayer('http://blogs.fashion.arts.ac.uk/snapshot/category/international/?feed=georss', kmlLayerOptions);

google.maps.event.addListener(georssLayer, 'click', function(kmlEvent) {
	showKmlWindow(kmlEvent, georssLayer);
});

function showKmlWindow(e, layer) {
	infoWindow.close();
	infoWindow.setPosition(e.latLng);
	infoWindow.open(map);
	infoWindow.setContent('<h3>' + e.featureData.name + '</h3>' + e.featureData.description);
}

Note that, in order to manipulate the infoWindow content when each marker is clicked, you have to suppress the infoWindows that open automatically. You then catch the kmlEvent generated on click, and then do what you will with the KmlFeatureData object.

• View London College of Fashion activity map

Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: true,
    onReady: function() {
		Showtime.MasterPanel = new Showtime.MasterPanel();
    }
});

To show a tablet startup screen for the first few seconds after clicking the button on your home screen, you need to do 2 things:

1. Create a portrait-orientation .png with dimensions 768px x 1004px. It only works in portrait – so far.
2. Put it in your web root folder (putting it in any other folder doesn’t seem to work).

You can use absolute URLs, but for some reason I had problems trying to use relative URLs like ‘../img/touch/tablet_startup.png’. You can also name the file whatever you like, and it still works.

Why upgrade the CSS?

Some background: the LCF website was redesigned in 2007 as part of the University of the Arts London family of websites. The original designers implemented some generic styles used by all College sites, as well as styles particular to each College (including colour-coding). Since 2007 the stylesheets have been copied, tweaked, added to and duplicated without any version control or system of documenting changes (beyond occasional comments in the files themselves).

The system that I’ve inherited has quite a few flaws:

• Too many CSS files – I counted nine – meaning unnecessary HTTP requests
• Bloated files with unnecessary rules – about 3,000 lines of code in total, including a blog stylesheet
• Verbose, inefficient CSS selectors (I’ve learned some new tricks to do with efficiently rendering CSS recently)
• No style rules for basic semantic elements like <blockquote> and <small>

Speed and inefficiency weren’t the only reasons for improving our CSS; the site – with the exception of our WordPress blog – has a static front end anyway, so it’s already pretty fast. Making these changes were also motivated by wanting to put new skills into practice, taking ownership of the CSS, and generally setting the LCF house in order in time for the new CMS implementation.

As anyone skilled in CSS knows, writing good CSS is all about refinement and cleanness. It’s about writing one line instead of two. If you care about CSS, you shouldn’t be able live with shoddy, inaccurate code.

Step 1: HTML5 Reset

It made sense to start with the basics, and to implement a future-proof reset stylesheet that not only addressed gaps in the current CSS but also catered for all the new HTML elements we’re sure to be using sooner or later.

Lots of work has been done in this area but Rich Clark‘s HTML5 Doctor reset stylesheet appeared to be the industry standard.

Resetting base styles in this way meant I could do an initial pass of the existing CSS, removing all those instances of border: 0; and margin: 0; etc.

Step 2: Reduce and refine

The existing CSS had a file called type.css. It had about 60 lines, but incorporated a dozen rules for selectors that were not used at all, anywhere on our website. So anything useful in type.css was rolled into my core stylesheet, html.css.

I found lots of dead wood in the biggest stylesheet, custom.css. This kind of selector mayhem:

#main-content #content-col #inner-right h3.wide span

was everywhere. To focus on this example alone, I discovered that nowhere on our site is there an occurence of #content-col outside of a containing #main-content block – so there was no need for a parent selector. Similarly, there’s no need for this:

#main-content #content-col h1

if there’s only ever one instance of <h1> on the page. Again:

div#breadcrumb-trail

- the div here is an over-qualification, since the ‘breadcrumb-trail’ id is only ever applied to a div, and only makes the rule less efficient (thanks again Chris Coyier).

There were all kinds of elements in the old HTML files that have become part of the furniture over the last 3 years, but which probably should never have been there in the first place. For example, the designers must at some point have decided to add a colour-coded class to the <body> element, but they never made it college-specific. So each of the hundreds of HTML pages on the University website has:

<body class="blue">

The class ‘blue’ has no style rules, so it’s just useless cruft.

Step 3: styling for Internet Explorer

Following Paul Irish’s guidelines for feeding modified style rules to different versions of IE, I set up a basic conditional statement to detect for everybody’s favourite browser, adding a class to the element:

<!--[if IE ]><html class="ie" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><![endif]-->
<!--[if !IE]><!--><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><!--<![endif]-->

I didn’t expect there to be too many special rules, but at least this gave me a valid method of specifying rules without fetching a separate file from the server.

Step 4: rediscovering the lost grid

The LCF site is built around a grid. Not one of today’s nice modern 960 grids, but a custom-built one with the following spec:

• 16 columns
• 982px wide
• 51px grid squares
• 9px gutters on the right-hand side of each column (as opposed to 4.5px on each side like most grids. This means that the far-right column has to have its margin removed so as not to overspill)
• a 30px left-hand margin on the main container element, to prevent the content resting flush against the left-hand edge of the viewport

The original grid existed only as a PSD file buried deep in a shared drive. However, using it and the column widths in the existing CSS, I was able to modify Nathan Smith’s 16-column grid stylesheet to fit the UAL grid. It’s not pretty, I realise. I actually had to make the left margin 31px, to remove the 1px wide gap on the right hand edge of the main content block, which was there because 16 x 60 – 9 equals 951, not 952, the original width of the container. Phew.

With my new ualgrid.css, I was able to apply predefined CSS selectors to HTML elements, and ensure consistent widths and spacing site-wide. Using a grid also meant that I could remove dozens of instances of <float: left;>, and <clear: both;> from the CSS.

Illustration of the website's original design grid.

Pink

LCF’s online colour was pink since before I arrived in 2006. It had its place in the 6-way University of the Arts London colour spectrum – alongside blue, red, gold, green, orange, and the base colour, a slate blue-grey.

Pink version

Truth be told, I never personally disliked the pink – it worked better than some other College colours in providing contrast against the base colour. However, it seemed that many people here didn’t like the pink. They felt it was dated (since we had long ago abandoned pink in our offline publications), and no longer represented the LCF brand. Occasional grumbles found focus at an afternoon meeting in early November – so I did a quick on-the-spot mock-up in Firebug, and hey presto, people loved it.

More detailed samples followed. We experimented – in fact we’re still experimenting – with which tints to use as highlight and rollover colours. But the ‘key stakeholders’ were on board with party streamers and paper hats, so we went for it.

Black

Black version

So far the response on Twitter is 3:2 against the switch. Clearly we need more data – please @LCFLondon your thoughts.

Update @ 22 Dec 2010

So… as you can see the LCF website is no longer black. Despite a lot of support within the College, the black scheme was thought by certain members of the central University communications team to be too out of keeping with the existing brand identity. Our response was that, if we couldn’t develop our design any further, we were better off reverting to the original.

Hopefully at some point in the future we will be able to assert our own College brand identity independently of the University’s federal structure. However, this will require a culture shift throughout the organisation and probably a reappraisal of the entire website architecture.

By extending the Contact Form 7 plugin with the Campaign Monitor Addon, and with a little help from my colleague Mouhannad Al-Sayegh, I was able to unlock a pretty powerful combination that enables all kinds of list management functions using the Campaign Monitor API.

Campaign Monitor

To start you’ll need an account with Campaign Monitor, and a demo list for testing purposes.

Contact Form 7

This plugin is super-flexible and easy to use if you know a little HTML and the rudiments of building forms. If you haven’t already you’ll need to install the plugin and create a demo form.

Campaign Monitor Addon

When installed and activated, this plugin appends a module to your form. No need for me to go into detail here – read Joshua Bettigole’s instructions and download his excellent manual on the steps required.

Connecting to Campaign Monitor

By default the Campaign Monitor Addon provides two fields for subscriber data:

• Subscriber Email
• Subscriber Name

It takes these fields and feeds them to the subscriberAdd method:

$result = $cm->subscriberAdd($email, $name);

Custom fields

So far so good – but I wanted to process additional fields from the form. Campaign Monitor allows you to add custom fields to lists (e.g. business name, country, gender, website URL, etc.) so I wanted to harvest this data directly from my contact form.

First of all I needed to modify cf7-campaignmonitor.php. I added new form fields to the existing list:

<div class="mail-field">
        <label for="wpcf7-campaignmonitor-email"></label>
<input id="wpcf7-campaignmonitor-email" class="wide" name="wpcf7-campaignmonitor[email]" size="70" type="text" value="&lt;?php echo esc_attr( $cf7_cm['email'] ); ?&gt;" /></div>
<div class="mail-field">
        <label for="wpcf7-campaignmonitor-name"></label>
<input id="wpcf7-campaignmonitor-name" class="wide" name="wpcf7-campaignmonitor[name]" size="70" type="text" value="&lt;?php echo esc_attr( $cf7_cm['name'] ); ?&gt;" /></div>
<div class="mail-field">
        <label for="wpcf7-campaignmonitor-accept"></label>
<input id="wpcf7-campaignmonitor-accept" class="wide" name="wpcf7-campaignmonitor[accept]" size="70" type="text" value="&lt;?php echo esc_attr( $cf7_cm['accept'] ); ?&gt;" /></div>
<!-- Additional form fields -->
<div class="mail-field">
        <label for="wpcf7-campaignmonitor-business"></label>
<input id="wpcf7-campaignmonitor-business" class="wide" name="wpcf7-campaignmonitor[business]" size="70" type="text" value="&lt;?php echo esc_attr( $cf7_cm['business'] ); ?&gt;" /></div>
<div class="mail-field">
        <label for="wpcf7-campaignmonitor-website"></label>
<input id="wpcf7-campaignmonitor-website" class="wide" name="wpcf7-campaignmonitor[website]" size="70" type="text" value="&lt;?php echo esc_attr( $cf7_cm['website'] ); ?&gt;" /></div>

These can obviously be re-ordered to suit. Next you need to modify the main wpcf7_cm_subscribe() function below:

$email = preg_replace_callback( $regex, $callback, $cf7_cm['email'] );
$name = preg_replace_callback( $regex, $callback, $cf7_cm['name'] );
// initialise new field variables
$business = preg_replace_callback( $regex, $callback, $cf7_cm['business'] );
$website = preg_replace_callback( $regex, $callback, $cf7_cm['website'] );
// create array for additional fields
$extraFields = array('Business Name' => $business, 'Business Website' => $website);

Note that ‘Business Name’ and ‘Business Website’ should match the custom field names you have created in Campaign Monitor.

Finally, we need to modify the method call. In campaignmonitor.php are listed a number of PHP wrapper functions for Campaign Monitor API methods. It’s possible to use different method calls in place of subscriberAdd – for example we needed to use subscriberAddWithCustomFields. Our previously defined $extraFields variable follows the standard $email and $name:

$result = $cm->subscriberAddWithCustomFields($email, $name, $extraFields);

Campaign Monitor will check the email address against a given list. If it already exists, any new data will replace what is already in the record. Note that you need to re-supply any existing data, or it will be wiped. You may need to run a few tests to make sure your form submissions are putting the additional data in the right places.

Checkboxes etc.

The above example demonstrates form submission using custom fields with single values. But what happens when you want to process a set of checkboxes into a ‘Multi-option’ custom field in Campaign Monitor?

$checkboxes = preg_replace_callback( $regex, $callback, $cf7_cm['checkboxes'] );

The above line extracts the cleaned-up data from the form submission, but stores it as a string e.g. ‘category 1, category 2, category 3′ etc. What I wanted was to put each comma-separated value into its own option inside of a multi-option custom field – so an additional step was required:

$checkboxes = preg_replace_callback( $regex, $callback, $cf7_cm['checkboxes'] );
// explode the string into an array
$checkboxArray = explode(", ", $checkboxes);
// create array for additional fields
$extraFields = array('Business Name' => $business, 'Business Website' => $website, 'Categories' => $checkboxArray);

This is really just scratching the surface of what could be developed using these tools – but hopefully it helps people trying to move beyond the standard tutorials and installation instructions already out there.

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.

• great black, white and gold colour scheme (with yellow highlights)
• a well-ordered grid
• elegant, uncluttered navigation
• chunky footer
• plenty of whitespace and breathing room around the text

GQ.com gets a makeover.

Girls gallery page.

One thing – and leaving aside the xbox ad currently turning the home page background into a sea of green bubbles:

I’d be interested to know the rationale behind not using a similar jQuery carousel on the individual feature pages as implemented on the section pages. A fresh page-load for every image just feels so clunky these days, and there are surely AJAX solutions to allow a more fluid browsing experience whilst maintaining reasonable loading times.

So what’s the reason? Extra pages for serving extra ads? Image bookmarking? Concern about presenting high-quality images without a performance hit, especially on slower connections?

Finally – the typographical double act of Georgia and Arial is undoubtedly a classic combo (used by the Guardian and many, many others). But my guess is that with the gradual evolution of web typography, embracing the potential of the @font-face CSS rule and of Cufón, sites that use this staple set of traditional web-safe fonts will begin to look dated over the next few years.

Gumtree

Gumtree, ‘the UK’s biggest website for local community classifieds’, has changed a fair bit since I first started using it. I really admired the major redesign that happened (I guess) at some point in 2008: the familiar colour scheme and branding were incorporated into a much smoother experience, preserving the community feel whilst making everything a whole lot easier for the individual – whether posting, buying or selling. As I write it looks like the ‘classic’ Gumtree is again being superseded by a sexier incarnation.

The clean and effective Gumtree UI.

Is Gumtree the last word in classifieds? Sure: you post, the customers/tenants come running. But this time my response rate has been quite low – 2 physical viewings from 300+ hits on the website. Aside from the fact that this is January and the coldest winter for 30 years, and my room doesn’t have a radiator, what could it be?

Map view

I blame the gradual demise of the map view for property searches. Formerly on Gumtree, you could view a Google map displaying as many properties as your search terms allowed, with a little red tree marking each house, flat or garage. You could type in ‘London’ and get literally everything on offer. Admittedly, it used to make Safari go wonky, but it was more useable than not.

[Gumtree should correct me if I'm wrong here, but this is my hunch.] In the redesign, with the advent of monetised customer interactions (like paying £4 to have your ad ‘bumped’ up the listings), the universal map view was replaced by a map that only showed 30 properties per page (by default the top ones in whichever list), leaving the user to click to the next set. Clearly, this privileged the newer posts and incentivised posters to pay that £4 in order to get more hits.

The new Gumtree map view - now with green blobs.

I would like to see Gumtree reinstate the global, un-paged map – because I think it allows greater flexibility of search. Let’s say I wanted to view all properties, however recently posted, in a small area near Hampstead Heath. Instead of being able to zoom the map in and see every property, I would now need to page through 10 or more pages of results before a green blob popped up where I wanted it to. Not only that, but every time I load a new result set, the map zooms right out to accommodate all blobs – from Walthamstow to White City.

Sure, I could make my search terms more precise, but the beauty of the global catch-all map is that you don’t have to refine anything and thus risk missing somewhere that falls just outside of your terms – you just browse.

Globrix

If Globrix did flatshare, they would be my first choice. Theirs is the best property search interface bar none:

• awesomely granular search filters
• global map search (properties pop up as you drag the map)
• draggable price slider

Not to mention an abundance of stats and graphs on individual property pages, which display everything from median house prices in the area to typical crime rates.

Globrix's property map interface - with sliders!

The only problem with Globrix is the trade’s apparent lack of confidence in it. Being a search aggregator, it inevitably takes longer to update than estate agents’ own websites.