YOGAONLINE

Yogaonline is a website that provides users with online classes of yoga in three different forms, Yin, Ashtanga, and Hatha upon a subscription model of 9.99€/month, with a possible 14-day free trial. The goal of the site is to target people who want to practice Yoga and make it available at all times from all around the globe.

Welcome to YogaOnline: YogaOnline

Wireframes

These wireframes were created in Balsamiq for the YogaOnline website, one for each page for full-size and mobile size. There will be some adjustments to the final sited due to the development process and time limit.

Site Structure

The YogaOnline website has four pages, Home, Classes , Trial and Signed-Up, which are entered thru the navigation menu at the top of the page. There is also a link-button "Free Trial" that navigates the user to the sign up-page.

Design Choiches

• Typography

The chosen fonts for this website were Merriweather for headings and Bitter for the body and the backup fonts were sans-serif respectively.

• Merriweather was chosen to give the user a warm and harmonic welcome to the site and a font that can be easily read

• Bitter was chosen to give a relaxed and calm impression to fit into the Yoga content.

• Color Scheme

The chosen color scheme for the site is there to create a warm and laid-back feeling for the users and to be quite minimalistic. To make the user get into the right state of mind which is Yoga.

Features

YogaOnline is developed to be easily navigated with a menu top right or top, and a footer at the bottom which is where the user expects it to be. The information is uncomplicated and there is just one step to Sign Up and get access to the Classes, which is sent in an email. The site is supposed to be minimalistic and functional.

Existing Features

• Navigation Menu

  • The menu is positioned at the top of all pages and on all devices and is fully responsive to make it good-looking on all types of screens. The logo is also clickable and links back to the homepage, which is another option for the user to navigate.
  

• Hero-section

  • Is located directly under the header and it contains a large hero image of a girl who practices Yoga and a text that explains the concept of the YogaOnlines subscription model even further. The image appearance changes slightly depending on what size it is being viewed on, but the main idea with the picture follows anyhow.
    

• Why YogaOnline section

  • Is based under the hero section and it contains three headings with a short paragraph to give the user a short brief of the classes, teachers, and benefits of Yoga.
  • Right under the paragraphs comes an image of a woman who practices yoga in a living room with a computer by her side and it gives the user a clear vision of how it might look when taking yoga classes online.
    
    
  

• Review-section

  • The review section is there to let the user see what other people think about YogaOnline and to hopefully make them more interested in a subscription and learning yoga online.
    
    

• Footer-section

  • The footer sections hold a mail address, Facebook-, Instagram-, YouTube-logo was taken from font awesome and copyright.
  • All of the links open up in a new tab and the mail link opens a mail.
  • It looks the same on all three pages and it's there to let the user connect and reach out to the site.
  

• Classes - page

  • The classes page gives the user information about each form of Yoga that YogaOnline provides, which is Hatha, Yin, and Ashtanga.
  • Each paragraph has a suitable image to respectively form, beside or underneath depending on the user's device.
  • It's made to be both inspirational and motivational to encourage the users to start practicing Yoga.
  

• Sign Up - page

  • The last page of the site is the Sign Up - page and it contains three input elements, Name, Last Name, Email, and a submit button. Which will generate an email with details to continue to the content and payment methods.
  • The first to be viewed is a video that is set to be auto-played, muted, and with controls, to give the user full control of the page.
  • It's a short video with a girl doing some Yoga out in the woods, to make the user-inspired.
  • A text with some information before signing up is also on the page, to give the user an explanation of what to expect will happen after signing up.
    
    

• Signed-Up -Page

  • This is the very last page, when the user has filled in the form and pressed submit he/she will come to the Signed-Up page.
  • The page is very simple with some text and a link back to the trial-page.
    

Future Features

• To offer live online classes, both in group and individual classes with a scheme and a program that the user can follow for maximal progress.
• A webshop with Yoga-essentials products, to become a full-service site.
• Some more videos, where the teachers can introduce themselves and the techniques being tutored.
• Monthly meetups in different places around the globe, to give the user the possibility to connect further.

Technologies Used

• HTML5 - Provides the structure for the site.
• CSS - Provides the styling for the site.
• Balsamiq - Used to sketch the page.
• Gitpod - Used to deploy the site.
• Github - Used to host the site and make edits.

Testing

Code Validation

The site has gone through several tests to minimize the risk of unwanted errors. All pages have been validated in W3C html Validator and the W3C CSS Validator. There were a few minor errors, such as no !DOCTYPE and some, after the test all of the errors, were fixed. Images of the result in HTML validator, for each page:

• Home Page

• Classes page

• Sign Up page

CSS Validator results:

Responsiveness Test

• This test was made manually with Google Chrome Devtools, and all of the listed devices in devtools were checked. Render, images, videos, and links, passes on all devices listed in the image below.

  

Browser Compatibility

• The YogaOnline site is tested on four different browsers: Google Chrome - Pass, no visible errors or bugs, and fully responsive. Apple Safari - Pass, no visible errors or bugs, and fully responsive. Microsoft Edge - Pass, no visible errors or bugs, and fully responsive. Mozilla Firefox - Pass, no visible errors or bugs, and fully responsive.

Known Bugs

• Resolved

  • During the HTML validation a few bugs were shown:
    • No !DOCTYPE HTML, Open div tags, space between input attributes. These bugs were easily fixed!

• Unresolved

• Hero images and sign-up video could have been done better, the whole image isn't shown on all types of screens.

• Logo and nav links aren't positioned perfectly on all devices.* Fix media queries to xSmall devices 270px and down.

Additional Testing

Lighthouse

• The site is tested with Google Chrome Lighthouse, the results are shown in the image below:

• This is the result after I compressed the Images and video, which gave me a better result.

Deployment

The site was deployed on Github and how it was made and an image:

1. GitHub > Repository > Settings Tab
2. Go to Pages
3. Source > select Branch to master > Save
4. Wait some time, then a link will appear up if the progress were successful.

Link to repository

To fork the repository on GitHub

A copy of the repository can be made and changes to the copy won't affect the original repository. Below are the steps to fork it:

1. Login in and go to Link to repository
2. The fork icon is top right, click that button to make a copy of the original repository.

Create a local clone of this project

Here comes a guide to creating a local clone of this project:

1. Go to repository
2. Press code - button
3. Click the copy button.
4. In the wanted IDE, Open Git Bush.
5. Change the current working directory to the location you prefer to get it cloned to.
6. Type git clone and CTRL-V/Paste the URL from the previous step from Github
7. Hit enter and a clone will be created.

Credits

• GitHub- For make it possible to host my site.
• Gitpod - For giving me the nessecary tools to develop a site.
• ChatGpt - For generated texts and information about Yoga on the classes page.
• Balsamiq - For the wireframes.
• W3schools - For all of the information, was really key for making this site.
• Love Running project, as a good guide along this project.

Content

The text in Classes-page is generated by ChatGpt. Icons in the footer were taken from FontAwesome and color to it by google. The header section is inspired by the Love Running project.

Media

Photos and video were taken from pexels.com and pixabay.com, thank you!

Acknowledgements

This site was made as my first project at Code Institute, it is my first site to develop as well. Unfortunately, I didn't have the time to develop and design it as I wanted. I've learned a lot, so for the next one, I will have more time to give it a proper design and style. Throughout the whole project, I've used a 13" MacBook and that's not to be recommended, to the next project I will fix one or two additional screens.

Fredricho 2023