The Road is Home is a fictional travel company based in Wales. The website will be targeted at primarily solo travellers who want to see the world and join a small escorted tour group.

This website was created for my 1st Milestone Project on Code Institute's Diploma in Web Application Development course.

Visit the live website

• User Experience (UX)
  • Project Research
  • The Customer
  • User goals
  • Business goals
  • Wireframes
• Design
  • Colours
  • Fonts
  • Styling
  • Imagery
  • Layout
• Features
  • Existing features
  • Future features to implement
• Technologies used
  • Languages
  • Libraries/Tools/Programmes
• Testing
  • Validators
  • Lighthouse
    • Homepage:
    • About page:
    • Tours page:
    • Contact page:
  • Manual testing
    • Navigation (on all pages)
    • Homepage
    • Footer
    • Tours page
    • About page
    • Contact page
  • User Testing
  • Bugs
• Deployment
• Credits
  • Code
  • Images
  • Content
  • Acknowledgements -

Table of contents generated with markdown-toc

Over the past few years I have travelled with various group tours and have used a couple of different companies. This has given me a good understanding of what a customer looks for in a travel company and what they expect to find on their website.

• The ideal customer of the website is someone who is looking for a style of travel that benefits both the traveller and the places they visit.
• They want to travel in a way that is responsible and sustainable.
• They are looking to travel with others that have similar interests.
• They want the flexibility to choose a trip with a cost and duration that suits them.
• They are looking for a service that provides them with support and takes away the stress and time involved in planning a trip.

As a user visiting the website, I want:

• to be able to navigate it easily
• to understand the purpose
• to know about the company's ethos
• to find out what tours are available
• to find out the costs involved
• to view images that would inspire me
• to be able to contact the company
• to be able to access the company's social media accounts.

As a business owner, I want:

• to sell group tours
• to offer a platform for users to see what tours are on offer
• to provide an online presence for the company
• to update/create/delete tours as needed
• to enable users to contact the company with any queries
• to share images from past customers to create connections and inspire users.

Links to wireframes

I wanted the design of the website to be relatively simple, with a modern look which appeals to adults in the 20-40 age range.

• Colours

I decided that the main colour scheme would be grey, black and white with accents of coral.

I wanted the bright coral to provide some warmth and contrast to the otherwise quite subtle colours. I have used it as the colour of the footer, the icons and the headings on the 'About' page.

• Fonts

I have decided on the fonts 'Raleway' for headings and 'Montserrat' for the body text which were both found on Google Fonts. They are simple, sans-serif typefaces which are easy to read, accessible and are not distracting to the user.

• Styling

I used icons from FontAwesome as links to social media in the footer and also as imagery on the 'Home' and 'About' pages. I gave the text in the 'read more' buttons a shadow effect as well as the tour card boxes which gives the user a sense of interaction when they hover over them.

• Imagery

All images on the site were taken or drawn by myself. I chose colourful and eyecatching photos for the homepage which will draw the user's attention to them. I made the gallery images into circles by changing the border radius which I think gives them a slightly unusual look and makes them stand out.
I drew the maps and routes of the tours using ProCreate on my iPad. I gave the backgrounds a muted, pastel colour and the place names were handwritten, with the aim of giving the user a sense of a personal relationship with the company.

• Layout

I chose to design a multi-page website as I feel it is easier to navigate, as it is more familiar and predictable to the average user. Although I have made the website responsive on various device sizes, I think most people when looking to make a costly purchase, such as a holiday, they would use a larger device e.g. a laptop, which a multi-page site works very well on.

• Present on each page is:

  • Navbar - This displays the 4 pages of the website: Home, Tours, About and Contact. The current page the user is on is underline so they always know where they are. On a desktop, the links are displayed horizontally at the top right of the page and when on a mobile/tablet, a 'hamburger' dropdown menu appears instead.
    

  • Logo - At the top left of each page is the company logo which takes the user to the homepage when clicked.
    

  • Footer - This contains links to social media accounts which open in a new tab. The background colour is coral which stands out against the white background of each page.
    

