Simple CSS changes to transform the BBC Sport league table page
Last updated :
I love the BBC site, it's the website I visit for all general news and sport daily. It's updated by a huge number of staff and reporters and it's the coverge is fair and balanced (most of the time). There is always something to watch on IPlayer and across all media channels BBC does things very well.
There some improvements that could happen though and these are just a few thoughts on making something that's very good, even better.
You can see these improvments in a live demo page I've created here.
#1 Sticky table header
You can see in 2. above there is a 'sticky' header This is very easy to do in CSS and infact is only 2 properties of CSS. It works well on mobile too with no further enhancements.
table thead{ position: sticky; top:0;}#2 Rollover CSS with latest results
On a previous version of this football table the BBC had a very handy feature that upon rollover shows you details of previous results. For some reason they decided to scrap it. I personally found it very useful to see the last 5 results with scores, date and what venue. I decided to recreate that here using only CSS. It's quite straight forward CSS really, with some subtle animations and gradients making all the difference. I replaced the last field on the with a next fixture rollover which is handy I think. Check out the demo for the full live effect.
#3 Alternative table row highlighting
In the 1.1 and 1.2 examples above you will notice there is slight different in the colour of every second row. I havn't just added this to make it look pretty. There isnt a massive problem with the way this table has been designed, but adding a different background helps lead the eye across the data. It helps a little for sure, the idea of a alternating background on the rows is much more effect when there is more data on screen and it's really cramp. In situations with more data, the 'banding' effect can really help the user line the content up.
#4 Pages that link to themselves
There is no reason why pages should link to themselves. Why would be want to link to the BBC Sports Football table page when we are on the BBC Sports Football table page? It's just confusing. I'm guessing it might be something to do with the BBC handles it's content in the Content Management System behind the scenes but in an idea world pages should not link to themselves.
You can see in 3.2 above there is no change on appearance of the pointer when the "Table" is rolled over.
In one line off CSS we can remove the link interaction:
.property li[aria-current=true] a{ pointer-events: none;}
Technically the there is still a link in the HTML, but this CSS restricts the default pointer event change on rollover.
It's not a deal breaker on a site to have some pages linking to themselves but these things add up when it comes to user experience on websites.
Please see the demo for full live examples of all these areas of improvement.