Gymworld

Gymworld is a Didcot, South Oxfordshire based gym. The site is targeted for people who are new to lightly experienced in fitness, looking for a new gym location. The site also shows the users some information regarding the different classes, availability of the classes and sign up page.

User Experience

User Stories

First time visitor goals

• As a first time visitor, I want to be able to understand the main purpose of the site and also be able to easily navigate to the different sections of the site to see what Gymworld has to offer.
• I want to be able to contact and sign up for classes easily.

Returning Visitor

• I want to find out about classes time
• I want to be able easily find the links the the social media pages
• I want to find out about the different workout classes Gymworld offers

Frequent Visitor

• As a frequent visitor, I would like to be able to to access the website on different devices (phones & tablets and big desktop screens)
• As a frequent visitor, I would like to know if the class times have stayed the same or perhaps have changed.

Features left to implement

• Image slideshow to replace Home page main image in the future (I attempted to do it originally but found it difficult to implement it at this stage.)
• Video tour of the Gym.

Design

Colors

• The main colors used throughout the site is light blue

Font

• The Roboto and Montserrat are the main font used throughout the website, with Sans-serif to fall back on. Roboto and Montserrat are clean and very clear fonts which makes it easy for users to read.

Navigation

• Gymworld (name of the Website) is on placed on the top left hand side of the page
• The 3 navigation links (Home, Classes, Sign UP) are located on the top right hand side of the website. User will then be able to navigate from pages to pages easily.
• For smaller resolutions screens, the navigation bar is responsive and displays under the company name.
• For easier navigation experiences, the nav links are highlighted in a darker shade of blue.

Header

• Main landing image included in the header a showing a man and human taking part in a workout
• In the middle of the landing image includes a text box with Gymworld's motto.

Home

• The home page where, thanks to a large main image, will make the user be aware that this a gympage.
• This section introduces the user with an eye catching image animation to draw their attention.

Why Gymworld

• This section contains 3 sub-sections explaining what Gymworld is about and what is being offered.
• The aim of the sub section is encourage the engage with the rest of the content on the webpage and perhaps think about sign up for classes

Footer

• The footer section contains links to Gymworld's main social media accounts. The links will open in a new tab to allow a better experience for the user to navigate.
• The footer is designed for the user to stay connected with Gymworld via Twitter, Instagram and Facebook.
• News & Update will be posted on the social media accounts
• When the user scrolls/hover the social media icons, the colors change to white to hightlight the icons

Fitness class Page

• This section displays the 5 classes gym offers. Spin class, Circuit class, Hiit class, Strength class and Cycle(spin) class.
• Each classes box contains short explanation followed by the class image to help users understand what the excercise/workouts are about.

Timetable

• This sections provides information to users regarding classes timetables.
• Decided to keep the table blue, consistent with the rest of the site.

Contact Page

• Contact page features a Main image with a sign up form inside the image. Users can sign up by filling their full name, email address and pick which class they would like to attend.

#Lighthouse Report

Testing

• I have performed a considerable amount of testing to ensure the site is fully responsive on all screen sizes.
• The navigation links on all 3 pages, Home, Class and Contact had no issues at all.
• The Sign up Form in the contact page responds well to small, medium and large screen resolutions.

Navigation Testing

W3C Validator Testing

• All 3 HMTL file (index, classes and contact) And CSS were ran through (https://validator.w3.org/nu/#textarea) and (https://jigsaw.w3.org/css-validator/validator) respectively to ensure all codes meet the standards. All files came back with no errors.

Bugs

• During testing, The W3C validator flagged that the atrribute "optional" does not allowed on the element select
• Lighthouse flagged that the image file sizes was causing issues to the perfomance of the site. Advised to compress the images files.

Unfixed bugs

• The required attribute on the select element in the contact page means that, the user has to select every gym classes and time schedule before being able to sign up for classes.
• Horizontal scroll appeared on the home page at a max-width 400px

Languages Used

Gymworld website was built using only HTML5 and CSS3

Wireframes

Deployments

• The website was deployed on Github Pages

• On the Project repository, go to settings

• Scroll down untill the Page link appears - click it

• Under Source, click on the drop down button "None" then click main

• Click save, the following message will appear: Your site is ready to be published

• After a few minutes, the site will be published with a new message saying - Your site is published.

• Access to the live link here Gymworld

Credits

• Gymworld was influenced by the Love Running challenge and the porfolio 1 website (Coders Coffeehouse). Even though I have tried to steer away from those sites and make my project my own, some of the codes share the same similarities.
• [w3schools] (https://www.w3schools.com/) for constant help and extra learning content to make my project work.
• [Font awesome] (https://fontawesome.com/) The icons you see on the site were taken from Font Awesome
• Pexels [Shuttershock] (https://www.shutterstock.com/) All images for this project were sourced from Pexels and Shuttershock
• [Googlefonts] (https://fonts.google.com/) - Where the Roboto and Montserrat font were taking from.
• Amiresponsive To check how responsive the site is on all devices