The ATP or Association of Tennis Professionals is the governing body of men’s professional tennis. They oversee multiple year-round tours held at many venues around the globe. The most famous, World Tour, showcases the stars and their talents in over 60 tournaments hosted across 31 countries. All the excitement leads up to the finals in London presented by Barclays.
The tennis platform the ATP was using to feed the viewers tournament & player data was quite dated and due for an upgrade. They needed a new modern look that also created a better, more interactive experience for the user.
We used RESS to build the platform with the purpose of giving fans a richer experience across the different devices being supported. There were over 60 unique modules created throughout the site. Users can look through player profiles, compare player stats, check tournament schedules, read up on the latest news, watch match highlights, and for the first time ever stay on top of the action with live scoring.
Challenges / Key features
The live scoring lives on the right rail of the site so it was important to ensure the rail’s position and width would remain fluid throughout the different breakpoints. When the user visits with a larger display, the rail will appear to the right of the main content. Once there is not enough room for both to appear beside each other, the rail will then hide and its toggle icons will appear on the lower right hand corner. On mobile, it is not at all rendered.
At one point during development, we found ourselves experiencing visual styling issues in the older version of Internet Explorer (9 and below). After some investigation, it turned out we simply had too many CSS selectors. So much so in fact that we had to implement a 3rd party tool (Bless) to split the CSS into multiple files just to have the styles display properly.
One module, easily the most challenging to build, was also my biggest accomplishment on the site; the tournament draws <table>. By far, one of the most intricate pieces of markup I’ve created to date. It is a single <table> complete with round headings, player names, flags, rankings, and match scores packaged as an expandable bracket system. Without the help of Jade and its ability to create mixins, I would have had a lot more trouble creating the structure and bracket method. It spans about 3800+ lines when the Jade is fully rendered into HTML.
Although this was one of the largest, most time consuming sites I’ve ever done, I was able to finish development and come out of it with a lot of new understanding and knowledge. It was a challenging project with lots of bumps along the way, but the use of sprint planning along side an agile ticketing system, as well as a heavy use of the GitFlow process between multiple developers really opened up my eyes to what the full process of building a large scale site is like.