Skip to content

Latest commit

 

History

History
223 lines (157 loc) · 10.1 KB

README.md

File metadata and controls

223 lines (157 loc) · 10.1 KB
Raw

Welcome to Massage at Solid Gym

Responsive screenshot

MASSAGE AT SOLID GYM

Welcome to Massage at Solid gym. https://jaredslocker21.github.io/massage-at-solid-gym/index.html

Purpose

  • The basis for this website is inspired by my own registered business here is southern Sweden.

Goal

  • To attract a new client base.
  • Inform our visitors of What massage Therapy is, and where to find us.

Demographic

  • Our demographic base is broad but it is within a local setting.
    • Anyone
    • Athletes
    • Anyone suffering from occupational injuries that have repeditive motion and work.
    • Clients that seek post surgery Rehabilitation.

UX/UI

Users Experience

  • Users are welcome to experience a friction free, clean and easy to navigate website.

  • Easy to access navigation bar.

  • Short and clear descriptions and an easy form to fill out.

  • Returning clients will also be able to find contact inormation and directions easily.

  • This site will explain and answer all questions in short.

    • What Massage Therapy is?
    • Who benefits from it?
    • What types of massage they can receive?
    • Prices?
    • What to wear?
    • How to contact us and be contacted by us.

  • As a first time user:

    • I could navigate the website easily.
    • Fill in the Form
    • Find information easily

  • As a returning user:

    • I could find the directions and map easily.
    • For the future I will add a discount section and updates.

Users Interface

  • As a UI design my goal is to offer an attractive, interactive, clean and trustworthy website.
    • Responds well to both mobile and laptop viewing.
  • Simple to use and understand while, not too much content.
  • Initial frame concepts uses Balsamic wireframes.
  • Original Template was created by the Code Institute.

Balasmic Wireframs Balasmic Wireframs

Features

This website features 8 sections, and 1 external contact form page that are all responsive. We will discuss each feature below.

  • Navigation Bar
  • Logo. Massage Therapy at Solid Gym. The Logo is a link back to the main page.
  • The landing page image
  • Massage Therapy Section
  • A divider Image and call to action
  • Treatments Section
  • Contact Page (opens in a external tab)
  • Footer contains four social media links and a home icon/link back to the top of the page.

Current Features

  • Navigation Bar

    • First seen at the top of the website is our navigation bar with 4 responsive links. Home, Massage Therapy, Treatments and Contact Page. 3 of those are redirected to their respective section on the page and the contact form is redirects to a new tab that also contains the Navigation Bar.

    • The navigation bar is clear, easy to read and to understand for all users to navitgate the website. Aria Labels are also added to the links in the navigation bar to allow for better access to those in need.

  • Logo -The logo Massage at Solid Gym, connects the Navigation bar and main page image. It is also a link to redirect the user to the first page. a

  • The landing page image -The landing image is a beautiful image of a body in motion should reflect the connection between free movement and massage emphasised by the logo. An aria-label is also added for accessability. Photo Credit is not available- I am not the creator and ll credit is too them.

  • Massage Therapy Section

    • The Massage Therapy Section gives a brief and clear description of what Massage Therapy is. While also leading our reader on to our next Treatment section at the end of the paragraph. Emphasizing the three directions in therapies. Sports, Occupational and Rehabilitation therapy.

  • Divider Image

    • The divider image informs the visitor with a clear example of how massage therapy differs from a classical massage by it's presentation and adds to the previous Massage Therapy Definition through an image. It also contains a CTA (call to action) with a overlay text. photo credit: open licnesed Adobe Stock Images.

  • The Treatments Section

    • This section contains 3 clear descriptions, prices and more information about what to expect.
    • The images underlining each description gives the visitor an understanding of why we need massage when pain persists. All photos in this section are Open licensed Adobe Stock photos.

  • Contact Page

    • The link opens up in a new tab. It gives our visitors the same easy to Navigate header and Log. An image that reflects coomon injuries people have while needing a MAssage Therapist. A simple and clear form to fillout. **Our clients have very specific needs and all treatments are customized based on the persons health and medical history. All treatments are booked personally with your Therapist.
    • Sign- Up here at the top has an input that is clearly labeled and the form is functional. Each input has an aria-label for accessability.
    • Contact-Us closer to the bottom has an E-mail address, Phone numner an address and a map with that also links to an external larger map for precise directions.
    • Photo is an open licensed Adobe Stock Photo.

  • Footer

    • The footer contains 3 social media links that will open a new tab and a home tab that directs you back to the Head of the site.
    • These links create a good social presence to the public.
    • The footer is maintained in the contact page
    • All link Icons are taken from Font awesome.

