Our website had to be designed to represent our team's technical ability. In the spirit of knowing how things work and open source, here is an article about what makes this website tick.
In 2011, former team captain Christian Silver took the redesign of K Force's website into his own hands. Learning jQuery and PHP for the first time he cobbled together a website with dynamically loading content, whooshy animations and a homebrew CMS. As his time at Kristin came to a close, he realised his patchwork software wouldn't cut it, so something new had to be made, that could last the team for a lifetime.
The following requirements were made of this new website to be:
- Fully CMS enabled so that any sane person could edit content
- Mobile responsive to meet the needs of growing mobile traffic
- An easy way to access all information about the team, new and old
- Very, very beautiful.
The decision to make the K Force website open source was made fairly early on in the process. The code had to remain editable for team members in the future - so it was already being kept under some form of version control with a bit of documentation on the side. We have nothing to hide, so why shouldn't everyone be able to see it? The source is available on GitHub, hopefully it will be of use somewhere!
This seems to be one of the most controversial discussions around website publishing: What CMS should be used? Wordpress was a contender due to its ease of editing content, but eventually Bolt was settled upon. For every role: the developer, the editor and the designer, work is extremely easy. It's a recent project so it's still under development (a few pull requests had to be made to get it up to scratch with the requirements of the website), it meets all of the expectations of a modern web developer.
Structure and Navigation
It is very easy to make a page for every bit of content we have to offer, make a 16 button navbar and be done with it. This, is difficult to maintain as it is hard to know what content belongs where. A great example of this is the typical photos page, with photo galleries in it. This content is without context, images of events with no description. If we just want to display photos, a website is not the best place for it, a place like Facebook is (which is where all of our photos go anyway). However, having an archive of this information in context is important.
So content the content was streamlined. Any page has the capability of becoming an image gallery or downloads page just through uploading some files. This blog post is a prime example. The context is available through text, so the images themselves make more sense.
And so the code begun. The whole story is long winded and illustrated by badly named commits, so here is a quick tech rundown.
- Client dependency management is handled with Bower
- The CSS preprocessor of choice is LESS
- Frontend templates are written in Twig (sorry that the rendered markup is a bit all over the place)
- Gulp is used for the build process (with a lot of plugins)
- jQuery is used (naturally)
- Font Awesome supplies nice icons
- Image popups are powered by Magnific Popup