Old ArticleThis content may be out of date or broken, please take care.
We’re cycling to raise money for Mind this year, so it was also a good time to redesign the T2T.bike site I made last year. So last year’s build was done on Skeleton.css, which I spoke about in this article, but now I have firmly grounded myself with Bootstrap it seemed better to use that. To save some time, I used this site as a foundation.
It’s always fun to start a new project – if not a little daunting. I didn’t really know what I wanted at first, so built everything up from picking a font and a colour palette. That’s really where the whole sort of hero theme came from. I saw the Bangers theme, and thought yes! That is the font for our cycle!
Everything really took off from there, and it’s all been built on to that. I loved last year’s hero video and wanted to carry that across to the new site, with a jazzed up texture overlay. I roped in my designer colleague to help me with some flat graphics and I have expanded my knowledge of SVG’s to build some flags and optimize the original .eps files of the graphics sent to me.
I really like how it came out, and it’s a really good template for any generic charity site. All the CTA’s I feel are well placed, and swap out some fonts and colours and the site is totally different. Fresh!
The project wasn’t just design either, it has required a little extra development work. I’ve added email subscription to the site and integrated it with the existing email notification system. This took away the convoluted steps of registering a formal account, and made things a lot easier. Of course this also included adding actions to manage unsubscriptions.
I wanted to have the data on my server, so pages would be server as quickly as possible, and it looks like the API may still be in beta – sometimes the server times out. To get round this, I have every visitor update a JSON file for the next visitor. Sounds a bit weird right? Thought so.
Here’s What I Did
I installed the SDK and built an action in a controller. The action simply makes uses the JustGiving API to get the latest charity info. It then writes this as JSON to a file on the server, and then returns the latest amount raised. The full process that occurs when someone visits the home page is:
- Read values from the file on the server and write them to set them in the home page view model.
- Render the view with these values.
- On page ready, fire off a GET request to the action I spoke about.
- The action updates all values in the JSON file, returns the latest amount.
- The client then updates the value on the page.