iFitness

I have created a virtual gym platform where anybody who is intrested in looking after their health and wellbeing able to access live or on demand workouts Anytime and Anywhere!

You can view the site here

Table Content

1 UX

• User Stories
• Design
• Wireframes

2 Features

3 Technology Used

• Languages Used
• Frameworks Libraries and Programs Used

4 Testing

• Testing User Stories
• Further Testing
  • Navigation Testing
  • Social Links
  • Video
  • Sign Up Form
  • Services
  • Team
  • Footer
• Bugs

5 Deployment

• GitHub Pages
• Forking to GitHub Respiratories
• Making a local clone

6 Credits

• Code
• Media
• Video
• Acknowledgment

UX

• User Stories

  • First Time Visitor Goals

    1. As a First Time Visitor I want understand the main purpose of the virtual gym and learn more about the organisation.
    2. As a First Time Visitor I want to easily navigate throughout the site to find schedule of workouts available.
    3. As a Frist Time Visitor I want to find social media platform where existing members are reviewing the live workout classes and their progress.

  • Returning Visitor Goals

    1. As a Returning Visitor I want to find, a sample of workout classes.
    2. As a Returning Visitor I want to find, a sign up form.
    3. As a Returning Visitor I want to find, a way to get in contact if I have any further queres.

  • Business Owner

    1. As a Business Owner, I want to provide a responsive platform for my custors.
    2. As a Business Owner, I want to gain more memberships.
    3. As a Business Owner, I want the users of the site to be able to contact me.

back to content

• Design

  • Color Scheme

    • Have used 3 main colors for the fitness site following the research done on colour pshycology here
      1. #072446 Dark Blue - Dependability, trust, and honesty
      2. #e1aa12 Orange - Optimism and positivity; a belief that failure doesn’t determine who you are
      3. #008089 Green - Relaxing and Meditative also represents healing to complement our Yoga Classes

  • Typorgaphy

    • Used Montseratt font for all the headings on the page and Releway for all the paragraphs text with fall back of Sans Serif incase of any reason the font is not imported correctly from Google Fonts library
    • Both of the fonts are easy to read and compliment each other.

  • Imagery

    • All the imagery is imported from Pixabay and Pixels online photo librarys.

  • Video

    • The video has been sorced from YouTube

back to content

• Wireframes

  • Desktop/Laptop view Wireframe - View

  • Tablet view Wireframe - View

  • Mobile view Wireframe - View

back to content

Features

• Responsive on all devices

• Responsive nav bar and sticky nav bar used from Bootstrap library, also includes a toggler class which makes the nav element compress into a hamburger button when viewed on smaller devices.

• A link to the home page (top of the page) has been provided via Logo of the site as well as Home button at the main menu.

• Each section of the page is easily accessible using sticky menu on the navigation bar.

• A sign up form used to enter the details of new members.

• A table element used to display the timetable of the workouts in the user-friendly way.

• Social Icons have been used to give user validation of the authethisity of the site, which open in the new browser tab to ensure the user has easy access and able to retur to the site.

• Interactive elements

Future Features

• A pop up window with a newsletter sign up will be introduced where the customers will recieve updates and weekly communications

• Contact us form could be introduced in the future to allow userfriendly approach to get in touch with the organisation.

• A library of recorded training sessions for existing members where they can pick and choose a workout they wish to complete.

• E-commerce page could be introduced where the customers are able to purchase relevant products and browese through them.

back to content

Technology Used

Language Used

• HTML5
• CSS3
• JavaScript from Bootstrap library for navigation bar

Frameworks Libraries and Programs Used

1. Bootstrap 4.3

• mainly for responsive grid system and used components to assist styling of the elements. also used Java Script components for responsive navigation bar and toggler class to create a humburger button on the mobile device. Bootstrap css library has been used to help with additional styling on the webpage.

2. CSS tricks

• used to create a full background image which will be recognised by all browsers.

3. Google Fonts:

   • Google fonts were used to import the 'Montseratt and Releway' fonts into the style.css file which is used on all pages throughout the project.

4. Font Awesome:

   • Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.

5. Git

   • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.

6. GitHub:

   • GitHub is used to store the projects code after being pushed from Git.

7. Balsamiq:

   • Balsamiq was used to create the wireframes during the design process.

8. TinyPng:

   • TinyPng was used to compress the size of the images and improve loading time.

back to content

Testing

The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.

• W3C Markup Validator

• W3C CSS Validator - Results

