A Certain Church | My Site 1

Features

Genesis

It all started on a Sunday afternoon, when I visited the new website for the Calgary Church of Christ to make an online donation. Upon typing in the URL and clicking enter, I arrived upon a no-nonsense website with three webpages.

To be fair, the existing website served my purpose well enough. It was a small enough affair, possibly created from a Wordpress template, and I didn't have any trouble finding the donation page given its prominent position on the otherwise bare navigation bar.

On the flip side, however, I felt that the website design did not adequately capture the colourful, all-inclusive spirit of the institution it represents. I felt that there should be more to the online representation of a church as liberal, welcoming, and hope-giving, than a homepage that features little more than a stodgy cutout of a podium and a non-functional "Subscribe to Our Newsletter" button. I discovered a CTA button leading to the church's YouTube Channel, but found myself at pains to understand why the creators hadn't bothered to embed the videos onto the website itself. Quite likely, the template didn't allow for that.

I eventually concluded that the website lacked even the most basic features one may come to expect from a platform of the sort. While it did fulfil a purpose, there were several others that remained unfulfilled. So, could I build something better than this?

What came Next

I spoke to a few prominent congregation members to understand if they desired an improved church website, and if that's the case, what would they expect in terms of enhancements. As a result, I was able to put together a list of a general objectives that would help me figure out the way ahead.

Website Objectives

Ensure that visitors to the website get a true picture of everything that the institution represents, and information and contact details related to it.
Facilitate an online platform where users can watch live proceedings at the church remotely, and access its YouTube page for viewing archived videos if required.
Facilitate various ways to easily donate money to the church remotely.
Provide a dedicated space for congregation members to catch up on the latest church news, and get updates on forthcoming events.
Facilitate a gallery for photographs of church services, past events, etc.

User Objectives

Enhance user participation even if they are unable to physically present themselves at the church.
Provide users with a platform to access church news and updates, instead of relying on bulk emails that may end up in the spam folder.
Provide users with a website that's more than just another online platform that seeks donations from users.

Here, as the designer, I had an objective as well. As somebody who was still in the process of learning web development, I wanted to create a completely responsive website that had all requisite features but was still simple enough to work solely on HTML and CSS.

The Structure

Taking the objectives into consideration, I decided that the website I was creating should mantorily have the following features.

A homepage section that provides information on church news and activities.
A page dedicated to helping users donate money to the church.
A video embed slot on the homepage through which people can attend services remotely.
An 'about' page providing information on the history of the church, as well as information on its pastor and staff members (something that will be of great use to those searching for a new place of worship).
A 'contact us' page that provides contact information of the church and its members.
A 'gallery' page featuring photographs images of past events and services.
A responsive interface that's compatible with different screen sizes, be it phone, computer or laptop.

Accordingly, the website would consist of:

Homepage

A hero section with a prominent image and a welcoming message.
A section showcasing a relevant Biblical quote.
A short description of the church with image. Clicking on this section takes one to the 'About Us' page.
Video section featuring an embed window showing live proceedings or footage of the previous sermon. This will also contain details such as church timings, and a link to the church's Youtube page.
Two sections featuring relevant Biblical quotes.
An 'Events and Announcements' section that will contain prayer requests, information on upcoming events, etc.
A responsive interface that's compatible with different screen sizes, be it phone, computer or laptop.

Donation page

A hero section with a prominent image.
A section showcasing a relevant Biblical quote.
A main section containing a short write-up, and detailing four ways for the visitor to contribute:

Direct Deposit
E-transfer
Send a cheque
Kindful.com (an online platform that facilitates donations to charitable organisations.

Gallery page

A hero section with a prominent image.
A section showcasing a relevant Biblical quote.
Image gallery (no slideshow/ just larger images that open in a separate window).

A hero section with a prominent image.
A section showcasing a relevant Biblical quote.
Image of the church with address and contact details.
Google Maps embed showing the location of the church.

The Skeleton

As I wanted to create a website that didn't tax my fledgling HTML-CSS skills, I tried to keep the designs as simple as possible. The wireframes were created on Figma.

Lo-Fi Wireframes

Prototype

Now that I had the wireframes, it was time to add some colour. I decided to source my main colour from the church logo, which is blue, followed by yellow as the secondary colour.

The fonts, I decided, should be classic without being boring. So I chose Montserrat, Cinzel and Proza Libre. The modified wireframes that I created on Figma looked like this.

Hi-Fi Wireframes

I had to finalize the functioning of the website too, so I have a better understanding of how to go about its development.

Sitemap

Development

This being only my second attempt at creating a website, I wanted to keep it simple. While writing the code on Phoenix Code, I restricted myself to using just HTML and CSS. More advanced features such as slideshows, which would require dabbling with Javascript, were avoided. I also used CSS media queries and breakpoints to ensure that the design was compatible across various screen sizes, including mobile phones. This is how it appears on various devices.

The website is compatible with different screen sizes, including that of desktop, laptop, tablet, and mobile phone.

I then uploaded my HTML script to an Amazon Web Services platform, and the website was ready to use! However, as I had only created the front-end of the website, any changes or updates to the website will have to be done through the code.

Conclusion

What would I do differently if I had to work on the project all over again? I don't know, because I am not finished with it just yet. I intend to test every new language I learn - Javascript, for instance - on this website, making it jazzier and more intuitive. 'A Certain Church' has played a big role in helping me finesse my HTML skills, so it's only fair that it should grow with me.