Tour Tracker Web Evolution

The original web version of Tour Tracker was designed to highlight live race video with all of our other data visualizations surrounding that key element, a layout that has proven successful for over 12 years and is still used for official Tour de France coverage.

But not every race has live race video available to every user and we needed a simple way to provide those users with a familiar, complete solution. Since GPS tracking was now one of the primary data sources, we did a simple layout change for those users.

But by 2021 the number of users using Tour Tracker's free live race coverage at live.thetourtracker.com had grown significantly, and we felt it was time to give those users a proper design, focusing the layout on the most important elements: the live race profile and our live multi-media commentary feed.

As you can see the new layout puts the key elements center stage, giving more height to the profile so that we could show the rider group details and more width to the commentary so that embedded photos and videos have more impact.

The new layout also provides a new area in the lower right for additional relevant content: a list of intermediates for quick access to their details and results (actually you could always click on the icons on the profile or map to get this but that's not obvious to every user), a summary of the standings for quick reference without changing context, and a new social media feed.

But wait, there's more! While we were updating the layout, we revisited a much harder problem: adapting the app to devices and websites where we don't have enough width for three columns of data. Back in 2015 we provided some basic reflow capability for each tab of the app, but for 2022 we have a more complete solution.

The LIVE page, for example, goes to an optimized 1-column view when needed, keeping the most critical elements at the top, while the rest of the data (e.g. the map) is a short scroll away.

With the other tabs like STANDINGS, however, we wanted to retain the list of riders throughout the transition to narrower widths. As such they go from 3-columns (category, riders, rider profile):

To 2-columns (category, riders, clicking on rider will show a profile pop-up):

To 1-column (most important categories and riders stacked, click on rider for profile):

We hope you enjoy these updates and look forward to getting feedback!

Women's Cycling Coverage

Today Tour Tracker added expanded women's coverage to our Tour Tracker Grand Tours application. Over the past 10 years we have covered women's races every year, ranging from providing races custom apps free-of-charge to including select races in the Grand Tours app. And we are super excited to do our part in increasing the amount and quality of coverage of women's cycling. But with that excitement comes concern.

We can't speak for other members of the cycling press, but for us, the races Tour Tracker covers is directly related to the availability of information about and from the events. For better or worse, the Tour Tracker platform is dependent on having detailed information about an event available in specific formats and in a timely manner.

That information includes but is not limited to:

• Point-by-point GPS route data for each stage.

• Details about every team and rider.

• Reliable information about the race's progress.

• Timely, accurate results in standardized formats.

In fact to make the first Tour Tracker work back at the 2007 Tour of California, we spent 3 days clicking on maps to generate the route data by hand, dot by dot!

Ten years later we have found it sometimes challenging to get that level of data from women's events. Having been behind the scenes, we get it. Even at well-funded events the last thing a course director is worried about is whether the press has the GPS files for the race. In fact, they might not want them public. And at underfunded events, the challenge is 100x greater as just getting the race going can be a Herculean task.

So, we wanted to use this post to make two requests. One, that you try to enjoy our added women's coverage, knowing that we might not be working with all the data we need. We spent the off-season modifying the app to support a race without interactive routes, but some users might equate the lack of routes as a lack of desire to provide high-quality coverage, and that couldn't be further from the truth.

Two, I'd like to use these final words as a request to the race owners, race organizers, team owners and riders. Please help us help you. Women's race coverage can be a challenge when little information is available, just like any race.

Race organizers, please make your routes, start lists and results available to the press promptly. And teams, please do everything you can to get your rider information out there and help us fill in the gaps.

We hope you enjoy our expanded women's race coverage!

Allan & Clara

Climb Gradient Design Competition

User feedback on our new climb gradient visualization has been awesome. And the response to our survey was great, but there was not a clear winner. So, we thought it would be fun to let users submit their own designs. So we extended our web-based Tour Tracker to allow YOU to be the designer.

All you have to do is go to the URL listed below (on your laptop) and then start tweaking the design by changing the URL values. Below the URL is a list of options you can change / add to the URL. You can see your design better if you click on one of the climb icons on the profile and then select Gradients. Once your design is perfect, send us the final modified URL to support@thetourtracker.com. The best designs will be shared in the app and the top design will get TEAM coverage for life! Good luck!

http://live.thetourtracker.com/?show_gradients=true&gradient_colors_type=color_get_lighter&gradient_color=ff0000

Values you can set in the URL:

gradient_colors_type: This controls the basic design of the climb gradient graph. Values are:

• color_alpha_blend - A single color (red) will be blended on top of the profile color from transparent to opaque. Setting gradient_color=RRGGBB can override the default.

• four_colors - There are four colors in increasing grade: green, blue, black, red. Setting gradient_color_1=RRGGBB, gradient_color_2=RRGGBB, gradient_color_2=RRGGBB, gradient_color_2=RRGGBB can override these colors.

• color_get_darker - A single color (red) will go from bright to dark. Setting gradient_color=RRGGBB can override the default.

• color_get_lighter - A single color (red) will go from dark to bright. Setting gradient_color=RRGGBB can override the default.