Testing User Stories from User Experience (UX) Section

• First Time Visitor Goals

• 1. As a First Time Visitor I want understand the main purpose of the virtual gym and learn more about the organisation.

  • The first time visitor is greated with a large hero-image of 2 people working out and an iconic logo on the left hand side of the navigation bar which clearly definds the the purpose of the site.

  • About section is right at the top of the page which tell the first time user the mission statement and the purpose of the site.

  • Team section has been created to let the user meet the coaches and get to know their background information before becoming a member of enrolling into free trial.

• 2. As a First Time Visitor I want to easily navigate throughout the site to find schedule of workouts available.

  • I have used sticky navigation bar class which enables user to have access to the a navigation bar at all time to move from section to section.

  • The navigation menu also includes timetable which allowes first time users to see a live workout schedule which includes times and workout classes by category.

  • Logo image at the left hand side of the navigation bar is linked back to the top of the page.

• 3. As a Frist Time Visitor I want to find social media platform where existing members are reviewing the live workout classes and their progress.

  • As a first time user you will be able to learn about the services we offer using a navigation menu and clicking on the services tab.

  • As a first time user you will be able to follow our coaches on social media with the links attached at the bottom of their profile sections.

  • As a first time user you will be able to locate social media links in the footer of the site to check out different social media platforms of the site. (As per MS1 social media links are only linked to the home page of the different platforms).

• Returning Visitor Goals

  • 1. As a Returning Visitor I want to find, a sample of workout classes.
    • As a returning visitor you will be able to try one of our complimentary workouts which is located beneath the time-table for live classes.
  • 2. As a Returning Visitor I want to find, a sign up form.

    • As a returning visitor you will be able to sign up easily, either using a link through navigation bar, or scrolling down to the bottom of the page.

    • As a promotion and to gain more memberships, a promotional discount is applied to new users allowes them a 7 days free trial.

  • 3. As a Returning Visitor I want to find, a way to get in contact if I have any further queres.

    • As a returning visitor you will be able to find contact information at the bottom of the footer.

    • No address has been provided as it is a virtual platform which can be accessed Anytime Anywhere.

    • Footer also provides links to the social media accounts of the gym.

    • All the social media links will open in the new tab, which will able the user to easily return to the original site.

Business Owner

1. As a Business Owner, I want to provide a responsive platform for my custors.

   • The website has been tested on mobile, tablet and laptop devices, all the tests have been positive and the site response well on all devices.

   • The customer is able to view range of services provided by the business owner: live workout classes, on demand workouts, community platform and product range.

   • The customer is able to access the complimentary and responsive video footage on all devices.

2. As a Business Owner, I want to gain more memberships.

   • A sign up button is part of the navigation and leads the user directly to a form which is asking a user for their first name, last name, email address and password. All the fields have a required attribute added to them.

   • Above a sign up form a message is displayed with a complimentary trial offer.

3. As a Business Owner, I want the users of the site to be able to contact me.

   • In the footer element at the bottom of the page, a telephone number and email address has been provided.

   • The user can contact a business owner using either one of above methods.

back to content

Further Testing

• The Website was tested on Google Chrome, Microsoft Edge and Safari browsers.

• The Website has been tested using Google Developer Tools to ensure the design is responsive.

• The website was viewed on a variety of devices such as Desktop, Laptop, iPhoneX, iPad.

