Mental health mindfulness website for a local mindfulness group called Mind & Body Care.
They have meet-ups 3 times a week to allow its members to talk about their challenges and to get advice on how mindfulness can help.
It is a great way to learn mindfulness, what it is, why to use it, and how it can help with stress, Sleep, Pain, Blood Pressure and many more…..
User Stories have been setup in Github Issues on the repository
- User Story 1: As a potential new member of the group, I want to be able to see the time, date, and where the group meets #1
- Acceptance Criteria: An area on the site that clearly displays the days and the times that the group meets
- User Story 2: As a potential new member of the group, I want to be able to see some of the topics that the group talks about #2
- Acceptance Criteria: An area on the site that highlights some of the topics that are covered by the group.
- User Story 3: As a new visitor to the site I want to be able to see what some of the benefits are from the group and mindfulness #3
- Acceptance Criteria: An an area on the site thot highlights the benefits of mindfulness and the benefits of the group
- User Story 4: As the organiser of the group, I should be able to receive feedback from visitors to the site with any queries that that have about the group so that I can then reply to them. They shouldn’t be able to contact me without providing a way for me to reply to them. #4
- Acceptance Criteria: The feedback should come through as an email with the visitors feedback/question and include an email address so that I can reply to them via email.
- User Story 5: As a potential new member I want to be able to contact the person that runs the group so I can ask any questions I may have #5
- Acceptance Criteria: I would like a form that lets me write in my questions / queries that can then be sent to the organiser of the group.
- User Story 6: As a member I would like a way to stay in touch with other members of the group outside of the group meetings #6
- Acceptance Criteria: This can be a link to a 3rd party app that allows groups of people to chat such as a slack server with channels for different areas of mindfulness
Wirfeframes have been created with the Balsamiq Wireframes program.
I have tried to design the website so that it looks clean and modern.
For the colours I've tried to pick ones that will suit the look and feel of the site and make it easy on the eye. I also went with blueish colours as I find blue to be a calming colour.
- Light Background = #F5F5F5
- Dark Background = #424242
- Mid Colour = #229799
- Light Text = #48CFCB
- Dark Text = #242424
These have been tested using the Adobe Color Accessibility tool and there are no conflicts.
Update: Checking the colours on the WCAG Contrast Checker and using Google PageSpeed Insights, both said that the mid color and light background colors didn't have enough contrast. So the colours have now changed to the following.
- Light Background = #fff;
- Mid Colour = #2f8283;
- Dark Background = #424242;
- Light Text = #48CFCB;
- Dark Text = #242424;
This new colour scheme passes Adobe Color blind safe test, WCAG Contrast Checker, and Google PageSpeed Insights Accessibility tests.
I have picked two fonts from Google fonts.
The images for the site have been selected from Pexels.com
The icons for the site have been selected from Font Awesome
The favicon was created using Favicon.io
I have not used any AI tools for the design of the website.
Github Issues has been used as part of the Agile process for logging user stories.
Github Projects kanban board has been used as part of the Agile process for keeping track of the user stories and their progress through the development process.
The navidagion has been implemented using a Bootstrap navbar without an un-ordered list. It is fixed top so that it stays at the top of the screen as you scroll down the page.
As it is a Bootstrap navbar it is responsive, with a hamburger menu on smaller screens. I altered it slightly so that when the responsive drop down menu was open the links are on the right hand side of the screen (same side as the menu button) rather than being on the opposit side of the screen as this seem to be an odd location form them.
To implement this there is a section that shows the time, date and location for each of the groups.
These two user stories have been combined when implementing as I fealt that the one area covered both user stories.
These two user stories have been combined when implementing as the same feature covers both of them.
The cantact form uses Bootstrap modal with Bootstrap form inside it, both altered to fit the site design and requirments.
This is essentially a private Facebook group for members. There is a section for this on the site with a link to Facebook.
Colours have been tested with all the utilites mentioned in the colours section above and finally checked with WCAG Contrast Checker plugin.
Performance, Accessibility, Best Practices, and SEO have been tested with Google PageSpeed
Mobile PageSpeed Scores
Desktop PageSpeed Scores
There are performance issues on both desktop and mobile but these are outside the scope of this project.
The site has been tested in Chrome, Safari, and Firefox on an iPad Mini, iPad Pro, Macbook Air and Mac Mini.
There was a glitch noticed with the modal that holds the contact form. When clicking submit, the form data was sent to the CodeInstitute form dump url. However, the modal stayed open on the page.
This was fixed by adding data-bs-dismiss="modal" to the submit button.
HTML validation has been done with Validator.w3.org and there are no errors or warnings.
CSS validation has been done with W3C CSS Validation and there are no errors or warnings.
The website has been deployed using Github pages and can be viewed at Mind and Body Care Website
To setup the delpoyment, once the repository has been cloned. Setup Github pages in the pages section of the repositories settings screen.
Once that is setup, every time you push to the repositiory, Github will automatically deploy the website.
No AI tool were directly used for the deployment apart from any that Github uses.
Overall I am happy with the design of the site and feel that it achieves what I set out to do. I tried to use Bootstrap classes ratehr than writing my own css and overall I think I managed to do a pretty good job at achieving that.
It was a fun challenge to use the Bootstrap classes as much as possible rather than my own.
Overall this was a fun little project. I enjoyed going through the process of doing all the agile bits within Github and also creating the readme file. Doing the two of them along side creating each section of the site was a good way to keep track of what stage the project was at.
- Bootstrap components such as the navbar and cards, the base code came from the Bootstrap website, based of their example code and then altered.
- Google fonts css snippets taken from the Google fonts site and then altered.
The only section that I'm not keen on is the footer section.
There are some performance issues that have been highlighted by the Google PageSpeed tester that could be improved upon. Such as:
- Webp versions of the images
- Different sizes of the images for different devices
The contact form currently sends the data to Code Institutes form dump. If the site was going to be used for real, this would need to be changed so that the data is sent somewhere useful.