Content

  • The content was written and composed by myself. Ideas and definitions were clarified in my massage therapy education.
  • The color scheme is relaying a clean and open feeling while the blue tones give are relaxing and trusting. Followed in accordance with Material.io color tool
  • Icons were taken Font Awesome
  • Fonts were taken from Google Fonts

color scheme screen shot

Media

-Photos: credits go to open licensed Adobe stock.

Features Left to Implement

  • As this will become/grow into something more dynamic. I would also like to add a reviews section a coupons, more options in my Sign-Up form.
  • As the company grows. I would also like to add a community outreach program that reaches those in need of more excersize and movement for those with linited mobility.

Testing

  • This website has passed all tests through Google Chromes Dev. Tool, 'Lighthouse'. It is responsive and shows promise.

  • I have tested the site on

  • Microsoft Edge
  • MAc OS
  • IPhone XR
  • Iphone Pro 12
  • Pixel 5
  • Samsung Galaxy
  • Ipod air
  • Ipod Mini
  • Sufrace Duo
  • Galaxy Fold
  • Samsung Galaxy A51/71
  • Nest Hub
  • Nest Hub Max
  • Mozilla Firefox.

Additional Testing on the Iphone 4?

iphone 4 image test iphone 4 image test iphone 4 image test iphone 4 image test

  • Google Chrome Dev. Tools Lighthouse Results

lighthouse results

Validator Testing

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

screenshot of no errors html

Technologies Used

  • Github and Gitpod Cloud Development Environments.
  • Google Chrome Dev Tools.
  • Balsamic Wire Frames
  • techsini.com that is a multi device website mock-up generator.

Unfixed Bugs

  • 24/4 As of now just some media queries before I submit.
  • 26/4 Ongoing MQ issues had a response by a fellow peer while reading my readme file. And help ensued. Yes.
  • 28/4 Sizing on Treatment photos shows even margins but not 100% of the time. Mobile looks fine.

treatment image

Deployment

  • The site was deployed to GitHub pages. The steps to deploy are as follows:
    • In the GitHub repository, navigate to the Settings tab
    • From the source section drop-down menu, select the Master Branch
    • Once the master 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://jaredslocker21.github.io/massage-at-solid-gym/index.html

Credits

  • Code: Some of the code language, layout, and structure of the webisite are examples taken from the love running walkthrough project and the coders coffee.
  • Photos: credits go to open licensed Adobe stock. https://stock.adobe.com/
  • The submit button was inpired by: https://freefrontend.com/css-submit-buttons/
  • Sign-Up form was inspired by the Love running walk through and http://w3schools.com
  • Help and comradary is super important and I'd like to Credit Lauren Nicole and Mats Simonsson for inspiration and encouragement!
  • My mentor Akshat Garg for the valuable information needed.
  • W3 schools for helping answering question.
  • Stack overflow.
  • Code Institute for giving me the opportunity to grow.

Current Ideas

  • finding out about git diff, git pull and git status really helped me see what I was looking at.
  • rem for all fonts, make all h2 font sizes the same and all of the p one size to make everything consistent
  • flex box and flex positioning cool.
  • Voice recognition research has intrigued me. 26/4
  • paper sticky notes
  • The read me defaults with a table of contents that sticks. :)
  • I did clone to VS and Git desktop.