Use case of Pretoria North High School

by Gideon van der Merwe

March 07, 2019

There's nothing worse than an old website that is broken, outdated and looks bad on almost every page you visit. In this article, we will look at the old website of Pretoria North High School. We will identify the problems and issues that was present on the old website and how we rebuilt and organised the entire website.

How to fix a broken website ?

When we first saw the old website of the school, it was clear to us that there was no content strategy or design in mind. The website had many broken layouts, was not user friendly and the content was very disorganised. Furthermore, the content was loaded by students in the school. This might have been an easy solution for the school, as they did not have to employ someone to make sure the content is loaded properly and looks according to the layout of the website. The students did not follow the design principles of the website and added the content in their own way, causing a disconnect between the different pages on the website.

We started by creating a completely new sitemap for the school. This ensured that all of the content was organised into categories that was easy to read and easy for search engines to index.

Thereafter, we created a new theme that will accommodate the content and provide layouts for content to look and feel the same across the entire website. See below a comparison of the sport page categories:

This is what the old website's sports layout looked like. As you can see above, the different sports categories were only displayed in a list and the entire page was broken.

As you can see above, there is now a functional page with navigation. There are also images and content to represent each sport category. This not only looks much better, but is also functional and neat.

We also created a navigation bar and menu that is easy to navigate and will look good on any screen size. See an example below of the old navigation:

As you can see with the previous examples, there was a lot to improve on. The previous mobile menu was broken and did not use standard conventions that users of the website would expect. The site branding was also broken and stretched out of the visible region of the page. With our new theme and content strategy, we reduced the visible navigation items from 11 items down to only 5 items and organised the content accordingly. See an example below of the new redesigned navigation on mobile devices:

The old website was built to run on a CMS (content management system) which required a lot of software to run, for example php and also a database which required MySQL. Because of this, weekly maintenance was required to patch any new security vulnerabilities and to keep the software up to date. With the school's new website, none of this is necessary. They now have a static website that does not require any of the previously mentioned software to run. This results in web pages loading much faster than before.

Static websites are also dynamic

Last but not least, even though the new website is a static website, it still has many dynamic elements and content can easily be updated or changed. For example, when a staff member leaves the school, we only need to remove their name from one line of code and in turn, they are removed from all pages and categories on the website. By using tags for each staff member, we can also easily add or remove them from a sport category by only adding or removing the tag from their profile. All of this and more is possible with a static website.

With the new changes in place, the school can now be proud to showcase their website to new parents and learners. They now have a website that can grow, without losing the beautiful look and functionality.