- About
- User Experience
- Design
- Features
- Technologies Used
- Deployment & Local Development
- Testing
- Credits
Mobile Physio is a site for a Dublin-based Physiotherapy Clinic. The target audience for this site is people with injuries looking for physiotherapy treatments to assist in recovery. This site will allow users to see the services offered by Mobile Physio, allow them to read reviews from previous patients and book an appointment.
- As a first-time visitor, I want to know what Mobile Physio is and the services they provide.
- As a first-time visitor, I want to be able to easily navigate through the site.
- As a returning visitor, I want to be able to contact Mobile Physio.
- As a returning visitor, I want to be able to navigate to Mobile Physio's Social Media pages.
- As a frequent visitor, I want to be able to book an appointment with Mobile Physio.
- As a frequent visitor, I want to know that my booking was successfully submitted.
To view the testing of the User Stories, check the TESTING.md file, located here.
The website uses mostly white and light grey colours, to create a clean and modern design. The blue colour (#4EB7DA) was taken from the blue tape used in the hero image, this creates a theme throughout the project as recurring colours are used.
Click for Image: Colour Palette
The fonts used in the project have been imported from Google Fonts.
- Cabin was used for the Headings on the website.
- Lato was used for the favicon.
- Nunito was used on all of the remaining text throughout the site.
- Sans-serif was used as a backup font for all of the text, in case the Google Fonts could not be displayed.
The hero image was used as it shows a physiotherapist working on a client, allowing users to understand the work performed by Mobile Physio. A wide image was used for desktop and larger devices, while a portrait image was picked for usage on mobile devices, both of these images are similar therefore creating a recognisable theme throughout the site.
The images used for the service cards, were picked as they show a Physio performing the services described below them. They also all feature the hands of the physio, which links them to the hero image. Two out of three of the images also feature a blue colour, which matches the blue of the hero-image tape.
The image used in the contact page is of a medical reception, this is used as it is located with the contact details of the clinic, linking the image to the content. The image also uses blue colours, linking them to the images used throughout the site.
About Page Wireframes:
Click for Image: About Page - Mobile Wireframe
Click for Image: About Page - Desktop Wireframe
Testimonial Page Wireframes:
Click for Image: Testimonial Page - Mobile Wireframe
Click for Image: Testimonial Page - Desktop Wireframe
Contact Page Wireframes:
Click for Image: Contact Page - Mobile Wireframe
Click for Image: Contact Page - Desktop Wireframe
Included on all pages throughout the website. Design is consistent on all pages to provide a consistent user experience. Contains the Website title (which links to the About page) and additional links to the About, Testimonials and Contact Pages.
Click for Image: Navbar - Desktop
On mobile devices, the page title is hidden to allow the navigation links to fit on the screen.
Click for Image: Navbar - Mobile
Website title and links are underlined when hovered over, this provides extra feedback to the user that these words are links.
Click for Image: Navbar - Hover Effects
The footer is located at the bottom of each page. It contains social media links to Instagram, Facebook and Twitter. The footer links open in a new tab, to allow the user to remain on the Mobile Physio site without having to navigate back through their search history. The Footer uses Font Awesome Icons that are widely recognisable with the associated social media sites.
Click for Image: Footer - Mobile
Click for Image: Footer - Desktop
Footer icons will enlarge when hovered over, allowing users to get feedback that these are links that can be clicked.
Click for Image: Footer - Hover
This page will display when the requested page is not able to be displayed. For example, a user who navigates to 'https://callumdennisie.github.io/mobile-physio/help.html', will be connected to the custom 404 page, as help.html does not exist within this project.
Click for Image: Custom 404 - Mobile
Click for Image: Custom 404 - Desktop
This custom page replaces the default GitHub Pages 404 page, the default page does not follow the theme of the other Mobile Physio page, which could disorientate users. The custom page also includes the Navbar and Footer elements, to allow the user to continue site navigation.
Click for Image: Default GitHub Pages 404 Page
The custom 404 page also includes a 'Go Back' button which will return the user to the previous page in their history. Allowing the user to quickly and easily continue site navigation.
Click for Image: Custom 404 - Back Button
This page will display when the form has been successfully submitted. This provides the user feedback and informs them that the form has been successfully sent.
Click for Image: Form Submit - Desktop
Click for Image: Form Submit - Mobile
The page contains a back button, allowing the user to return to their previous page, which would be the Contact page.
Click for Image: Form Submit - Back Button
This page shows reviews from previous patients, creating trust between the user and the Mobile Physio company.
Click for Image: Testimonials - Desktop
Click for Image: Testimonials - Mobile
The individual review sections expand when hovered over, this highlights to the user the review that they are looking at.
Click for Image: Testimonials - Hover
The review stars also animate when hovered over, this makes the website appear more dynamic and less flat.
Click for Image: Testimonials Star - Hover
This page is intended as a landing page for users. It provides information about the Mobile Physio company and the services they provide. A large hero image shows the user a physiotherapist working on a patient, allowing them to understand the service provided.
Click for Image: About Page Hero Image - Desktop
Click for Image: About Page Hero Image - Mobile
The service cards show the three different services that Mobile Physio provides, these cards are enlarged on hover.
Click for Image: About Page Service Cards - Hover
Click for Image: About Page Service Cards - Mobile
The contact section is used to allow users to easily navigate to the Contact page. This has a button that enlarges and changes colour on hover.
Click for Image: About Page Contact Section - Hover
This page is split between two elements, the clinic information card and the form card.
Click for Image: Contact Page - Desktop
Click for Image: Contact Page - Mobile
The clinic information card provides the user with the necessary details to visit Mobile Physio such as address and opening hours. It uses widely recognised Font Awesome icons to highlight the use meaning of the text.
The form card allows the user to input the necessary details to book an appointment. Most of the inputs are required to submit the form (except for additional info and date of birth), this stops the user from trying to book an appointment, without the necessary information.
Click for Image: Contact Page Form - Required Fields
The form card also has a submit and reset button that enlarges on hover. When the submit button is pressed and the required fields are filled, the user is sent to the Form Submit page, when the reset button is pressed, the form is cleared.
Click for Image: Contact Page Form - Hover
The additional info text box is resizable vertically, to allow users to type more info if they require it. The reason that re-sizing the box horizontally is not allowed, is because it would bring the text off of the screen, which would look unprofessional.
- HTML5
- CSS3
- Font Awesome:
- Font Awesome Icons were used for the Contact form, social media Footer and the Testimonial stars.
- Git:
- Version control was performed through the use of Git commands
- GitHub:
- GitHub was used for the hosting of the project. GitHub Pages was also used to host the live website link.
- Gitpod:
- Gitpod was used as a browser-based cloud development environment.
- TinyPNG:
- TinyPNG was used to compress all images in the project and README, that had an original file size below 5MB.
- Compressor.io:
- Compressor.io was used to compress all images in the project and README, that had an original file size above 5MB.
- Balsamiq:
- The wireframes were created using the Balsamiq software.
- Google Fonts:
- Favicon:
- A favicon was generated and used in the project files.
- Coolers:
- The colour palette was created using coolers.
- W3C Validator
- The W3C HTML validator was used to validate all HTML used in the project.
- W3C Jigsaw Validator
- The W3C CSS validator was used to validate the CSS file used in the project.
- Chrome Developer Tool - Lighthouse
- Lighthouse was used to test performance, accessibility, best practices and SEO across the project.
The Mobile Physio project was deployed using GitHub Pages.
You can view the live site through this link.
Steps to deploy this project using GitHub Pages:
- Navigate to the GitHub repository for this project: CallumDennisIE/mobile-physio.
- Click on the 'Settings' tab: CallumDennisIE/mobile-physio/settings.
- Click on the 'Pages' section: CallumDennisIE/mobile-physio/settings/pages
- Select the 'Main' source from the dropdown.
- Wait a few minutes for the site to deploy.
- The project will be published and a link will be provided to the live site: Example link.
For more information on how to deploy a site with GitHub pages, please click here
Steps to fork this project using GitHub:
- Navigate to the GitHub repository for this project: CallumDennisIE/mobile-physio.
- Click the 'Fork' button (top right-hand side of the repository page).
For more information on how to fork a GitHub repository please click here
Steps to clone this project using GitHub:
- Navigate to the GitHub repository for this project: CallumDennisIE/mobile-physio.
- Click on the 'Code' button, located above the project files.
- Select 'HTTPS' as the method to clone the repository.
- Copy the link provided, located under 'HTTPS': https://github.com/CallumDennisIE/mobile-physio.git
- Open the Terminal in the location you would like the repository to be cloned to.
- Type
git cloneand then the link provided in step 4:
$ git clone https://github.com/CallumDennisIE/mobile-physio.git
For more information on how to clone a GitHub repository please click here
View the project testing document here.
The back buttons used on both the Form Submit page and the Custom 404 page used code from W3Schools.
The images for this project were taken from Pexels and Unsplash.