Portfolio: Saintfield Baptist Church

written in portfolio, web design

Website redesign for saintfieldbaptist.org.uk

Over the past few months I have been working on a redesign for a website that I started working on back when I was still in school!

The site was originally set up by someone else back when I had no web development skills (perhaps still true!). As I gained more experience I was able update the site and add more features including: a mobile site, sermon downloads and live streaming services. Using skills learnt while I was on summer placement I was able to add a sql database to store all our sermons, rather than updating an html page each Sunday.

The site helped me to learn and develop my html, css, javascript and php skills. Skills that helped me to further my university progression and professional career.

It has served the church well, but in the past few years is has become extremely dated both in design and content, the only real feature that was kept up to date was the live streaming as it is probably the one feature that is depended on by people who can’t make it out to church.

The Issues

There were a number of issues that needed to be resolved as part of the redesign:

  1. Make it fully responsive - the existing version had a separate mobile site (built using JQuery Mobile), I wanted to have a single, responsive web site.
  2. Make it easier to maintain - a simple CMS would help to maintain the content, eventually allowing other people to help with updating the site.
  3. Move our live streaming to a mobile friendly streaming provider. (Read about my live streaming investigations here)
  4. Improve the design - the previous design was very dated!
  5. Introduce an API - previously I used php to generate the dynamic content, e.g. the sermons download page. This time around I wanted to create a json api that could be used by the website and potentially native clients.

The Frameworks

I wanted to use this opportunity to bring the Saintfield site right up to modern standards and use modern frameworks.

I’m not a designer so like most I turned to Twitter’s Bootstrap to help with both a mobile first design and a consistent look and feel. Throughout the process I really took the time to become familiar with all of Bootstrap’s features and I think it paid off in terms of responsiveness and aesthetics. I’m using the Lato font rather than the fonts specified by bootstrap as I felt it suited the site better.

I also wanted to use a framework that ended with ‘.js’, the problem with this is that there are so many! The two main contenders were Angular and React. One provides a full MVC framework the other just provides the V.

I used Angular for our work hackathon and it really did enable us to add more features to our app in a short period of time. However I felt that Angular would be overkill for such a simple site and with the upcoming Angular 2.0 rewrite, I didn’t want something that I would need to rewrite myself in a few months time.

React is a framework that focuses on the user interface, it can be used with other frameworks or by itself and I liked that flexibility. It’s also great for building reusable components (Check out my example in a previous post). My first thought was what elements of the site are repeated across different pages? The answers I came up with were:

  • Navigation Bar
  • Footer
  • Upcoming Speakers
  • Sermon Downloads

There were also some components that were not really used in multiple places but did benefit from using react:

  • Video Player
  • Audio Player

These components had some dynamic behaviour and React allowed me to encapsulate that behaviour into a single component.

The Design

I decided that I wanted to really try and get the most out of Bootstrap for the site, I made good use of the grid system and responsive utility classes.

The time spent using Bootstrap to it’s potential allowed me to create a site that was consistent and sharp. As well as looking great on mobile devices.

I’m not a designer so I found Adobe’s Colour CC to be really useful when picking the colour scheme.

The API

I restructured our database into something that was a bit more normalised, and created a new GetSermons.php that would retrieve and return the sermons in JSON. The php function json_encode made this task incredibly simple.

I’m hoping I can reuse the API for an iOS app at some stage in the future, maybe learning some swift along the way.

The Conclusion

Overall I feel this has been a good first step into breathing some life into the Saintfield website. My next steps will be deciding what to do for our live stream and creating the necessary tools so that the streaming team can start and stop streams simply.

The source code for the site can be found on my GitHub here


Comments