From Concept to Live in 8 Days: Messi Vs Ronaldo

A couple of weeks ago, I was watching some Spanish football (the Madrid derby to be precise) – Cristiano Ronaldo banged in yet another hat-trick for his club and soon my train of thought was mulling over the sheer amount of goals that Ronaldo and his Barcelona rival Messi keep on scoring for their respective clubs.

Naturally, I wanted to know who was currently on top. Obviously, the Spanish league scoring charts were easy to come across, but then I wanted to know who was ahead in the Champions League – and then I wondered who was on top in all competitions – then I wanted to know who has assisted more goals this season.

What I found

Surprisingly, I found it was quite an effort to come across this information. For a subject with so much coverage and so much public interest, I was quite astounded that there didn’t appear to be an up-to-date, statistical comparison of the 2 players, considering that their battle for top scorer is constantly back-and-forth and something that a considerable number of people like to keep their eyes on throughout the season.

I could access all of the data through several different sites and pages showing the various goals and assists charts… and I could read hundreds of articles comparing the 2 masters. But crucially, these comparisons are out-of-date and are very text heavy.

All I wanted was a snapshot of their head to head statistics at this moment in time and surprisingly, that wasn’t very attainable. And thus, my idea was born.

So what next?

I had a very thorough look through the results returned by Google for ‘Messi Vs Ronaldo’, which only really confirmed what I had first thought. Some really good write-ups of their abilities and their goal-hauls, but all of which contain what is now out-of-date information.

I thought, as it’s something that is of particular interest to me and with the potential it has to generate some decent traffic, it would be worth chucking something together and seeing how it gets on.

With just over a week until the players’ clubs met in the famous El Classico clash, I set myself a challenge to get something launched in time for this match.

The Concept: Day 1

I had been mulling over the idea for a few days by now, so I already had a pretty clear image in my head that I wanted to achieve. I [very] roughly sketched out my concept onto some paper, which you can see below – bear in mind though that my sketches are very rough (crap) and are just to give me something visual to work from!

The basic concept was to give people a quick reference point for the main stats of the 2 players, such as goals, assists and appearances in each competition in order for people to quickly see who’s currently on top.

Then I had (and am still having) more and more ideas for additional data avaiable below the fold, should users want to scroll down to see it. These include the achievements of the 2 players in terms of trophies won (both club and personal) and a head-to-head comparison of their abilities.

The Design: Day 1

I spent an entire night tackling the design of the project, attempting to transfer my paper concept into Photoshop. The most time consuming aspect was creating a background I was happy with, but I was eventually able to design everything I needed in the few hours I had available.

I designed only the top area to define the look and style of the site, with the sections that followed below simply being created in the browser.

Coding: Day 2 – 7

I sailed through the coding of the site, probably because I had written half of the mark-up in my head as I was designing it. I did my best to stay as semantic as possible despite the unorthodox layout…

Note: It didn’t actually take all that time to code – I worked on it on and off when I got chance during that time.

An easy method that will go some way to judging the semantic value of your markup is to disable the CSS. Does the content still make sense? Is there still a clear hierarchy of importance?

As you can see, the headers and list elements used ensure that the context of the data is maintained without any styling, going some way to proving the semantic value of the code.

You may notice the sub-headers (‘Lionel Messi Stats’ etc.) that are set to display:none when CSS in enabled. I feel it is important that your markup makes absolute sense when it is completely abstracted from the CSS that styles it; in this case, the styling makes it obvious which stats belong to who, but take that styling away and there are no visual clues whatsoever, so the extra headings are required.

This also ensures that each of the statistic blocks (like the one shown above) makes sense when taken out of the context of the rest of the page; I therefore felt it appropriate and semantic to make use of the HTML5 <article> element rather than <section> or <div>, as the data makes sense on its own and doesn’t require surrounding content to support it.

Making My Life Easier

Manually updating this thing after each match is tasking enough as it is, but having to scroll through all the code and pin-point the correct number to edit each time is just not even worth doing. With the lack of a reliable football stats API I could use (to my knowledge), I simply made use of PHP variables to make maintaining the project a million times easier.

Above, you can see we simply echo the PHP variables that are defined at the top of the page in the appropriate place.

This method allows the appropriate statistic to be easily and instantly accessed, making the project a much more maintainable one. Another slight time saver was to make the All Competitions statistics calculate automatically by simply adding the values from each competition and outputting the result.

If anyone knows of a better way to go about this, then I’d love to hear about it.

Research – Day 7-8

I spent the last day and a half researching all of the statistics & achievements/honours to input and writing up the abilities comparisons, which proved rather time consuming.

Live – Day 8

Eight days after putting my concept on paper, the site was live – just in time for El Clasico (Barcelona Vs. Real Madrid) the following night. I was very pleased with the substantial piece of work I’d managed to put together in such a short space of time, but the work has continued since putting the site live, with several additions & improvements being added.

Embedded YouTube Videos

I wanted to provide visual evidence to back up my opinions on the players’ abilities, so decided to embed YouTube videos into the site, through the help of iframes and fancybox to optimise the user experience.

Facebook Comments

It had been suggested that adding a ‘Have your say’ option could make the site more interactive and encourage discussion, which in turn would increase the site’s reach on Facebook.

Performance

I made a half-hearted attempt to promote the site, posting it on Facebook and Twitter, submitting it to some CSS galleries and one or two relevant forums.

The response was good, but my main aim was to make the site self-sustainable in terms of generating hits, i.e. generating traffic through searches rather than having to constantly promote it and/or rely on people sharing it.

Last week, it sat somewhere on the 2nd page of Google for ‘Messi Vs Ronaldo’ – as of this writing, it has now moved up to 2nd on page one. Yesterday, I had 68 visitors from that search term and so far today (13:00), I’ve had 62 from that term, so it does seem to be ever-improving in terms of performance so far.

Social Performance

I should probably point out that a big help to the site was a re-tweet by @FourFourTom, a football journalist who is very prominent in the Twitterverse; this pushed the site in front of a relevant audience of around 60,000, which seemed to kick-start a lot of interest in the site.

In terms of Facebook, the site has surpassed 200 likes and is growing in reach and significance thanks to the Facebook Comments section.

Overall Performance

Overall, the site has had 3467 unique visitors in the 13 days it has been live, with an ever-increasing majority coming through Google. For me, this is extremely promising and it points to the site’s potential to sustain itself in the long term through Google searches, suggesting it won’t just die down into nothingness when social sharing dries up.

Anyway, go look, click the Like button, click the Tweet button and have your say by leaving a comment at the bottom – http://messivsronaldo.net/.