To open links in a new tab:
MAC : 
+ 'click'
Windows / Linux : 
+ 'click'
This website was undertaken as my submission for the User Centric Frontend Development Milestone Project (MS1).
The Kilmacow Community Clean-up (KCC) page was developed to provide visitors with an overview of the events and activities carried out by the KCC. The KCC group currently advertises their events and activities in a local newsletter (digital and print) and through their social media channels. Recently KCC members have raised concerns over attendance figures at their events. It was identified that the decrease was due to previous attendees not having access to information about dates and times of events, as many of them were not on social media. A website was proposed to solve this issue. The KCC outlined simplicity and accessibility to be the core features of the website. The website would need to work on both mobile and desktop as the age of members ranged from 5 years old to 80 years old.
-
"I would like to view information about the KCC and possibly follow the group on a social media platform"
-
"I would like to see photos of previous events / activities"
-
"I would like to subscribe to a newsletter or mailing list that could inform me of upcoming events / activities"
-
"I would like to see if any events have been added / updated since my last visit"
-
"I would like to contact the KCC group about getting involved"
- "I want to contact the KCC to suggest local areas that require attention and to suggest future activities"
-
Encourage more community members to events and activities by providing visitors with information about upcoming events and activities.
-
Clean UI / UX for simple navigation. Visitors are from a traditionally non-web-savvy demographic.
-
Communicate effectively the importance of 'Pride of Place' and the goals of the KCC
-
Enable visitors to find information on upcoming community events
-
Allow visitors to easily contact group admin about possible future events and report areas that need attention (cleaning, planting, painting)
-
Easy to navigate website
-
Increase newsletter subscribers and social media followers
- The client has requested a 'basic' brochure style static website with a clean uncluttered layout.
- The client has requested I take full ownership of the development and maintenance of the site.
- As my coding skills develop the future features will be added to the site.
The website is a single page website. Upon navigating to the site, the visitor will be greeted with a landing page style section, followed by four content sections. These content sections include: About section, Events Section, Gallery section and Contact section, with a footer placed at the bottom of the website.
The homepage section of the site contains a full width hero image, with welcome text and quick navigation buttons in the foreground, one that leads directly to the About section and one that leads directly to the Contact section. This will allow returning and frequent visitors to navigate quickly to the contact section if they wish to contact the group without navigating through content they have seen previously. During discussions with the client, they identified websites that they found aesthetically pleasing, mentioning specifically the use of a hero image to grab visitor’s attention immediately, especially first-time visitors.
The about section contains a block of text describing the Kilmacow Community Clean-up Group. The client hopes this text will encourage new users to sign up for the newsletter or follow the group on one of it’s social media channels. The Kilmacow Community Clean-up Group also hopes the message this text conveys reinforces the importance of community inclusion and ‘Pride of Place’. This section will also include a large image, with the intention of ‘breaking’ up the section of text and providing a splash of colour to the section.
The Events section will contain a block of text similar to the About section, but this text will outline the events and activities that are organised by the KCC. It is hoped that the message conveyed in this section will encourage new and returning visitors to attend one of the events or activities organised by the KCC. The events section will also contain cards, initially outlining overview information about upcoming events, such as meeting location, time and invitees. The overview cards can be expanded to display more in-depth information.
The Gallery section will contain a Bootstrap carousel that is visible on desktop & large tablet screens. The carousel will auto rotate displaying photos provided by the KCC. On smaller mobile screens the carousel will be hidden and a static image gallery will be in it's place.
The Contact section contains a dual-purpose form, it can be used as a method of contacting the KCC, but also it includes a tick box for new and returning visitors to sign up for the KCC newsletter. The form will allow visitors include their name and email address, a text area will provide a method for visitors to include a personalised message. The contact section also includes the contact details for the KCC, such as email address, postal address and contact number. The website footer sits below the contact section, this includes a copyright message and the year.
Balsamiq Wireframes was used to wireframe the website.
#00202a is the main font colour. The client requested the text colour in the logo be used, however, the logo font colour did not provide enough contrast against the white background. #00202a is half way between black and the logo font colour.
The client requested a clean colour scheme on the website. White was chosen as the predominant colour with highlights provided by shadows and hints of colours taken from the client's logo. The main colours of the logo are:
The font used throughout the website is Atkinson Hyperlegible, with Sans-Serif used as a fallback. The font weight and font size css attributes are used with the font for emphasis and hierarchy. Atkinson Hyperlegible was chosen, as it focuses on letterform distinction to increase character recognition, ultimately improving readability. You can find out more here
All images for the website were provided by The Kilmacow Community Clean-up Group. A new logo was created for the website as the existing logo did not work for web or print. I gave the KCC group access to my Adobe Stock account, so they could select some stock photos if required. The group found a logo they liked and I modified it to suit their requirements. The licence for the logo is available here.
- Responsive Single Page Website built with HTML, CSS and Bootstrap
- Fixed navigation bar for easy navigation as per client’s request
- Call to action button on homepage for quick navigation to about and contact sections
- Social media links present throughout, without being too obtrusive
- Expandable and collapsible event cards
- Responsive image gallery
- Contact form with HTML validation, radio button is also present for subscribe to newsletter function
- The navbar should be easily accessible and fixed to the top of the browser across all webpage sections
- Navbar should display KCC logo on the left and links to page sections (menu items) on the right
- The logo should appear clear across all browser sizes
- The menu items should change size and colour when hovered over on devices with a mouse
- The menu items should collapse into a dropdown menu, accessible through a hamburger icon on mobile devices
- The menu links should direct the user to the relevant page section
- The home section should have a hero image spanning the width of the viewport
- The hero image should be responsive across all browsers
- The home text should be legible across all browser sizes
- Two call to action buttons should sit on top of the hero image, one that navigates to the about section when clicked and one that navigates to the contact section when clicked
- The About section is accessed by clicking the cta button on the home section, by clicking the relevant link on the navbar or by scrolling directly to it
- The navbar should appear fixed to the top of this section
- Text containing information about the KCC should sit on the left of the page with a large image to right to add colour and break up the text. The image should wrap below the text on mobile devices.
- The Events section is accessed by clicking the relevant link on the navbar or by scrolling directly to it
- The navbar should appear fixed to the top of this section
- Text containing information about the KCC events should sit on the left of the page with event cards on the right. The event cards should wrap below the text on mobile devices.
- The text should contain inline links to external websites and social media, opening these links in new browser tabs.
- The event cards should expand and collapse when the ‘click for more info’ text or icons are clicked
- The Gallery section is accessed by clicking the relevant link on the navbar or by scrolling directly to it
- The navbar should appear fixed to the top of this section
- On mobile devices the gallery will appear as a static collection of images
- On larger tablets and on desktops the gallery images will be contained in carousel. The carousel can be scrolled by clicking the navigation arrows either side of the displayed images. Upon initial navigation to the gallery the carousel will begin auto scrolling through the images. The carousel indicators should highlight which image in the collection is currently visible
- The Contact section is accessed by clicking the cta button on the home section, by clicking the relevant link on the navbar or by scrolling directly to it
- The navbar should appear fixed to the top of this section
- The Contact sections has two subsections.
- The first section displays contact information for the KCC including postal address, email address, phone number and social media links. These links should open in new browser tabs.
- The second section should contain a contact form where visitors can contact the KCC and also use the form to subscribe to the newsletter.
- The form contains name and email inputs that are required, a textarea for general comments or messages and a radio button to subscribe to the newsletter.
- The submit button will not be functional until the backend code for the form is implemented, it is outside the scope of this project
- The footer should sit below the contact section
- It should contain a basic copyright notification
- Add to calendar button on events cards
- Contact form backend
- Cookie notification pop up and privacy policy
The following devices / browsers were used by me for testing. Friends & family used a variety of devices to view / test the site.
- Desktop
- Firefox 82
- Chrome 87
- Edge 87
- Android
- Chrome 87
- Chrome Dev 88
- Chrome Canary 89
- Firefox 84
- DDG 5.72
- iOS
- Safari 13
- Safari 14
- Safari 15
I also used LambdaTest to simulate cross browser Testing
Testing was seperated into 2 categories; user testing & functional testing
Testing was carried out on the site using the following parameters: UX & Navigation, Responsiveness, Accessibility, Scope / Goals and Validation.
| Success Criteria | Test Method | Result | Comment | Solution |
|---|---|---|---|---|
| All links navigate to correct target | Manual checking of links | PASS | - | |
| External site links open in new tab | Manual checking of links | PASS | - | |
| Website is easy to navigate | Friends & family visited the website and reported any potential navigation issues | PASS with recommendations | Centre navigation links on mobile browser | Updated CSS to accommodate user requests |
| Success Criteria | Test Method | Result | Comment | Solution |
|---|---|---|---|---|
| Website content displays appropriately across multiple browsers. Images scale correctly, Containers wrap correctly, Fonts scale correctly | Manual testing on multiple devices and browsers. Friends & family visited the website and reported any potential responsiveness issues.Manual testing on multiple devices and browsers. Also used LambdaTest & Google Mobile Friendly Test | PASS | Navbar shaking issue | Changed navbar css to fixed-top. Ref: Stackoverflow Topic |
| Success Criteria | Test Method | Result | Comment | Solution |
|---|---|---|---|---|
| Colour Contrast | Colours checked on Color a11y | PASS | Submit button displayed low contrast errors. | Updated submit button CSS |
| Readability | Friends & family visited the website and reported any potential readability issues. Website content checked for spelling and grammar issues, MS Word | PASS | Justify text, although looked visually appealing made the text blocks difficult to read | Update text justification to accommodate testers recommendations |
| Overall accessibility tests | Tested on Wave Accessiblity testing | |||
| Success Criteria | Test Method | Result | Comment | Solution |
|---|---|---|---|---|
| Form controls: Required form controls in place | Manual Testing | PASS | - | - |
| Colour scheme matches client’s requirements | Client Testing | PASS | - | - |
| The website language and message matches what the client requested | Client proof read the content | PASS | - | - |
| User stories fulfilled | Family and friends visited the website and provided feedback. | PASS | - | - |
| Overall Client Satisfaction | Client Feedback | PASS | The client commented that the website went above and beyond what they expected. | - |
| Success Criteria | Test Method | Result | Comment | Solution |
|---|---|---|---|---|
| HTML code validation | W3C HTML Validator | PASS | - | - |
| CSS code validation | W3C CSS Validator | PASS | - | - |
| Success Criteria | Method | Result | Device |
|---|---|---|---|
| Navbar fixed to top of browser across all sections | Scroll, navigate through website | PASS | Desktop & Mobile |
| Navbar logo links to index.html | Logo clicked | PASS | Desktop & Mobile |
| Navbar links change colour size when hover | Mouse hovered over links | PASS | Desktop |
| Navbar links navigate to the relevant page section | Each link clicked | PASS | Desktop & Mobile |
| Navbar links collapse to dropdown menu | Page opened on mobile device / browser window resized | PASS | Mobile |
| Dropdown menu appears / hides | Click hamburger / close menu icon link | PASS | Mobile |
| Dropdown closes on each link click | Click navbar links | PASS | Mobile |
| Success Criteria | Method | Result | Device |
|---|---|---|---|
| Call to action buttons navigate to the relevant page section | Each button Clicked | PASS | Desktop & Mobile |
| Success Criteria | Method | Result | Device |
|---|---|---|---|
| Links open in new browser window / tab | Click links | PASS | Desktop & Mobile |
| Success Criteria | Method | Result | Device |
|---|---|---|---|
| Links open in new browser window / tab | Click links | PASS | Desktop & Mobile |
| Event cards expand and collapse | Click event cards | PASS | Desktop & Mobile |
| Success Criteria | Method | Result | Device |
|---|---|---|---|
| Carousel auto rotates | Navigate to section and wait | PASS | Desktop |
| Carousel controls change picture | Click each carousel control | PASS | Desktop |
| Carousel indicators identify image position in gallery | Click carousel controls / wait for carousel to change | PASS | Desktop |
| Carousel unavailable on mobile | Resize browser / open section on mobile device | PASS | Mobile |
| Success Criteria | Method | Result | Device |
|---|---|---|---|
| Logo links to index.html | Logo clicked | PASS | Desktop & Mobile |
| Phone link opens App | Phone link clicked | PASS | Desktop & Mobile |
| Email link opens App | Email link clicked | PASS | Desktop & Mobile |
| Social links open in new tab | Social links clicked | PASS | Desktop & Mobile |
| Contact Form Tests | - | - | - |
| Name field required; form should issue warning | Leave name field blank and click submit | PASS | Desktop & Mobile |
| Email field required; form should issue warning | Leave email field blank and click submit | PASS | Desktop & Mobile |
| Email must be in email format, ie. Contain @ symbol and domain address | Enter email without @ symbol, Enter email with @ symbol without domain | PASS | Desktop & Mobile |
| Radio button highlights | Check radio button | PASS | Desktop & Mobile |
Some open issues in regards to ARIA and a11y are present throughout the site. I aim to have these issues fixed once my knowledge and skills improve. Screenshots of test results are available here. The submit on the contact form also does not work. This will be added once the backend for the site is coded.
- HTML5
- CSS3
- Bootstrap - linked via CDN
- Atkinson Hyperlegible - self hosted as no CDN avaialble at time of publishing
- Font Awesome - linked via CDN
- Gitpod IDE - IDE
- Git - version control system
- Github - repository storage
- Chrome DevTools - used for debugging code
- Adobe Photoshop - image resizing & editing
- Adobe Illustrator - used for logo editing
- Balsamiq Wireframes - used for wireframing website
- Typora - help with markdown writing & editing
- Microsoft Word - content wrtiting
- Tiny PNG / JPG - compressing images
- Am I Responsive - viewport image for README
- CSS Matic - css box shadow generator
- Coolors - colour pallette genrator, used in README surface section
- Validator - HTML code validator
- Jigsaw - CSS code validator
- GTmetrix - Site performance testing
- WAVE - Site accessibility testing
- Online Spell Check - README spell checker
- LambdaTest - cross browser testing
The project was created using the Code Institute workspace template, available here. To use this template:
- Click use this template
- Name the new repository and select ‘Create repository from template’
- Navigate to the newly created repository and select Gitpod*
- The template workspace should now open in Gitpod
*The Gitpod browser extension must be installed for this option to become visible. Gitpod provide a browser extension for Chrome here and for Firefox here
This website is hosted on Github Pages. To deploy the live site, I followed these steps:
- Navigate to the Github repository
- Click the ‘Settings’ tab
- In the Github pages section, select Master Branch as the source and click save.
- The site URL is now displayed*
*The site can take a period of time to go live
To run this project locally there are two options through Github (clone or download). To clone or download, navigate to the repository, click the Code button and select Clone or Download:
- Clone: This option provides you with a URL that can be used in your local IDE. Use the 'git clone' command followed by the provided URL to create a clone of the project locally.
- Download: This option provides a .zip file that can be downloaded, extracted and deployed to a local webserver or edited in your IDE.
All text content was written by myself with approval from The Kilmacow Community Clean-up Group.
All images for the website were provided by The Kilmacow Community Clean-up Group. A new logo was created for the website as the existing logo did not work for web or print. I gave the KCC group access to my Adobe Stock account, so they could select some stock photos if required. The group found a logo they liked and I modified it to suit their requirements. The licence for the logo is available here.
- Orel Eliyahu 04/04/2016 stackoverflow - close dropdown menu when link is clicked.
- mouse0270 bootsnip - The layout of the 'event cards' was inspired by mouse0270, however the code was not responsive so I replicated similar cards using bootstrap and custom code
- boostrap documentation - gallery carousel layout
- Jim Morel CI-MS1-Explore-Ireland - inspiration for gallery section
- Unison Tek 12/06/18 stackoverflow - change default carousel indicators to use fontawesome icons
- Theodore K. 09/08/2016 stackoverflow - multi-colour border
- John D. Jameson 26/07/2018 css-tricks - styling links on the web
- Scott Vinkle 13/04/2018 Medium - a11y tips for screen readers
I would like to thank my mentors Seun Owonikoko & Rohit Sharma for their advice and guidance I would also like to give a special mention to past pupils / current tutors for their invaluable knowledge and willingness to share it on slack and on the video conferences they hosted - Jim Morel, Anna Greaves