• Using Google Chrome Lighthouseto improve site usebality and overall performance.

 - Encountered an issue with Links to cross origin destination and added rel="noreferrer" to avoid
 security issues. Please find out more [here](https://web.dev/external-anchors-use-rel-noopener/?utm_source=lighthouse&utm_medium=devtools)

 - Headings used on the website were not in sequence and the changes were implemented 

 - Encountered an issue with accessability having poor contrast between background and font colors, using the information from Google Lighthouse was able to fix the issue. 
 [Please check out the article here](https://web.dev/color-contrast/?utm_source=lighthouse&utm_medium=devtools)

 - Large images have effected the site speed and load time. I have used TinyPng to compress the image size and improve 
 performance.

Navigation Bar Testing

• On the large devices like lapton or PC the navigation bar appears as a inline list to give a user a good overview of the content available: Home, About, Services, Team and Sign Up tabs.

• A logo on the left hand side of the screen is used a home link as a part of navigation bar.

• When clicked on each tab it takes you to the relevent section.

• On the medium and small screen sizes the logo becomes a hamburger button which opens and closes by pressing on the button. Once the button is pressed and the menu is open all the links become available to use.

Social Links

• All the social links from the team section and footer open in the separate tab to give user easy access back to the original site.

Video

• Video footage which is embaded from YouTube site when clicked on is played on all devices tested.

  • Video is full screen and responsive in all devices.

  • YouTube has provided controls for the video and user is able to choose whether they would like it muted or paused.

  • When the video is played the user stayes on the original site and once they choose to stop watching the video they can carry on browesing the site.

  • The screen of the video footage can be enlarged on all devices.

  • Iframe element is used to enbade the video which is supported by all browsers.

Sign-up Form

• Sign up form consists of 4 input field for first name, last name, passowrd and repeat password.

- All the input fields have a required attribute added to them.

- If one of the attributes is missing then 'Fill out this field' message appears.

- Submit button has been changed to 'Become a member button', nothing happens when the button is pressed,
as per MS1 crietirea the method in the form element has not been specified. 

Services

• When testing a responsive design for services section on the large screen view all services are in line occupying full screen view in 4 different part.

• Using Bootstrap grid system I was able to adjust the layout of services on ipad screen to 4 different coloms first 2 colums side by side and the other 2 colums side by side underneath the first two.

• For mobile design I have desided to use single colomn for each service to give the user good content overview and not minimize the size of the content for the user to make it difficult to read and understant.

Team

• Using the Bootstrap grid system the layout on the large screen size is shown 3 columns side by side.

• When the content is viewed on the medium screen size there is only 2 columns side by side and the third column wraps underneath in the middle of the page.

• For mobile design I have desided to use single colomn for each team to give the user good content overview and not minimize the size of the content for the user to make it difficult to read and understant.

Timetable

• Has been created to be responsive on all devices and show full content on all screen sizes.

• The content is centred on all screen sizes.

Sign-up

• The form element is responsive on all screen sizes and has been designed to be in the middle of the page regardless of its size.

Footer

• Footer element in the large screen view has contact information on the left had side, and social links on the right hand side. I have also designed a logo image in the middle to promote the brand.

• The appearance of logo image did not look good on the medium screen view, therefore the items had to be re-arranged and the logo is hidden.

• Mobile screen view the logo is hidden as well, the contact information appears in the middle of the screen and the social links at the bottom.

• Footer elements were custom written for each screen view size using media query.

Max-screen width (1020px)

/*-----------Footer------*/

.footer-contact ,
.heading-socials {
    display: block;
    text-align: center;
}

.heading-socials {
   margin-top: -40px;
}

.contact-details {
    
    display: inline-block;
}

.contact-details .key ,
.contact-details .value {
    width: 100%;
}

.social {
    float: none;
    text-align: center;
    margin-top: -10px;
    margin-bottom: 2px;
    padding-bottom: 4px;

}

.contact-details .key p,
.contact-details .value p {
 
 display: inline-flex;
}

.call {
    justify-content: left;
}

#email {
    text-align: right;
    margin-left: 70px;
    margin-right: 0px;
    padding-right: 0px;
}

#email-address {
    text-align: right;
    margin-left: 70px;
    margin-right: 0px;
    padding-right: 0px;
}

}

Max width 575px

#timetable { max-width: 80%; }

.table-title tr th {
  padding-left: 0px;
  padding-right: 0px;
  margin-right: 0px;
  margin-left: 0px;

}

.table-border tr th {
  padding-left: 0px;
  padding-right: 0px;
  margin-left: 0px;
  margin-right: 0px;
}

.table {
    margin: 0px;
}

.table-border td {
  padding-left: 0px;
  padding-right: 0px;
}

#timetable h2 {
    padding-left: 90px;
}

#timetable p {
    padding-left: 80px;
    margin: 10px auto;
    padding-right: 0px;
}

.table-responsive-sm {
    margin: 10px auto;
    padding-left: 30px;
}

td {
    padding-left: 0px;
    padding-right: 0px;
}

/-----------Footer------/ .contact-details .key p, .contact-details .value p { display: inline; }

.contact-details .key p {
    float: left;
    padding-left: 20px
}

.contact-details .value p {
    float: right;
    margin-top: -60px;
    padding-right: 20px;
    margin-right: 5px;
    padding-left: 30px;
}

.footer-contact {
    margin-left: 0px;
    margin-right: 12px;
    margin-bottom: 0px;
}

.footer-contact ,
.heading-socials {
    display: block;
    text-align: center;
}

