TDU Website Project

October 09, 2020


In 2019 I joined the Highschool Robotics team "The Thunder Down Under" (Team 3132) where, as part of their outreach program I decided that I was going to remake their website.


The Old Website

The old website was last edited in late 2016 and, as a result was extremely out of date and somewhat anitquitated. The other downside of the old site was that it was made using the Weebly website generation service. As some people reading this may know these different site generation services are terribly convoluted when it comes to the amount and what resources they load as part of rendering the site (also including all the different components). As a result the loading times for these sites aren't fantastic. Some of the old content was useful but the majority that was on that site did have to be rewritten.


The New Site

Getting Started

The first step of the process occured in conjunction with one of the team's mentors who as a sensible step, suggested looking at what other teams had done. I did this by taking notes on the navigation menus of each site, each of them noted as indents within a bulleted list. From this list I was able to gather what people wanted to know based on what other teams had done with their own sites. People wanted to know only a few things, ordered by importance:

  1. Cool Robots
  2. What we do/Who we are
  3. Outreach
  4. Sponsors

Based on these things this is what I decided to put on our team's remake.

Design

For design I decided to use an exsisting style framework so I didn't have to design and style from scratch. There were only a limited number of frameworks that I might've considered.

For the first major version I used Semantic UI (mostly because it came with predefined React components). But, the first version wasn't great. It didn't scale well on mobile, it had weird visual errors that I just couldn't solve.

Therefore, I decided to redo the site yet again but this time with Bulma which worked better on mobile and looked really nice, as well as having SASS colour variable support meaning that I could change the colours based on our team's colours.

Functionality

The first version of the new site used ReactJS by itself with each page created individually and having it's own unique code. This made it difficult for people unfamiliar with programming to add new content to the site. This problem prompted me to switch to using GatsbyJS instead for the second version with Bulma. Gatsby has an extensive library of plugins and useful starters of which to base our final site.

Images

Handily it also comes with integration for an image processing library called Sharp which is able to scale images and provide SVG placeholders whilst they load a suitably sized image for the resolution that the user is using. This made the site notably faster when loading large (entire-team) image.

Templates and GraphQL

Addressing the problem that I discovered in the intro to the functionallity section, normal users are unable to code and, therefore can't create new pages. My solution to this is one of Gatsby's primary selling points. It's GraphQL processing during build time. Using markdown pages in Gatsby I'm able to use a template which uses the same format for nearly every repeated page on the site. The user can simply create a new markdown file and use a cheatsheet to create new content which will then be processed into html and added into the site without needing to change any other files or even code.

SEO

Using the gatsby-plugin-react-helmet plugin I was easily able to change the SEO data per-page meaning that each blog post has a different description, title and image (in some cases). This may not sound like much but it also gives me the opportunity to use Google's Rich Results format so that the search appears in more detail and grabs the user's attention more than a traditional search result.


Final Word

I learnt many things over the course of making the site from design to some new Javascript functionallity I didn't know about.

Seb's Blog by Seb.