Wicklow Motorcycle Tourers is the website for a motorcycle touring group based in Wicklow, Ireland. The intention of this site is to provide an overview of the meeting location and ride times for riders who wish to tour Wicklow with other like-minded riders and make use of a roadside bike shed.

The purpose of the site was to ultimately get users to sign up with the group. Given the nature of the group's activities (i.e. being dependant on weather conditions), only the bare minimum details of the weekly meet ups would be posted to the site with the intention that a user would sign up and receive detailed emails on each upcoming weekly meet.

Wicklow Motorcycle Tourers

https://github.com/cmikedev/wicklow-motorcycle-tourers

• The site is divided into four pages sharing common features (as detailed below):
  • Home
  • Rides
  • Bike Shed
  • Sign Up
    
  
  
• There is an additional 'Thank You' page which is only accessed once the sign up form is completed and submitted by the user.

The colour palette is very subdued with only white, black and shades of grey being utilised. This was to frame the navigation, text and footer in a clear, clean way whilst maximising the sense of flow and engagement provided by the video.

Of the fonts available on Google Fonts I chose 'Lobster'. The stylised, italic nature of this font is one that is common to many motorcycle-centered websites, tshirts and other visuals and so might elicit a sense of familiarity to motorcycle riders.

• Navigation Bar

  • The navigation bar is featured on all pages where there is click-access. It is not featured on the 'Thank You' page which is only accessed via completion of the sign up form.

  • This allows the user to navigate across the website without having to use their browser's back button. The page name in the navigation bar is underlined when the user hovers over that page and is permanently underlined when a user is on that page allowing them to easily see where they are.

     

• Page Videos

  • Each page contains a video which was chosen to create a sense of motion through the site and elicit a sense of companionship and belonging and a desire in the user to get onto their bikes, thus going to the sign up page.
    
  
  

  Home page video

     

  Rides page video

     

  Bike Shed page video

     

  Sign up page video

     

• Main Text

  • Overlaying each video is a text box providing an introductory welcome to the section as well as a link to the next page facilitating the users journey to the sign up form. The text boxes overlaying the videos are relatively opaqe and off-set so as to be obvious, legible but not interfere with the sense of motion created by the video.

     

  • The 'Sign Up' page differs in that the text box which contains the sign up form is centred rather than off-set and is not opaque. This is because the user will have reached our intended destination and so the sign up form is styled to stand out over the video in order to capture and hold their attention.

     

• Information Section

  • Below the video and main text on the 'Home' and 'Rides' pages is a section providing some more information about the Wicklow Motorcycle Tourers and in the case of the 'Rides' page, ride times and an Embedded Google Map showing the meeting location.
    
  
  

  Home page

     

  Rides page

     

• The Footer

  • The footer section contains social media links encouraging the user to connect and engage via social media.
  • The social media links open in a new tab allowing easy navigation for the user.

     

• The Sign Up Form

  • The sign up form is located on the Sign Up page.
  • It allows the user to get signed up and be kept abreast of all ride information.
  • The form requires the user to input their first name, last name and their email before submitting.
    
  
  

• The Thank You Page

  • The 'Thank You' page is accessed once a user has filled out all required fields in the sign up form and submitted.
  • The page opens in a new window thereby not disrupting the users access to the main site.
  • The 'Thank You' page has purposely been designed to be minimalistic with many elements such as the header and footer being removed.
  • A central image is added in place of a video to retain the minimalism but also the sense of motion.
  • The aim of this page is to:
    • acknowledge the user providing their details
    • confirm that they have been received
    • direct them back to the main site via a link which opens in a new browser

     

• The responsiveness tests were carried out manually using Google Chrome's Inspect Function. Some of the devices tested included (but not limited to):

  • Nest Hub Max
  • iPad Mini
  • Samsung Galaxy S8+
  • iPhone SE
    
  
  

• Testing on a real device (Samsung Galaxy S8) revealed that the footer social media links no longer lined up at that screen resolution:

     

• This was corrected and the footer social media links appear correctly in a row on the Samsung Galaxy S8:

     

• W3C

  • HTML
    • There were no errors or warnings within the HTML when checked through The W3C HTML Validator
  • CSS
    • There were no errors or warnings within the HTML when checked through The W3C CSS Validator
      
    
    

• Lighthouse (web.dev)

  • Lighthouse through web.dev was used to test the site for:
    • Performance
    • Accessibility
    • Best Practice
    • SEO
      
    
    

  None of the results were below 90%
  
  
  
  

  • The full test results can be found here
    
  
  

• The website was deployed using GitHub pages via the following steps:
  • In the Respository section, select the wicklow-motorcycle-tourers repository
  • From the horizontal menu above the repository contents select Settings
  • From the left-hand vertical menu, go to the code and automation section and select pages
  • From the Source selection drop-down, select Branch > main
  • The page will then automatically refresh displaying a ribbon indicating deployment status
    
  
  The deployed website can be found here - https://cmikedev.github.io/wicklow-motorcycle-tourers/
  
  

• The GitHub repository can be forked to make a copy of the original. This copy can then be viewed or changed without affecting the original repository via the following steps:
  • In the Respository section, select the wicklow-motorcycle-tourers repository
  • At the top right of the page select fork from the menu below your profile
  • A copy of the repository will now be created in your account

• To create a local clone via GitHub:
  • In the Respository section, select the wicklow-motorcycle-tourers repository
  • From the horizontal menu above the repository contents select Code
  • Copy the link that that is shown
  • Within Gitpod change the directory to where you would like the location of the cloned directory to be
  • Type git clone and paste the link that you copied
  • Press Enter and the local clone will be created
    
  
  

• The favicon in the tile (page tab) was taken from flaticon
• The icons in the footer were taken from font awesome
• The fonts were taken from Google Fonts
• Code from the Love Running project was utilised in the navigation, footer sections and social media links

• The background videos and background image were taken from pexels
• The map was taken from Google Maps

• Stackoverflow was referenced for guidance on using a background video within a div container

I would like to thank my course mentor Harry Dhillon for providing guidance on this project as well as Daisy Gunn and Tasha Johnson for providing styling inspiration for the README.