.heading-socials {
   margin: 0;
   padding: 0;
}

.contact-details .key ,
.contact-details .value {
    width: 100%;
    margin: 0px;
    padding: 0;
}

.contact-details .value {
    padding-left: 50px;
}

.social {
    float: none;
    text-align: center;
    margin-bottom: 2px;
    padding-bottom: 4px;
}



.call {
    text-align: center;
    padding: 0;
    margin: 0;
}

#email {
    text-align: center;
    padding: 0;
    margin: 0px 0px 5px 0px;
}

#email-address {
    text-align: center;
    padding-left: 30px;
    margin-left: 0px;
    margin-bottom: 5px;

}

back to content

Bugs

Timetable

• When viewed on the mobile device the table content seemed to be larger then the screen view.

• The custome margin did not center the table and had to be inclueded in the media queries.

• To solve this issue I had to tackle and resize each element of the table and add a media quire:

  #timetable { max-width: 80%; }

  .table-title tr th { padding-left: 0px; padding-right: 0px; margin-right: 0px; margin-left: 0px;

  }

  .table-border tr th { padding-left: 0px; padding-right: 0px; margin-left: 0px; margin-right: 0px; }

  .table { margin: 0px; }

  .table-border td { padding-left: 0px; padding-right: 0px; }

  #timetable h2 { padding-left: 90px; }

  #timetable p { padding-left: 80px; margin: 10px auto; padding-right: 0px; }

  .table-responsive-sm { margin: 10px auto; padding-left: 30px; }

  td { padding-left: 0px; padding-right: 0px; }

Page width

• When vied the site, the content appeared to be smaller and did not take up a full screen view.

• Using bootstrap library for Grid System I have used a class of container-fluid to ensure the full screen was covered in content.

• I have tried to look at the background image to see if it had any padding or margins, also I have taken all the padding and margins from

  element.

• Finally, class="container-fluid" was looked at and I have removed the padding from the container which let me have a full screen view width of my website.

.container-fluid { padding-left: 0px; padding-right: 0px; }

back to content

Deployment

GitHub Pages

The project was deployed to GitHub Pages using the following steps...

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
   • Alternatively Click Here for a GIF demonstrating the process starting from Step 2.
3. Scroll down the Settings page until you locate the "GitHub Pages" Section.
4. Under "Source", click the dropdown called "root" and select "Master Branch".
5. The page will automatically refresh.
6. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

Forking the GitHub Repository

By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
3. You should now have a copy of the original repository in your GitHub account.

Making a Local Clone

1. Log in to GitHub and locate the GitHub Repository
2. Under the repository name, click "Clone or download".
3. To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
4. Open Git Bash
5. Change the current working directory to the location where you want the cloned directory to be made.
6. Type git clone, and then paste the URL you copied in Step 3.

$ git clone https://github.com/marina601/iFitness.git

7. Press Enter. Your local clone will be created.

$ git clone https://github.com/marina601/iFitness.git
> Cloning into `CI-Clone`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.

Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.

back to content

Credits

Code

• A code for perfect background image has been taken from CSS trick

• Bootstrap4: Bootstrap Library used throughout the project mainly to make site responsive using the Bootstrap Grid System. Also Bootstrap css library has been used to make site more appealing and responsive.

• A code for a table element has been taken from Bootstrap and then modified to fit the purpose of the site.

• A togler class has been used to create a responsive navebar Bootsrap, toggler class has been used to create a hamburger button on small screen devices.

• Embaded iframe code has been used from YouTube to embade a video link from the YouTube channel.

• A link to icons have been used from Fontawsome.

Content

• All content was written by the developer.

• Color pallet for the site was found here

Media

• The full-screen hero-image and cardio coach image code came from Pixabay ID 5132824

• Light-background image came from Pixabay username: Pexel

• Liveclasses image came from Pixels by Andrea Piacquadio

• Online workout image came from Pixels by Karolina Grabowska

• Products image came from Pixabay by Stevebp

• Community image came from Pixabay by karabulakastan

• Weight coach image came from Pixels by Piks by Panther

• Yoga instructor image came from Pixabay by sippakorn

Video

• Video for complimentary workout came from YouTube by Caroline Girva

Acknowledgment

• My Mentor Medale Oluwafemi for continuous support, helpful feedback and pointing me in the right direction to help me learn.

• Tutor support at Code Institute for their support and guidance.

• Slack Community for helping get through the obsticles found along the way.

back to content