This is the README file for my Code Institute MS1 project site, The Fitness Centre.

View the live site here

A responsive website designed to promote energy, fun and excellent facilities with the goal of attracting new members and to retain existing members.

• First Time Visitor Goals

  • First Time Visitors, should be able to understand the purpose and reason for the site.
  • First Time Visitors, should be able to easily find the navigation links.
  • First Time Visitors, should be able to see key information such as how to join and what the gym offers.
  • First Time Visitors, should be able to see what other members say about their experience at the gym.

• Returning Visitor Goals

  • Returning Visitors, should be able to see what membership packages are available and also find any answers to frequently asked questions.
  • Returning Visitors, should be able to sign up to a membership package.
  • Returning Visitors, should have an easy way to contact a member of staff to discuss any membership queries.
  • Returning Visitors, should be able to register for a newsletter.
  • Returning Visitors, should be able to find the opening hours and contact information.
  • Returning Visitors, should be able to find and enter upcoming events are happening at the gym.
  • Returning Visitors, should be able to find social links to be able to engage within the online community.
  • Returning Visitors, should be able to find more information about the trainers.
  • Returning Visitors, should be able to find what classes are available, when they are available and also book one.

• Design

• Structure & Mockup Designs

  After searching the internet for similar sites, I started gathering ideas on elements that I felt that worked well for a gym website and also element that I would like to create on this site. I used Adobe XD to generate my mockup design as I felt that it would help to display how the colours and elements work together. I also felt by generating a more detailed mockup that includes some of the text data and images, it would help speed my coding process up and prevent having to stop each time to find images etc. I felt this was a great help as it meant I could keep focused on the coding instead of the content.

  I designed mockups for web,tablet and mobile in order to see how I can expect the layout to change when being displayed on different platforms.

  
  Mockup Layout for the Trainer page.

  
  
  Mockup Layout for the Classes page.

  
  
  Mockup Layout for the Membership page.

  
  
  Mockup Layout for the Contact page.

  
  

• Colour scheme

  In order to make sure I chose a compatible and effective selection of colours, I chose to use Adobe Color to help me with my design.

  
  

• Typography

  I think the font plays a big part in the first impressions of the website and i was looking for something that was quite minimal and modern. After looking through the google font library i chose the following:

  The main font is Lato Link

  The secondary font is Roboto Link

• Media