• Homepage

  • Hero image
    

    • The heading of 'Local and Worldwide Adventures' makes it immediately apparent what the website is for, when the user first enters.

    • This is always 100% width of the screen.

    • The 'read more' button takes the user to the 'About' page which tells them all about the company. I added a coral text shadow to the button so when hovered over, it stands out against the background.

    • The hero image has a 3 second zoom effect upon loading, which I learnt how to do from the Love Running project.

  • Popular tours
    

    • This instantly lets the user know the sort of tours that are available.

    • The 3 cards are displayed horizontally and switch to vertical on mobile displays.

    • The buttons link to the 'Tours' page where the user can find more information.

  • Why Choose Us?
    

    • This section lets the user know what to expect with the tours we provide.

    • The text is displayed around the image and toggles to vertical on smaller screens.

    • On mobile devices, the image disappears.

    • The grey background helps break up the homepage into sections.

  • Gallery
    

    • The photos are shown in a grid of x4 columns on desktop and x2 columns on tablets/mobiles.

• Tours
  

  • This page features a Bootstrap grid of 6 cards of the tours that are available. The cards switch to a column of 1 when displayed on a mobile screen which allows the user to see the maps and text clearly.

  • There is a link to the contact form at the bottom of the page which lets the user enquire about bookings.

• About
  

  • I wanted to keep this page simple so users can see the company's ethos and values at a glance.

  • I added a link to a PDF document containing the routes of the available tours which users can download if they wish.

• Contact
  

  • This page contains a 'contact us' form which allows the user to contact the company with any queries and it also allows them to subscribe to the newsletter.

  • On larger devices, the contact form appears in the centre of the screen and on mobiles/tablets, the form size increases to the width of the device.

  • After submitting, the user is directed to the Code Institute server which lets them know their query has been submitted.

• 404
  

  • In the footer, alongside the links to social media, I have added a lightning bolt icon which takes the user to a sample 404 error page.

  • A button under the error message takes the user back to the homepage.

• a page of positive customer reviews/feedback
• ability for customers to book tours online
• customer accounts - allow users to log in and view their booking information
• a section/page that connects the company's Instagram and automatically displays the latest images posted
• a page with more information on responsible travel and overtourism
• a search box for users to find what they're looking for quickly
• blog section that travellers can contribute to
• a 'thank you' message that appears when the contact form has been submitted.

• HTML5 - used as main language for website.

• CSS - used to style the web pages.

• Bootstrap - used to create a responsive layout

• Google Fonts - to select and import fonts

• FontAwesome - used to add icons

• GitHub - project code stored in GitHub after being pushed

• GitPod - used to develop the website

• ProCreate - used to draw and create tour maps

• ResizeImage.net - used to crop and resize images

• Chrome DevTools - used extensively during developing and design process

• Balsamiq - used to create wireframes

• AmIResponsive? - used to check the responsiveness on different devices

• Coolors - used to decide on overall colour scheme

• Favicon - used to add a plane icon to the user's tab

• Lighthouse - used to test performance of the site

• W3C - HTML and CSS validators - used to validate code

• W3C HTML validator - I ran each page of the site through the validator and a few typos and stray /div tags were found. I amended these to remove the errors.

• W3C CSS validator - No errors but a 'warning' that the button within the hero image had the same colour (black) for the background and the border. As this was intentional (the background becomes transparent when hovered over) I chose to ignore this warning.
  

• Screenshots of each page that I put through Lighthouse to measure performance-

The SEO on this page was low as I linked to the PDF document using 'Click here'. Once I amended it, the SEO increased.

• Navigation (on all pages)

  • Logo navigates to the home page
  • 'Home', 'Tours', 'About' and 'Contact' all link to correct pages
  • Confirm that the current page the user is on becomes underlined
  • Confirm that the navbar becomes hamburger menu on tablets/mobiles

