Check Your Pecs!

Welcome to Check Your Pecs. - https://amzzy78.github.io/Check-your-pecs/

Check your Pecs is a website dedicated to raising awareness about breast cancer in men over 60. Our goal is to provide practical tips and advice on how to check yourself, how often and what you should do if you're worried about something. We have added a Resources page for further reading and support. The page consists of links to various websites, social media support groups and news paper articles from male survivors of breast cancer. The images on the website are to reflect males over 60 in a positive light and to show that taking care of your body no matter what age, is simply a good thing to do for yourself. Check Your Pecs is a fully responsive site.

User Experience (UX)

First Time Visitor Goals:

(a.) I want to seek information about male breast cancer.

(b.) I want the site to be easy to navigate to the specific sections that I want to read about.

(c.) I want to see clear instructions on how to check my breast for cancer.

(d.) I want to be able to sign up to receive a monthly reminder to check myself.

(e.) I want to be able to view the site in any reasonable browser so that I can use what I’m accustomed to.

(d.) I do not want to navigate through too much content to get to the point of my search.

(f.) I want to be given options to explore the topic further and to seek support groups.

Returning Visitor Goals:

(a.) I want to see reqular updates and content relevant to male breast cancer.

(b.) I want to share experience on male breast cancer

Wireframe

Features

1. Nav bar with links to the sites' goal on raising awareness of male breast cancer: check yourself, dropdown menu with more info, found something? and a sign up form to recieve a monthly reminder.

2. Footer bar with links to the site's pages: privacy policy and resources. There is also a button named Top to also link back to the top of the page.

3. Check Your Pecs text logo in the footer which links back to the top of the page.

4. Main content relative to spreading awareness about male breast cancer.

5. Responsive on all device sizes.

Existing Features

• Navigation Bar

  • Featured on all three pages, the fully responsive navigation bar includes links to the landing page content and a sign up form.
  • This section will allow the user to easily navigate to the specific information provided within the landing page.

• Signup Modal

  • The signup form is to encourage users to sign up for a monthly reminder to check themselves.

• The landing page hero image

  • The landing page hero section includes a photograph of a male's chest area with the sites text logo overlay.
  • Under the text logo there is a sentence to express the sites purpose.

Intro to sites purpose

• How to check yourself

  • This section will allow the user to see exactly how to check their breasts with the help of a diagram showing the steps.

• How often

  • This section will inform the user on how often to check themselves.
  • It will also encourage the user to sign up.

• Symptoms

  • This section will inform the user about the symptoms of male breast cancer.
  • There is also a diagram detailing the symptoms.

• Risk Factors

• This section explains some of the risk factors associated with male breast cancer.

• Prevention

  • This section contains information on how to possibly prevent the cancer.

• Why it's important

  • This section encourages the user to think about why it is important to check themselves.

• What you should do if you find something

  • This section offers suggestions on why it is important to check yourself.
  • There is also a link to the Rescources page encouraging the user to seek more information on the topic and links to the various social media support groups available.

Footer

• The footer contains the link to the Resources page and the Privacy Policy page.
• It also has the Check Your Pecs text which links back to the top of the page.
• Plus a button called Top to also take the user back to the top of the landing page.

Privacy Policy

• This page contains important information on the sites legal requirements.
• The image shows the page in mobile view with the nav bar menu expanded.

Resources

• The Resources page has all the important external links to relevant websites, social media support groups and newspaper articles on male breast cancer survivors stories.
• The image shows the page in mobile view with the footer features.

Design

---

• Typography

  • For the main title and subsequent headings we chose the "Government-Agent" font from 1001 Free Fonts.
  • This font is in a masculine style which we hope will appeal to our target audience.

• Colour Scheme

  • We thought about the colours and decided a masculine colour would be more suitable than the normal pink breast cancer colour schemes, because we're specifically raising awareness for male breast cancer.
  • A blog post from a reputable marketing company led us to the "masculine" colours we chose which we hope will help to make more men feel comfortable looking at this information.
  • One of the colours they listed is also a shade of pink which we felt helps to link back to the wider breast cancer awareness community.

Imagery

• We chose images to reflect males over 60 in a positive and healthy light.
• The diagram images are simple and to the point.

---

Features Left to Implement

• It would be nice to have a blog section where users that signed up could be enabled to share their experience to encourage others.

Testing

• We tested the website on a number of browsers and devices and all are working as intended.
• The responsive design allows for different screen sizes as proven by using Responsinator.
• (http://www.responsinator.com/?url=amzzy78.github.io%2FCheck-your-pecs%2F)

Validator Testing

• HTML
  • No errors were returned when passing through the official W3C validator

Landing Page

Privacy Policy page

Resources Page

• CSS

  • No errors were found when passing through the official (Jigsaw) validator

  

  Lighthouse Testing

  Landing Page

  Desktop

  

Mobile

Privacy Policy

Resources

Unfixed Bugs

• None found

Deployment

• The site was deployed to GitHub pages. The steps to deploy are as follows:
  • In the GitHub repository, navigate to the Settings tab
  • Then navigate to the Pages section
  • From the source section drop-down menu, select the Main Branch
  • Once the main branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.

The live link can be found here - https://amzzy78.github.io/Check-your-pecs/

---

Credits

Code

---

• https://www.w3schools.com/howto/howto_make_a_website.asp
• https://learn.codeinstitute.net/ci_program/diplomainsoftwaredevelopmentecommerce
• Instructions on how to implement form validation on the signup form was taken from a Code Institute Tutorial.
• Top nav code origin from https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp

Content

• The information in this website was gathered from the following sources
  • https://malebreastcancercoalition.org
  • https://www.drugs.com/cg/male-breast-self-exam.html
  • https://www.nhs.uk/conditions/breast-cancer-in-men/
  • https://www.nhs.uk/conditions/breast-cancer-in-men/symptoms/
  • https://www.healthline.com/health/estrogen-in-men#high-estrogen
  • https://www.mayoclinic.org/tests-procedures/breast-exam/about/pac-20393237
  • https://www.nationalbreastcancer.org/male-breast-cancer

Media

• The images used on the website are from:

• https://stock.adobe.com/ie/Library/urn:aaid:sc:EU:4461e351-b9c3-4027-bbf4-a7d3a62a4551?asset_id=239379632

• The diagrams used are from:

  • virtualmedicalcentre.com
  • karenhospital.org

• Hero image was optimised at https://imagecompressor.com/

• Colour scheme from https://hookagency.com/blog/masculine-color-schemes/

• Font https://www.1001freefonts.com/government-agent.font

• Hero image from https://pixabay.com/photos/naked-upper-body-fit-lifestyle-1847866/

  Technologies

  ---

  1. HTML
  2. CSS
  3. JavaScript

---