• Images

  I sourced the images for the website from Unsplash Vecteezy [Pexels]{https://www.pexels.com/} Adobe Stock. I chose to out-source the imaging to ensure the highest quality of images and also to make sure that I had a large selection of images to choose from.

  • Logo

    The logo for the page was designed myself using Adobe Illustrator. I tried to impliment the color scheme of the page in the logo and also the fonts to create an image that would blend into the site.

  • Hero Image

    I decided to create a hero image for the homepage because I felt it was important to have a big impact on visitors as soon as they reach the site. The image I used didn't fit very well as the person in the image was centralised. So I edited the file in Adobe Photoshop so that I could place the person to the right, giving me space to have a tagline on the otherside to help generate interest.

• Video

  There is only one video on the site. I chose to add a video to the classes page to give the user a taste of what the classes are like at the gym. I chose a video that was quite fast moving, motivating and not too long. The video was out sourced from youtube and embedded using an iFrame.

• Features

• Noteable Features

  Here are a few features that help meet the user's expectations when visiting the site:

  • Eyecatching Content - High Impact Hero Image as a landing page / Automated or manually controlled carousel to promote the gym facilities.

  • Responsive layout - Designed with compatibility in mind, the site will display well with most popular devices

  • Colourful and synchronised design

  • Online Booking - Members are able to view and book classes online

  • Become a member online - New and retuning users can join the gym online with a choice of membership packages.

  • Key Information - Detailed information about the trainers at the gym and their specialities formatted to reduce reading time but deliver key information.

  • Social Media Links - As social media platforms are key areas to help engage with customers, there are social icons in the footer of everypage to make sure they are easy for the user to find.

  • Banners - The site has 'free trial' banners and buttons that blend in well with the site to help generate new members. A key design feature was to make sure they don't look as external marketing adverts.

  • The Gym's Location - The footer has all the information required to find or contact the gym. Users can click a link to show a map of where the gym is located.

  • Reviews and Testimonials - The site has 2 sections to find out what other members think of the gym. Both located at key areas to help members decide to join the gym.

  • Ask a Question - Users are able to contact the gym using a 'contact' button within the navigation bar.

• Future Features

  • Social Media Feed - I think it would be useful to have a social media feed so that members can see the social activity at the gym without leaving the site.

  • Online Classes - With gym's having to close down due a pandemic, I think it would be useful to include online classes on the site so that members can continue to interact if lockdown restrictions forces the gym to close again.

  • Online Payments - As members would currently have to pay their membership on arrival after signing up online. It would be useful to be able to take the membership payments online.

  • Merchandise/Online Store - Having an online store could be an extra source of income for the gym. The store could sell fitness clothing/nutrition and supplements. This could also be very useful to members.

• User Stories

  This section is designed to generate possible scenarios of the typical end user that would use this website. This will help ensure end user requirements are designed into the website.

  • I regularly work out at the local gym, and often forget the timetable for the classes. It would be useful to know the schedule for the classes, and if i could book them online?

    To make sure that users are able to access a timetable of classes, I incoporated an online schedule.

    
    

  • As my computer skill aren't great, I would like to be able to easily navigate the site and I really don't enjoy filling out large forms.

    The navigation bar was designed to be minimal, yet have access to the most important areas. I also made sure that the forms were minimal, as large forms tend to put off end users

    
    

  • I take my training quite seriously, and it would be important for me to be able to find out more about the instructors available at the gym so I can choose the most appropriate instructor to support my training.

    The instructors play a big part in how enjoyable and rewarding a training session can be. Instead of having a large amount of text, I designed their attributes in a graphic format to make the content quick and easy to read.

    
    

• Key Components

• Frameworks, Programmes and Libraries:

  • HTML5
  • CSS
  • Javascript
  • Bootstrap - Used for layouts, styling and custom components such as navigation bar or modals.
  • Fontawesome - Used for generating the icons for the facilities section and also within the text areas.
  • Calendly - Integrated into the classes page to display and manage bookings for all the fitness classes.
  • Google fonts - Used to pull the required fonts into the website.
  • Tiny PNG - Used to help reduce the filesize of the high quality images
  • Adobe Photoshop & Illustrator

• Deployment

• GitHub Pages

  The site is hosted on GitHub pages. Deploying the site was very easy to do, especially as the repositry was already installed and managed on GitHub.

  I deployed my site during a mentor session and had my mentor guide me through the process. To deploy the site I carried out the following steps: - Go To your GitHub repository, - In the top right corner Click Settings - Scroll Down to GitHub Pages - Select Main/Master branch from the dropdown menu. - Click Save

  A link will be generated for your live site. Initially all the content had not loaded correctly onto the site. After a force reload on my browser, the site displayed correctly.

• Problems

  Card Wrapping During a session with my mentor, we were looking through my site and some of the responsive area's that needed addressing. In the classes section, we came across a button that would overlap the wrapping within the card. We used inspect tool within Google Chrome to see what could be causing the problem. It was very difficult to find the issue as there was only 3 out of the 6 cards that had the issue (despite all of the code for each one being the same).

  My mentor suggested we could use a 'Clearfix' class to help address the problem. Initially when we applied the class, there was no change and we thought it was because of a newer version of Bootsrap. However it turned out that using Clearfix was not going to be the solution.

  I then found that the problem could be resolved using a media query specifically targeting the height of the cards.

  The media query would apply the Bootstrap H-20 class for browsers with a min-width of 768px, for anything below that min-width then it would remove the class. This meant that the button would wrap correctly and display on both browser width.

  Deployment When deploying my site to the GitHub pages, the deployed site did not show any CSS styling or images. I worked out that the reason for this would be either the files were not in the server or the addressing was incorrect. It turned out that the source addressing for the images and css were written in Absolute Paths. After changing all of the paths to Relative Paths, the site functioned correctly.

• Testing

• HTML

  I used W3 Validator website to validate my code. I used the online version, inputted my git pages link and it ran through its tests. At first when I looked at the report I was quite concerned that there were so many errors. However, the first 50 errors were all pointing towards one area. The error had generated an error message for every character within the tag as I had missed a " in the description meta tag. I added the character and it cleared all of the errors associated with that item. A repeating error that came up was that there were a number of stray div tags and the validator was a useful tool to help locate and remove the div tags.

• CSS

  I used Jigsaw CSS Validator I uploaded the style.css file to the site in order for it to carry out the validation checks. There were a number of errors in relation to typing errors and missing ';' however the checks found an error with some gradient colours I had set up to display in the background. The code for the gradient colour I used was formatted in rgba format and the validator marked this as an error. Once I changed the values to hex format, there were no further errors.

• Website compatibility

  As end users can view the site on many different platforms, devices and browsers of all screen width, I felt it was important to test my site's performance on as many devices as I could. I carried out tests on the following devices:

  • Apple iPhone 12
  • Apple iPad
  • Samsung Galaxy Phone
  • iMac
  • Lenovo Laptop
  • Chrome Browser
  • Internet Explorer
  • Microsoft Edge

  The site performed well on all of the above platforms. I noticed there were slight variations in some of the elements, but did not find any problems that would effect the end user experience.

• Link Testing

  I ran manual tests myself, running through all the pages and all the links on each page. This was to ensure that all the links and buttons work as they should and takes the end user to the correct place.

• Credits

• Code

  • Customer Reviews I needed a nice looking section where the customer reviews could be placed and I came across one on the bootdey website I've used the code on the membership page, and its main purpose is to help those who are unsure of joining to go-ahead and sign up.

  • Gradient On Images I had placed some images that had text on top of them and I thought the contrast between the text and the image was very poor and difficult to read. To improve this, I was looking to change the opacity of the image or add a layer of transparent black above the image to darken it. I found a solution to my problem by adding a gradient overlay to a background image taken from the following website

• Images/Video

  The images I used for the site were sourced from the following sites and photographers.

  • Unsplash

    • Quino Al
    • Proriat Hospitality
    • Lorenzo Fattò Offidani
    • Brooke Lark
    • Jahir Martinez
    • Yilmaz Akin
    • Morgan Alley
    • Damir Spanic
    • Sam Moqadam
    • Sven Mieke

  • Pexels

    • Chase Fade
    • Jamie Ginsberg
    • Joseph Gonzalez
    • Karsten Winegeart
    • Michael Damir
    • Allan Mass
    • Andrea Piacquardio
    • Artem Podrez
    • Cesar Galeao
    • Ivan Samkov
    • Kampus Production
    • Leon Ardho
    • Lukas
    • Mister Mister
    • Scott Webb

  • Other

    • Adobe Stock
    • Vecteezy

  • Youtube

    • Fitness Incentive