View the live project here
Welcome to Gemma Ellis Yoga website. This yoga studio is located in the heart of a valley in North Wales and a perfect location to feel the benefits of what yoga has to offer - a beautiful stretch, some lovely breathing techniques and a peaceful relaxation to finish. On this site I hope you will be able to easily navigate the information about the studio and teacher and also able to access it on mobile, tablet and desktop.
- The website should have valuable information on yoga and the studio.
- The website should be easy to use on mobile, tablet and desktop.
- It should be visually appealing with images and colours.
- It should have an about page detailing yoga etiquette and the yoga teachers.
- The website should have testimonials about the teacher and studio.
- It should have contact details that are easy to navigate.
- It should have booking option on the main page to capture the users attention.
- It should have a form to contact the studio directly.
- Advertise the studio.
- Give information on yoga (and the teacher)
- Increase bookings and interest in the studio.
-
As a user, I want to understand the main purpose of the site and learn about the yoga studio.
-
As a user, I want to be able to navigate throughout the site to find content.
-
As a user, I want to look at testimonials to understand what yoga students think of the studio and teacher.
-
As a user, I want to know what yoga is and it's benefits.
-
As a user, I want to know the location of the studio.
-
As a user, I want to know the price of the class.
-
As a user, I want to find the best way to get in contact with the studio with questions that I may have.
-
As a user, I want to know the membership options.
-
As a user, I want to look at the timetable for classes.
- As a user, I want to check the timetable for updated times, days and classes.
- The main colour is a orange/peach/pink colour (rgba(235, 131, 46, 0.548)) for the background, footer is rgba(236, 151, 93, 0.6), tables and text boxes are rgba(245, 94, 24, 0.582). The idea is that the colours compliment the main image on the homepage to give the user a feeling of warmth and a relaxed feel typically like you would feel in a yoga class.
- The Roboto font is the main font used throughout the website with Exo as the fallback font in case the font isn't imported correctly to the site. The Roboto font is used frequently in programming.
- The large yoga image on the homepage is designed to be calming to give the users the sense that when they attend the studio they will feel relaxed and ultimately want to browse the website further to book a class.
-
- Bootstrap was used to assist with resposiveness and styling of the website
-
- Hover.css was used on the Social Media icons in the footer to add the float transition while being hovered over.
-
- Google fonts were used to import the 'Roboto' font into the style.css file which is used on all pages throughout the project.
-
- Font Awesome was used throughout the website to add icons to appeal to the eye.
-
- Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
-
- GitHub is used to store the projects code after being pushed from Git.
-
- Balsamiq was used to create the wireframes during design ideas.
The W3C Markup Validator and W3C CSS Validator were used to validate every page of the project to ensure there were no errors in the code.
-
First Time Visitor Goals
-
As a user, I want to easily understand the main purpose of the site and learn more about the studio.
-
When entering the site users will see a readible navigation bar to get to the page of their choice. Even when they are on a specific page they can press the 'Gemma Ellis Yoga' logo to return to the main page.
-
On the contact us page you must input your details or the form will ask for it and you will be unable to submit the form.
-
On the about page I want to clearly locate the New student registration form to fill it out and bring with me to the first session.
-
-
As a user, I am curious to know more about the owner/studio
-
On the homepage users can scroll down and see student testimonials and be clear that the studio is a friendly environment with a good teacher.
-
Clearly labelled 'About' page on navigation bar.
-
The About page contains a photo of the teacher and short paragraph about her experience.
-
There is an example relaxation audio for users to listen and decide if it's something they would like to experience.
-
-
As a user, I want to view the studio and student/teachers gallery to view the environment so I can decide if it's the class I'd like to participate in.
- In the navigation bar there is a clearly labelled 'Gallery' page with images of inside the studio, with students and outside of the studio.
-
As a user, I want to know what yoga is and what are it's benefits.
-
Returning Visitor Goals
-
As a user, I want to find the best way to get into contact with the studio with any questions I may have.
-
The navigation bar clearly highlights the 'Contact page'.
-
Here, they can fill out the form on the page (but I have not linked it to anything as this out of the scope of the MS1 project).
-
There is also the direct phone number or email of the studio (fictional).
-
The footer contains links to Facebook, Twitter and Instagram (to the main pages of the social media homepages and not to the teachers own account due to privacy purposes).
-
-
As a user, I want to find out the membership options
- In the classes page prices are clearly labelled for the visitor to view.
-
As a user, I want to find out what days and times the yoga sessions are on.
-
Responsive on all device sizes.
-
Interactive elements.
For the navigation bar I have used Boostrap to create a responsive navbar as well as the hamburger icon for mobile devices to be more user-friendly.
The main image is of a yoga pose on the beach during sunset from the website unsplash. It creates a warm, calming feeling. The yoga pose is a simple pose that all abilities can perfrom so wouldn't put off any beginners or unconfident students.
The main idea to put cover text over the image was to grab the users attention immediately - one box is to get them to book a session straight away or to have that in their minds immediately and the second box is to explain the definition of yoga so that a beginner understands the purpose.
The Benefits idea was taken from the Love Running project - as its simple and eye catching for the user - with short explanations of what the benefits of yoga are to a beginner or even to remind the experienced yoga students. It is in three columns (taken from Bootstrap) to appear neat and tidy on the page with easily identifiable Font awesome icons to attract the user.
The testimonials section also used the grid from bootstrap and some icons to make the section more visually appealing with images from my own collection and different names for the people in the images (I have consent of these people).
I used an example layout from W3 website to create the about section to introduce the user to the teacher. With the same image layout that was used in the testimonials section for consistency over the pages.
I added an information/etiquette/tips section because as a new student to yoga they may feel uncomfortable entering a studio without any prior knowledeg of what to bring and of what to expect ect so this may help those that are unconfident accessing the studio alone.
In addition I added two downloadable links on this page, one of a sample relaxation script which had audio and the second of a student registration form that would be required upon visiting the studio for the first time. Again I added fontawesome icons to the headers to be more appealing.
I wanted three columns and three rows of images in the gallery so it would be appealing to the eye on desktop view and then down to two columns in mobile view so that images didn't appear stretched or pixlated. I did originally put in the wireframes that I wanted one column in the mobile view but this wouldn't appear balanced in my opinion. So there are 12 images which appear balanced in the gallery(balance is at the heart of yoga so I wanted the website to appear balanced as much as possible throughout).
The classes page is the most simple page of them all - with three simple tables to look at the class timetable, simple descriptions of the classes and then the price options. It is important to have different price options as this may attract more students. Originally in the wireframes I had placed the coloumns side by side but felt it was more appealing one underneath the other as the text took a lot of room on the page.
At the top of the page I placed the form so that it would catch the attention of the users if they had any questions for the teacher. They then have to scroll down for the contact details and the map of the location.
- When submitting the form, the information should be sent to the yoga studio email account.
- Chat bot that can assist the user.
- Interactive map for the location with a link to google maps.
- Include information on how their data will be used (GDPR-Law).
- Yoga videos for those that can not attend class.
- One scrollable page with all the information on one page to make it user friendly.
-
The website was tested on Google Chrome and Safari browsers.
-
The website was viewed on a variety of devices such as desktop, laptop, tablet and iphone.
-
A large amount of testing was conducted to ensure that all pages were linking correctly.
-
Friends were asked to review the site and content to point out any bugs/user experience.
-
Idea I wanted to ensure that the navigation bar was working accordingly at the top of the page and when clicked on, the navigation links would take the user to the page of their choice. For simple and attractive purposes the navigation bar would then convert to a hamburger icon with a dropdown menu on mobile devices.
-
Utilization I implemented the navigation bar using Bootstrap, which ensured an effective overall structure and lay out to the navbar. CSS was used to overwrite the default settings and made the navbar in line with the overall webite. I also used Bootstrap to implement the hamburger sign for mobile devices.
-
Test To test the navigation bar, I clicked all the links to make sure it worked properly. I have also opened the website in various browers (safari, google chrome, mozilla firefox) to make sure it worked on all browsers and devices. On mobile the navigation transformed into the hamburger sign with a dropdown menu.
-
Result The navigation bar appears how I would have expected it on all browsers and devices. However on the index page (main page) while on mobile device the dropdown does not appear as it is as it's blurred by the text-cover box. - So I have to hide the cover box in mobile display in order to see the dropdown menu.
-
Verdict The test has passed all the criteria and works like planned.
-
Idea I wanted to use a modal that would allow the user to book on the main page (a place were it's clearly visible and easy to get to for a returning user).
-
Utilisation I used Bootstrap to include the modals on the website and this was positioned to the left of the box as the text was also aligned left. I used the same colours as I did on my contact us form to keep consistency throughout the pages.
-
Test Initially the modal worked succesfully however the next day it didn't work. So every effort was used to check the problem. I realised I had deleted a bootstrap link (because I had )
-
Result The modal opened up when the Book now button was clicked and appeared on screen.
-
Verdict The modal works as planned.
-
Idea I wanted to use audio as a taster for users of what to expect when in the relaxation during a class. This would allow the user to determine if they would like to hear more by coming to a session.
-
Utilisation I used an iphone recording device called 'voice memos' to record the audio and used one of the relaxation scripts I used during my classses in the past. To ensure they didn't miss this it was in the about section (to learn more about the classes) and I provided a clear download icon so that the user would know where to click.
-
Test The audio worked succesfully on the first test.
-
Result The audio opened up when the Download button was clicked and appeared on screen.
-
Verdict The audio works as planned.
-
Idea I wanted to enable the users to download and fill in the student registration form (if they would prefer) before the session so there is no rush at the beginning of the session. This is important for the teacher to have as it gives the teacher an idea of any health issues so that the teacher would be able to adapt the sessions/poses for the individual.
-
Utilisation I copied a student reg template I used in the past to a folder and again to keep it consistent with the audio link put a download icon next to it so that they could download the page.
-
Test The file worked succesfully on the first test,
-
Result The audio opened up when the Download button was clicked and appeared on screen.
-
Verdict The audio works as planned.
-
Idea I want to include a contact form so that the user can contact the studio/teacher with any queries they have (even to book through this too). On the form they can enter their name, email address and write a message. I also ensured they had to fill in the fields before submitting the button.
-
Utilization To create this, I made a contact page and placed the form at the top of the page. There were two fields for the name and email address then a textarea field for the message and a submit button. I also ensured the form was the same colour as the rest of the pages for consistency.
-
Test When I tested the form, I realised that nothing opened up and there was nothing to indicate to the user that the form was submitted. This meant it was not user friendly, so if I had more experience I would have liked to include JS to implement this.
-
Result The form works but after filling it in all the content dissappears so the user is left if the message was sent.
-
Verdict The form worked but without feedback it is not user friendly.
-
I had many issues on the mobile display trying to get the hamburger icon to sit on the right in the navbarso using float:right and position:absolute helped the issue.
-
On the laptop view I also had issues with making my text in the navbar sit to the right (float:right) with correct spacing (line-spacing:4px) this helped solve the issue.
-
I also had issues with my map - after the validator not liking my iframe in the html I decided to change the map, which gave me styling issues so it took me quite a long time to center the image, and correct the height as I was confusing between the map-wrapper, map and iframe in the css. As a result I targeted the iframe with an id and then used min-height: 360px; and width: 600px.
-
When looking at my live wesbite, dev tools has an error come up on each page. I have found the explanation on Github which explains it's to ensure the privacy of our users when browsing GitHub Pages sites. So due to this I have left the page as it is.
- IMPORTANT - Previous commits have been wiped due to problems with Gitpod on 29/7/21, fortunately I was able to recover some of my work and create a new workspace.
The project was deployed to Github pages using the following steps:
- Log into GitHub and locate the GitHub Repository (gemmaellis16 /yoga-project).
- In the navbar on the top right hand side press the "Settings" button.
- Locate Pages on the left hand side of the page.
- Click "None on the source section and choose "Master Branch" on the source field and then choose "docs".
- Then deploy the page - you will have to wait 10 minutes for the page to deploy or when the blue writing turns green.
Forking means to make a copy of the original document so that you can view/edit without it altering the original repository. It can be forked using the following steps:
- Log into Github and locate the Github Repository
- Enter gemmaellis16/yoga-project.
- At the top right of the navbar (above the profile icon), press the "Fork" button.
- This will enable you to get a copy of the original repository in your Github account.
Cloning means creating a local copy of the remote repository. This allows you to make edits locally rather than directly in the source files. It can be cloned using the following steps:
- Log into Github and find the GitHub Repository
- Locate the "Code" button and click "Clone or download".
- To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
- Open a terminal.
- Change the working directory to the area where you want the clone to be made to.
- Type git clone, and then paste the URL you copied before.
- Press enter and create your local clone.
-
The full screen image came from unsplash
-
Bootstrap Bootstrap library used throughout the project to make the site responsive to the Bootstrap grid system.
-
The testimonials idea was taken from the quotes section in the Whiskey project
-
The footer idea was taken from the Coffeehouse project
-
The main image code was taken from the Love Runnig project
-
The cover text was sourced from the Love Running project
-
The benefits section was sourced and edited from the Love Running Project
-
The gallery idea was sourced from the Love Running project
-
The contact us form was sourced from the Love Running project
-
The download now idea on the about page was taken from the Resume project
-
I used the table content code from W3schools for my about page.
-
I used the table structure on my classes pages from W3schools
-
I used a modal template for the book here button on my homepage from Bootstrap
-
I used Bootstrap template or the navigation bar.
- Content was written by me, the developer - this is the content I created on my yoga flyer while studying to be a yoga teacher in 2016.
-
All gallery images created by the developer - they are photos from a yoga studio I attended as part of my yoga teacher training in Spain. So the studio does not exist in North Wales (like I have stated but merely a fictional studio in Betws y Coed). The testimonial images have also been created by me.
-
But as noted previously the main image is sourced from unsplash.
-
The map on the contact page was sourced from Google
- Tutors at Code Institute for their support, they really helped when I was feeling that I was unable to grasp all the styling issues.
- My new mentor for advice on the finishing touches on the project.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
