In my recent update post I showed off the very first draft of the MyWhoosh Workout page I have been working on.
If you missed that, it looked like this:
Certainly not the nicest looking thing. But as a first pass it was good enough to ‘reveal’.
I managed to get more time on it today, and I wanted to drop a quick update on how it currently looks:
There are still some problems with it. I’ll get on to them in a second.
I did a bunch of changes:
- Put the workout summary on the left on desktop, but it drops to the bottom on mobile
- Added Intensity Factor to the Workout overview section
- Added Free Ride to the Zone distribution section
- Made sure to include the workout creator’s name under the Workout description
There are a few other tweaks to display on mobile, but nothing huge to call out.
I think the nicest changes are the colours of the zones, and the gaps added between the zones on the workout graph. That 1px gap makes all the difference.
There’s actually quite a lot left to do. You can see on the screenshot above – 3 errors on the left.
Those errors are a new thing – but I haven’t yet solved them. The thing I need to do is render out the workout graph so that when the workout is viewed in Google or Twitter (err, X) or whatever, it shows the graph as a particular image format called a PNG.
Right now, it displays as an SVG on the page. That’s great, because it means it scales to whatever screen size you have, but Google, etc, they don’t like that. They want a static image. So I need a way to remove everything and just show the graph, but the framework I use – NextJS – it doesn’t make that easy. So that’s my currently stumbling block.
Well, that and other things.
The workout listing is still untouched. See the previous post for an image of how bad that currently looks.
But still, I’m happy with the progress. I will keep at it until it’s done.
As before, I’m going to avoid directly linking to the page because if Google gets ahold of it, then it will not like that image format as above. But if you’d like to have a sneak peak, update the bikeclimbs.com URL in your browser to end with