- Bell ringing, and campanology, is a hobby that is struggling with dwindling numbers, and yet offers an experience that is surprisingly welcoming and accommodating to a range of people, particularly those who may not fit in with typical sporting or other physically demanding activities.
The activity would benefit from a central website that would offer a basic introduction to the hobby, some key information about it historically, and a contact form that could provide information about opportunities in an individual's area.
The central audience of this website is people who are interested in finding out how to take up bell ringing as a hobby. The user goal of the website would be to find out who to contact in their local area to find out information about local ringing groups.
The Central Council of Church Bell Ringers (CCCBR) is the primary business relating to the website. The business goal of the website would be to provide a gateway for new recruits to try bell ringing as a hobby, and eventually build up recruitment numbers.
- Large, intuitive and easy navigation that is consistent throughout the site, so I know how to get the key information I want, and how to find out more if I want (through links to external sites, or a contact email address or phone number/ form).
- Some basic information on the subject of bell ringing, such as key terms to know if I go to an introductory practice night in a local tower.
- An idea of the theory and study of bell ringing, to see what I can expect to have to study.
- Information/ ideas of what the ringing community does socially as well as ring bells, to see if it is a social scene I would be interested in.
- A basic background into the history of ringing and how it has shaped communities.
- It to provide an easily accessible hub for people to potentially find out about, and link with, their local ringing networks, which could ultimately increase the awareness of bell ringing as a bobby and increase the number of ringers.
- It to be easily accessible to a range of ages and demographics – potentially children aged 11-16, university students, or older individuals in retirement.
- It to have a clear, intuitive UI and provide a simple experience so people do not get overwhelmed with information.
- The two main colours used are #230007 and #DDB967 (#7B3335 used as a darker shade of the second for hover effect on a button). These were chosen as they provided strong contrasts for the text and images to be seen clearly, but were not obtrusive and would not detract from the main purpose of the website. Originally I thought of simply using a light grey #696969 and white, though this did not have enough visual appeal.
- The Fira Sans font is the main font used throughout the whole website with Sans Serif as the fallback font in case for any reason the font isn't being imported into the site correctly. Fira Sans is a clean font that is simple and easily legible, but also classy; this was chosen as it has a professional and minimalist feel, without feeling overly showy.
- The large, background hero image was chosen to appeal to the key audiences (see user stories). A variety of images showing the activity of bell ringing and also the social side was chosen for the gallery, again to appeal to a variety of people in the target audiences.
Balsamiq was used to design the wireframes for this project. There were the following amendments made to the original wireframes that resulted in the completed project:
- Home Page - an extra heading, with link to contact.html, was added, to make the goal of the website easier for users to complete. Also, an animation of a bell being rung was added, to give a basic idea how the mechanics of a church bell work.
- Gallery Page - for desktops, columns were split into three, to give a satisfying sense of symmetry, and dropped to two columns for mobile. This made the organisation of the images less chaotic and busy.
- About Page - the layout was changed to simply timeline on left, image on right - having a split timeline and two images in a grid, as shown in the desktop wireframe, was needlessly complex and did not look right. The final design is less cluttered, and looks tidy and clean. Also an audio clip was added for more variety of media.
- Home Page for Desktop
- Gallery Page for Desktop
- About Page for Desktop
- Contact Page for Desktop
- Home Page for Mobile
- Gallery Page for Mobile
- About Page for Mobile
- Contact Page for Mobile
- A simple and clean navbar that underlines the page the user is on, and is responsive.
- A navbar that shrinks down for mobile devices that shows the page the user is on, with a dropdown menu to guide navigation when needed.
- A footer that includes links to social media sites (n.b. once developed these could link to ringing-specific pages; for now, they only go to the social media home pages).
- A large hero image, to give a sense of scale of the buildings that the user could be ringing in; this image is dimmed to ensure the headlines are bold, eye-catching and easy to read.
- A small animation in the bottom right to show the logistics of how a bell is rung.
- A series of images that show a range of activities that ringers engage in, and background to ringing (such as a bell being forged).
- A timeline with several interesting moments in the history of ringing.
- An image of a bell being forged, showing the traditional way of making a bell.
- Above the image, an audio clip of the method Plain Bob Minor, on 6 bells.
- A basic form for users to give information, for an administrator to then respond to with details of the local ringing community. (n.b. Currently the 'submit' button should go to 'completed_form.html'; however, as I have not yet learned JavaScript, it does not link.)
- When the form is completed, on the final website, the user should be taken to a screen with a basic message thanking them for their interest, and with a link back to the home page.
- A section on key terms of ringing, and basic theory/ campanology could be useful, to introduce potential recruits to the theories/ methods they would be expected to learn once they can handle a bell. This would require research into what would be deemed useful knowledge as an introduction, and could include:
- Key terms
- Basic methods
- Audio clips of different methods
- The ‘about’ section which includes several key dates of ringing could be expanded if it was decided that it offered enough value to the website’s goals.
- Links to other websites of interest, such as 'Ringer's World'. (n.b. It would need to be researched to see if this would be information overload to a potential recruit.)
- Motorola G6 – embedded camera:
- The developer’s camera was used to take various photos of the local church to use as the Hero Image and various photos in the Gallery page of the website.
- Git was used to handle version control.
- GitHub was used to store and share project code.
- Am I Responsive was used to create images in this Readme file of each page displayed on different screen sizes.
- The Windows Snipping Tool for images in this Readme of smaller sections of website pages.
- Balsamiq was used to create the wireframes during the design process.
- HTML5
- CSS3
- Bootstrap:
- used to assist with the responsiveness and styling of the website.
- Hover pseudoclass in CSS:
- Hover was used for each item in the navbar to add an underline element while being hovered over; this would add an element of responsiveness to the user whilst using the site.
- Google Fonts:
- Google fonts were used to import the Fira Sans font into the style.css file which is used on all pages throughout the project.
- Font Awesome:
- Font Awesome was used on all pages in the footer to make the links to social media more aesthetically pleasing, and to help improve the UX.
- The W3C CSS Validation Service - Jigsaw was used for CSS code in this project, which the code passed with no errors or warnings.
- The W3C Markup Validation Service was used for HTML code in this project, and the code passed with no errors or warnings.
- In Chrome Developer Tools, Lighthouse reports were generated to see if there were any ways that the website could be optimised or enhanced.
- Large, intuitive and easy navigation that is consistent throughout the site, so I know how to get the key information I want, and how to find out more if I want (through links to external sites, or a contact email address or phone number/ form).
- A simple, clear navigation bar has been created with social links on the bottom of each page to clearly indicate to the user what lies where. There is a form to fill in that a user can submit to receive information by email about local towers/ info.
- Some basic information on the subject of bell ringing, such as key terms to know if I go to an introductory practice night in a local tower.
- This is something that has been left as a feature left to implement, as the research that would be involved (e.g. working out what level of ringing would be appropriate to pique a potential recruit’s interest, without intimidating them) is beyond the scale of this project.
- Information/ ideas of what the ringing community does socially as well as ring bells, to see if it is a social scene I would be interested in.
- A gallery of photos demonstrating the activities bell ringers take part in (meals out, drinks, group exercise) has been included to demonstrate what the social side of ringing can offer.
- A basic background into the history of ringing and how it has shaped communities.
- A basic page with some key dates and facts has been included to given some background to how long ringing has been part of communities for. An expansion of this section could be another opportunity to develop the website.
- It to provide an easily accessible hub for people to potentially find out about, and link with, their local ringing networks, which could ultimately increase the awareness of bell ringing as a hobby and increase the number of ringers.
- When designing the website, it was kept in mind that the most likely people looking at it probably were those already thinking of taking up ringing as a hobby (often it is taken up through contact with friends or family, or word-of-mouth). Therefore, it was important not to include too much superfluous information which would possibly put people off; rather, a clean, simple site was designed with the ability to take people’s contact email via a form and email back key information.
- It to be easily accessible to a range of ages and demographics – potentially children aged 11-16, university students, or older individuals in retirement.
- A basic, simple site was created, not one that was overly brash or ‘noisy’ but rather one that had a simple colour scheme and a minimalist tone, without too much clutter. In this way it was designed to appeal to a wide age range.
- It to have a clear, intuitive UI and provide a simple experience so people do not get overwhelmed with information.
- Again, a key feature was simplicity, ease-of-use and responsiveness on a range of devices so as not to prevent someone accessing or using the site purely because of their device.
-
Navigation bar:
- From home page on the desktop view, click on each menu item and verify it links to the correct page.
- Reduce size of screen in Chrome Dev Tools and confirm that it reduces to a dropdown menu. (n.b. Please see bug section regarding this.)
- From home page on the mobile view, click on each menu item and verify it links to the correct page.
- From each page, click on each menu item and return to verify that the links work.
-
Footer links:
- On each page, verify that links take user in a new tab to the respecting social media site (n.b. for future scope of this project, these social media links may link to ringing-specific pages. For now, they just go to the home pages of the respective social media site.)
-
Home Page:
- Confirm that hero image displays correctly (full width, full height, opaque overlay matches hero image size).
- Resize screen to confirm that jumbotron is viewable in all Chrome Dev Tools media formats, and the text is an appropriate size for the media.
- Due to the hero image being behind an opaque background that serves to dim it, by definition I found that an alt attribute would not work, as the image is actually a background image in style.css. It seems there is a debate about whether background images actually need alt attributes - according to the W3 Markup Validation Service, one was not needed here, and according to this article by Christian Heilmann, they are not necessary as they only add aesthetic value.
-
Gallery:
- Confirm that images showing are all same size and line up correctly. There should be no overlap of pictures at any screen size, and no differently-sized images. (n.b. Please see bug section regarding this.)
-
About Page:
- Confirm that timeline scales appropriately for device, writing is an appropriate size (legible, but not huge).
- Confirm that image on right side of page scales appropriately in relation to timeline.
-
Contact Page:
- Click submit, and confirm that the form requires all fields to be filled in. Fill in one field at a time and click submit to ensure that they are all required.
- Fill in all information in form and click submit. (n.b. see bug section.)
- Although I had added the z-index attribute to the class 'dropdown-item' in style.css, it was not having an effect, and the menu was still dropping behind the jumbotron text.
- The solution was use Dev Tools to check each element in the screen and work out what required the z-index attribute adding; it turned out that it was actually the 'background-to-nav' class. Once this had a higher z-index value than the jumbotron, it was fixed.
- In gallery.html, originally the coluns of images did not have a gap between them, and because the images were different sizes, they all were staggered slightly, which gave an unsatisfying and jagged effect.
- To solve this, I tried changing the width and height to various percentages for each picture, but it did not work. The way I resolved the issue was to amend the actual size of the images themselves to make them all the same.
- In README.md, I found that once the website had been made live, the README.md image links to the wireframes and Lighthouse did not work.
- To solve this, I researched the cause, which was that the links were for the working page in Gitpod; once it was live, they did not work, as the link was not to the image saved in GutHub. I copied the image URL from GitHub, pasted this into the link in the README.md file, and they worked.
- Sometimes on unconventional monitor ratios, the jumbotron on the Homepage may have the bottom cut off. I have tried to make this as rare as possible by investigating each device in Chrome Dev Tools to check that all the information fits appropriately, which it does.
- The submit button when completing the form on the Contact page does not link to the completed_form.html page as it should. Unfortunately I have not studied JavaScript yet, so this feature is beyond the scope of this project.
- All pages were viewed on all devides and orientations available on Chrome Developer Tools.
- The project was deployed to Github Pages using the following steps:
- Log in to Github and navigate to the Github repository
- Under the repository name, click 'Settings'.
- In the left sidebar, click 'Pages'.
- Under 'Github Pages', click the 'None' dropdown arrow, and choose the Master branch.
- Click Save.
- The site is then ready to be published at the link.
- To clone this project into Gitpod you will need:
- A Github account. Create a Github account here
- Google Chrome browser.
- Then, follow these steps:
- Install the Gitpod Browser Extensions for Chrome
- Restart your browser.
- Log into Gitpod with your account.
- Navigate to the Project Github repository
- Click the green 'Gitpod' button. This will trigger a new Gitpod workspace, created from the code in Github, where you can work locally.
- Information for the timeline was taken from https://www.bellringing.org/, which has a much more comprehensive overview of ringing as a whole, and is well worth a visit.
- Images of bell ropes, bell casting and etching of ringers were taken from www.bio.utexas.edu/faculty/bryant/
- Images of people laughing, eating and drinking were taken from www.pexels.com
- Images of a church were taken by myself.
- Audio of Plain Bob Minor was taken from Wikipedia: https://en.wikipedia.org/wiki/Change_ringing#Plain_Bob
- The opaque overlay code was taken from W3Schools and heavily adapted.
- The gallery layout was inspired by the Code:Institute instructor Matt Rudge's 'Love Running' masonry gallery; the code was then heavily adapted.
- The Readme file's structure was based on, and adapted from, Code: Institute's Anna Greave's Readme for her website, viewable here.
- The deployment instructions were based on those from the GitHub docs, viewable here.
- Special thanks to my mentor Gerry Mcbride for patiently going through my code and correcting where necessary, giving helpful ideas and direction, and keeping me informed what is expected of my website and code in industry.
- The contents of this website are for educational purposes only.