• Wicklow Walking Tours
  • Objective
    • User Stories
  • Design and Layout
    • Content
    • Site Layout
  • User Experience
    • Color Scheme
  • Testing
    • Validator Testing
    • Device Testing
    • Performance Testing
    • Bugs
    • Known Bugs
  • Development
    • Languages
    • Tools / Technologies
  • Credits
    • GPX Routes
    • Media
    • Code Attribution
    • Other

The project aimed to achieve the following objectives:

• Build a user friendly static website with a high level of compliance with modern modern CSS and HTML design principles
• The website would be fully responsive and work across both desktop, mobile and table devices
• The desktop would incorporate a range of design features that would deliver an engaging and delightful experience for the end user

• As a potential customer

  • I want to be able to discover what types of walking tours are offered.
  • The information on the site should be clearly presented and easy to understand.
  • I want to be able to access the website from both mobile and desktop devices.
  • I want to be able to preview the site route.

• As the site owner

  • I want to allow potential customers find out more about the different types of walking tours offered.
  • I want to provide users with the ability to send a tour booking enquiry.
  • I want to provide users with contact information for the company.

The content of the site was inspired by personal experience hiking in the Wicklow Mountains as well as my experience using websites to plan and map hiking routes.

The site layout was drawn out by hand; core elements were as follows:

• A static navbar that would persist on scroll.
• A Hero Image with a fade in element.
• Site content would be laid out in a gird format with a gird size of two columns. This would collapse to one column for responsive devices.
• In order to offer a more immersive user experience a themed scroll bar would be used.

In designing the user experience, I aimed to satisfy the user stories defined by both the site owner and the site user

• A fade in animation would 'reveal' the hero image to the user
• The site would utilise maps to illustrate the walking routes that were offered
• A contact form would be used for customers to contact the company for walking tours
• The site would allow the user to preview the walking trails. This would be achieved using a dynamic GPX track being overlaid on a Google Map using the Google maps API

The color palette for the site was inspired by the hero image; colors were selected to suggest earth, water and grass elements.

The colors chosen were as follows :

• #1E566C Blue Sapphire
• #863B1D Kobe
• #2B8C67 Sea Green
• #FFFBFC Snow

• HTML
  • No errors were returned when passing through the official W3C validator
  • Three warnings were reported; these related to suggestions to add h2-h6 header elements to the site sections; however these warnings are only advisory.
• CSS
  • No errors were found when passing through the official Jigsaw validator

Testing was completed across a number of platforms as follows:

• The site was tested on Chrome and Firefox
• Testing was completed on Linux, Windows and iOS
• The device was tested across a number of screen sizes, from a simulated Galaxy Fold to a 4k display

Performance was tested using Lighthouse in Chrome Dev Tools. The final full reports can be found here:

• Performance issues on Desktop were highlighted with respect to the site load times. This was driven by very large image sizes and was mostly resolved by the resizing and compressing of images.
• Performance issues on Mobile were also highlighted with respect to the site load times. In this instance, this was being driven by the importing of the images from the Google Maps API. As I was unable to resize these images, give the content was dynamic I chose to accept these performance issues. Preview of the routes was a core website feature and I did not want to compromise this over performance.

The following bugs were encountered during the development and the following fixes were implemented:

Bug: GPX route overlay did not initially work when the site was published on GitHub pages. The site had been tested locally using relative paths to the underlying GPX files but these were not being read when hosted on GitHub Pages.

Fix: This was fixed by linking directly to the raw gpx files being hosted on GitHub as opposed to using relative paths from the javascript file.

Bug: Laggy scrolling was encountered when scrolling on both desktop and mobile.

Fix: This bug was being caused by very large image sizes. The original image sizes were a combined total of over 10MB. This was reduced to under 600Kb following image resizing.

Bug: Persistent navbar was initially overlapping the scroll bar.

Fix: This was a design bug and was fixed by wrapping the site content in a separate container.

Bug: Responsive flexbox elements were not dynamically resizing as expected with overflow of elements.

Fix: This was an annoying bug to fix; it was being caused by the fixed width of the site elements. Finally it was fixed by setting heights and widths equal to min and max values that were defined in terms of responsive units.

Following testing, the following known bugs were found and remain unresolved:

• Text jump on initial load:
  On loading the site for the first time the Hero Text element will 'jump'. I suspect this is due to the way the Hero Text element has been placed using a gird overlay on the hero image and is related to the viewport recalculating after the initial load.
  I was unable to resolve the bug prior to deployment but overall it is relatively minor and does not compromise the site integrity.

• HTML
• CSS
• Javascript

• VScode
  All coding was completed in VS Code with a number of extensions used.

• Google Maps API
  This was used to generate the location marker for the business address as well as being used to generate the dynamic maps with the overlaid gpx files

• coolors.co
  Potential site palettes were tested with Coolors.

• gauger.io
  This website was used to generate the favicon using an icon from Font Awesome.

• ImageMagick
  For resizing images for the improvement of site performance

• Am I Responsive?
  For rendering the device preview image

• https://ecotrust-canada.github.io/
  For generating the markdown table of contents

• leondolman
• macbre.pl
• Paul Martin Kelly

• Images were sourced from Unsplash. In particular:

  • About Image: Cole Patrick

  • Hero Image: Margaux Bébin

• The code for the persistent navbar was inspired by the following post on W3 Schools: link

• A fix for the navbar overlapping the hero image was taken from the following Stackoverflow post: link

• The following code was referenced to create the color transition: link

• The following code was referenced for the star icons: link

• The following code was referenced for the creation of the gird layout: link

• The following Stackoverflow post helped with the phone number validation: link

• Google Maps GPX overlay was inspired by the following post from Stackoverflow: link

• In order to get more than one Google Map embed working, the following post was referenced: link

• Images converted with Image Magik using the following recommended settings: link

• CodeInstitute modules on HTML, CSS and UX.
• My mentor for his suggestions and feedback on the project.
• Jonas Schmedtmann advanced CSS course on Udemy