The NUFC website: a modern digital publisher platform
Seven League won the tender for this work in partnership with sports website platform Stadion in April 2016. The site's public beta phase went live in November and full launch was on December 6th 2016. It's exciting to see it already being recognised for excellence by the industry.
There's a lot to like about the site design and UX, and fan feedback has been very positive - in particular around the update to the club's NUFC TV output, now free to registered site members having previously been a paid subscription service.
However, it's the technical features that place NUFC ahead of every other sports club in terms of being a modern digital media publisher.
We know of some club sites that do some of these things, but none that do all. And really they should be considered standard for anyone who's competing for attention on the internet. Which is everyone.
Here are 8 tech features plus 3 notable UI elements...
1. Accelerated Mobile Pages
The AMP project is all about delivering mobile web pages at optimum speeds, bringing the dual benefits of improved UX and potential for greater visibility for news articles in search results.
It effectively means stripping out many of the scripts that have slowed the web down over the years, and trades some compromise on layout and function with excellent readability, even in data-poor situations.
2. Facebook Instant Articles
Similar to outputting pages in AMP format, publishing in Facebook's IA format allows the club to select certain articles to be delivered within the Facebook experience - again with benefits on load time, and also significant benefits in newsfeed visibility vs a regular Link post.
There's a balance to be struck here- big breaking stories can still drive a lot of website traffic even as Link posts. We had over 3,000 concurrent site users when the news broke that Jonjo Shelvey and Paul Dummett's controversial red cards had been rescinded, for example.
The net effect of IA on overall reach is very likely to be positive however - we'll come back to this in the future when we have more data to share.
3. Optimised social share buttons
We've written before about the importance of messaging apps in social share, and the NUFC site adds Facebook Messenger alongside WhatsApp as an option in the mobile view.
This gif shows a user sharing to FB Messenger- as with any other method, the action prompts the Messenger app to open, with a link to the article pre-populated; the user just selects the recipient and adds some commentary if they want to.
The other nice touch here is the way the share options appear at the bottom of the screen as the user scrolls down the page.
4. Social share tracking
Not many clubs really optimise social sharing - far too many standard AddThis widgets etc are used - and of those that do, almost none are tracking that activity.
Google Analytics has a useful Social Plugin for tracking outbound shares, and in the eight days of data we have so far, the overall split for nufc.co.uk is:
(1) Facebook - 31% (2) Email - 24.5% (3) Twitter - 17% (4) Facebook Messenger - 16% (5) WhatsApp - 11.5%
For desktop, where there are no WhatsApp or Messenger options, it's:
(1) Facebook - 42% (2) Email - 30% (3) Twitter - 28%
Already there's an insight about the relative importance of share-via-email, alongside the common finding of Facebook's dominance in this area. And WhatsApp isn't as popular as it was in Spain...
We also tag the url that's shared with a parameter that means we can attribute the traffic these links generate, and go some way towards revealing the source of previously unknown Direct traffic, provided that the user has used our buttons and not just copy/pasted a url.
5. Open Graph Tags
Almost not worth an entry because it should be so standard by now, but it often isn't.
Define your meta data for Facebook's <og> properties dynamically on every page, to ensure that the content looks its best when shared on facebook.com or Messenger. And use their extremely helpful linter (debug) tool to check your work.
While you're at it, do the same for Twitter card meta tags and validate them here.
6. Structured markup
Listings websites have been using structured markup for events for a good 18 months now, but we almost never see this on club sites.
Even just a few days post-launch we saw Google index individual events as part of the result of 'newcastle fixtures', which click through to individual upcoming fixture pages; delivering fans more relevant search result content improves traffic acquisition. Organic search traffic drove 27% of sessions at launch, and is up to 37% after three months (in a context of overall traffic growth, i.e. it's not substitutional).
For mobile search results, the site's markup also enables Google to display image-led 'cards' for recent news articles as part of the overall site result. If nothing else, the greater physical space this commands on-screen drives improved click through rates, and a high proportion of the post-launch growth in search traffic has come on mobile.
7. Redirects & Sitemaps
This is new-site-SEO 101, but setting up 301 redirects from old page urls to their new equivalents is a crucial part of any launch.
Manchester City's digital team blogged about this in more detail recently - suffice to say it's a right old pain to do well, and there's always manual work involved. We've got over 13,500 individual url redirects in place; site launches always have some risk around impact Google indexing but so far the results are encouraging, particularly when we've also switched from http to https.
Similarly, sitemaps and their management via Google Search Console (née Webmaster Tools) play a crucial role in maintaining and increasing your indexing; we have 3 separate maps for different content types (which also keeps them at manageable file sizes!).
There's always more work to do in this area - image and video SEO could undoubtedly be optimised further over time.
There's always a risk when writing about accessibility that someone will point out an element of the site that's not AA compliant, however: this is absolutely an area that was focussed on in the build, from providing a 'high contrast' version of the site to ensuring it can be used without a mouse (hold down function + tab to cycle through access key options and clickable elements on any page).
Maintaining accessibility is an ongoing task from both a content management and a codebase perspective, and we welcome anyone who has difficulty using any aspect of the site to get in touch so we can improve it.
Black and white club colours do help with contrast legibility, it must be said!
9. Match Day Centre UI
We're now into notable UI features rather than specific technical functions, starting with the live match centre.
Similar to the 'sticky' nature of social share buttons in the page footer, we overlay a live scoreboard in the page header as the user scrolls down the page.
10. Permanent navigation tabs on mobile
You will also notice from the gifs on this page that we keep three permanent navigation tabs visible on mobile at all times.
James Archer's article about why the hamburger menu alone is insufficient for mobile navigation is now a couple of years old, but the hamburger menu still divides opinion.
There are definitely counter-arguments (several of which were made by colleagues during our design phase!) but I'm a firm believer in the benefit of retaining some nav tabs and not relying solely on users expanding the burger button.
Page impression stats for section homepages (e.g. the 'news' homepage) are almost always pretty dismal on mobile devices, if an expandable burger button is the sole navigation tool.
Again we'll be assessing the data on this as time goes on.
11. Best-in-class player stats UI
Finally, it's worth highlighting the site's stats visualisations at both team and player levels. We're not presenting massively complex data, but it's done in a much more visually attractive way than the vast majority of sports sites.
The simple infographics genuinely make the data easy to understand at a glance, and small animations bring the numbers to life. Full credit for this goes to the Stadion design team.
Questionable credit to us for making you load a 2.5mb gif to watch it... sorry.