• Homepage

  • Verify 'read more' button links navigate to relevant pages
  • Verify all images and text are displayed correctly on all devices

• Footer

  • Social media links all open in new tab
  • Lightning bolt icon opens 404 error page
  • Verify footer sticks to bottom of each page

• Tours page

  • Verify page is responsive
  • Verify 'contact us' link directs to correct page

• About page

  • Verify page is responsive
  • Verify link to PDF download opens in new tab

• Contact page

  • Verify form/page is responsive
  • Verify that if you try and submit the form without the required fields, an error message appears
  • Verify that a valid email address containing @ is required to submit the form
  • Verify that 'clear' resets the form
  • Verify that the Code Institute confirmation appears when form is submitted successfully

1. As a first time visitor to the site, I want to easily navigate it.

   • Users can use the navigation bar or click on the company logo from any page of the website to return to the homepage.

   • The layout is sectioned and titled so it is easy to see where each one starts and ends.

2. As a user, I want to know what is being provided and what the values of the company are.

   • A user can find out about the company on the 'About Us' page and on this page there is a list of what is included with each tour.

   • A user can see the company's values on the homepage under 'Why Choose Us?'.

3. As a user, I want to know what tours are available and what the costs are.

   • Users can find maps of the tour routes along with the cost of the trips on the 'Tours' page.

4. As a user, I want to see images from the tours.

   • Users can scroll to the bottom of the homepage to see a gallery of photographs from previous tours.

5. As a user, I want to view the company's social media accounts.

   • Users can access the social media links through the footer of any page of the website.

6. As a user, I want to be able to contact the company.

   • Users can fill out the contact form to reach the company.

   • The contact form has its own dedicated page and there is also a link to it on the 'Tours' page.

7. As a user, I want to be able to access the site on my mobile/tablet.

   • The site is responsive and has been tested across devices.

• I had an issue with a horizontal scroll appearing on the homepage on mobile devices. I played around with DevTools and discovered I had padding around one of the card elements that was causing an overflow. I removed this and the horizonal scroll disappeared.

• When I deployed the site to GitHub, some (not all) of the images were missing.
  
  I then found out it was because I hadn't used the relative file path in the HTML code. Once I added '..' and removed 'assets', the images appeared.

• I had trouble with the form and the footer on the 'Contact' page.
  
  I contacted Tutor Support who helped me and I added flex-grow and flex-direction: column to the CSS code which sorted out the page layout.

The project was created in GitPod and deployed to GitHub using the following steps:

1. Log into GitHub
2. Locate the repository (sara5491/TheRoadisHome)
3. Click ‘Settings’ and locate ‘Pages’ on the left-hand side
4. Under ’Source’ select ‘Branch: Main’ and click ‘Save’
5. Wait a few minutes for the site to be deployed. It will be accessible at: https://sara5491.github.io/TheRoadisHome/

Forking a repository - this allows you to contribute to someone else's project

1. Log into GitHub
2. Locate the repository
3. Click ‘Fork’ at the top right-hand corner of the page
4. This creates a copy of the repo in your own GitHub account

Cloning a repository

1. Locate the repository
2. Above the files, locate the ‘Code’ button
3. To clone the repository using HTTPS, copy the link under 'Clone with HTTPS’
4. Open a terminal
5. Change the working directory to the location you want the cloned directory to be made to
6. Type ‘git clone’ and paste the URL you have copied
7. Press ‘enter’ to create your clone

Instructions from GitHub Docs

• Bootstrap library used throughout the project to make the site responsive

• I used the Bootstrap template for the navigation bar and tour card containers

• The hero image zoom idea was taken from the Love Running project

• The 'Why Choose Us?' section layout was taken from the Love Running Project

• The contact us form was sourced from Bootstrap

• W3Schools HTML and W3Schools CSS were used to help with styling and layout

• Images are my own.

• Written by me
• Company inspiration from G Adventures.

Tutors at Code Institute and members of the Slack community for their help and support.