Somerset Trails
Explore the west country's best trails, one step at a time.
Somerset is world famous for it's beautiful countryside and spectacular hill-top views with thousands of tourists flocking to visit the area every year. Somerset boasts trails such as the Cheddar Gorge, the Exmoor national park, Somerset Coastal path and many more.
Live website here: https://michodgs25.github.io/Somerset-Trails/ - Refresh page if having loading issues
-
Navigation feature demo:https://www.youtube.com/watch?v=rh5Chjdkfms
-
Slideshow feature demo: https://www.youtube.com/watch?v=HrrLd142sC8
-
Google Maps feature demo: https://www.youtube.com/watch?v=56QKj-ul_iI
-
Bottom navigation feature demo: https://www.youtube.com/watch?v=bKr4JHP7VkE
-
Scroll to top feature demo: https://www.youtube.com/watch?v=Lu2wbj7Zdi8
-
Footer feature demo: https://www.youtube.com/watch?v=M-4EeGWfsxI
Contents
UX
Somerset Trails site was born from observing that current sites such as: https://www.somersetlive.co.uk/news/somerset-news/11-stunning-walking-routes-around-2431780, had far too many ads clogging up each page which made the experience visiting the site unappealing. The trails are such beautiful places to explore, the website should reflect this and is discouraging to see advertisements for various companies plastered everywhere. Somerset Trails purpose is to present the best of the Somerset countryside.
Somerset Trails website offers a user (see user stories below) a visually impactful experience through its application of a responsive slideshow on each trail and a Google maps feature enabling the user to toggle between satelite, terrain type and even go street view to explore each trail virtually.
-
A primary design goal of this website is to be easy to navigate, so users can explore each different trail and learn more about each trail via images& google maps seamlessly.
-
The site should be clean with minimal colors that set the focus on the content itself.
-
Map of each trail is to be clearly defined on each page, and easy to use the toggles: terrain and map view.
-
If any texts are used, they should be dynamic and not static.
Main Fonts used in this project
Fonts
User Stories
"As a local businessman whom lives in the area, websites that display Somerset trails are hard to look at with far too many adverts. I'd like the website to be beautiful to view like the trails, with little to no advertising."
- Solution to meet user expectation: no advertisement were used on this website, the full focus is the trails themselves.
"My name is Grant, I don't like websites that are too text heavy and I lose interest quickly because of this I would like the site to have lots of images and only have text where it is necessary as I feel images tell a greater story."
- Solution: The only texts used were headings and universally known icons applied such as home or Facebook. In addition a slideshow on each page displaying different images.
"Hey, my name is Jeremy a product owner for this site. I do not like when a site looks great on desktop but looks crowded& cluttered on a mobile device as I view alot of websites via my mobile so I would like the site to be pleasurable to view on mobile devices."
- Solution: Ensure each section was spaced adequately& minimal colors(six) to ensure site looked clean.
"Good afternoon, my name is Helen a code editor. I would like the website to be easy to navigate, as it's a pain having to scroll back to the top of each page every time I want to access a different part of a website."
-
Solution: Top horizontal navigation bar, bottom navigation button plus a scroll back to the top button. In addition on the homepage slideshow on each slide is a button that accesses that particular trail page.
Strategy
-
Firstly I had to establish target audience, Somerset has popular holiday sites such as: Butlins, Haven sites, glamping& camping sites on the quantock hills, Kittisford& Barton and luxury cottages in the rolling hills. This shows that the countryside is a glamorous& viable getaway for many families so having a responsive& intuitive website can display these amazing trails and the location of them is very important.
-
New locals to Somerset can also benefit as getting to know the area is an important part of settling in; a visually pleasing site would make a good impression and encourage user to explore the area further. And lastly there are many local people who have lived in Somerset for years and have never explored these trails; implementing a Google maps API raises awareness of these trails to those potential users.
Scope
The next problem to solve was that there was already a great website called: https://www.nationaltrail.co.uk/en_GB/ - so what could I offer that is different? Users that come to this site aren't looking for trails in Wales or the north of England, this sites scope is specifically aimed towards users who either are local or who are visiting the Somerset area for a period of time.
So the next step was figuring out how to maximise the user experience and present the best of Somerset trails using imagery as primary source of information for the user. The solution came in the form of two major features - a slideshow& a Google map on each page, this provides images sourced from Google images and applies Google's powerful maps application which is known worldwide for its quality user experience.
Wire-Frames
Homepage
Home page header wireframe
Home page body wireframe
Home page footer wireframe
Results page
Results page header
Results page body
Results page footer
Features
Navigation bar feature
-
The navigation bar for homepage and each trail result page contains two tabs: home and Somerset trails.
-
The home tab acts a tool for the user to access the homepage.
-
The Somerset trails tab is a hover drop-down element, when the user hovers on the tab; the navigation bar expands and a box drops down.
-
The dropdown box provides every trail available to the user at a single click and whilst hovering over each trail name the background lights up green.
Navigation& Navigation dropdown
-
Edit: Somerset trail tab lights up green when expanded and each trail has a visible black border whilst hovering over option, also text is now white to increase quality.
Navigation bar Summary:
-
This feature was inspired by user stories, specifically, user Helen who asked for the site to be easy to navigate.
Slideshow feature
-
The slideshow on the homepage will have a picture of each trail accompanied with a caption& a button so the user can access that specific trail immediately.
-
The slideshow on each trail results page will be a series of images of that trail.
-
The slideshow is automatic, with each slide changing every two seconds.
Slideshow
Slideshow Summary:
-
This feature was inspired by user stories, in particular, user Grant who who wanted lots of images and minimal text.
Google maps API feature
-
The map on the homepage will be a map of the somerset area with markers placed on each individual trail locations.
-
The homepage map& result trail page will have a terrain& satellite toggle buttons.
-
The map on the trail result page will be focussed on that particular trail, displaying the trail location.
-
Each map has the ability to access street view of each trail, by dropping the little figure onto the map and zoom in& out toggles.
Somerset Maps
Google Maps feature Summary:
-
The Google maps feature was inspired by user stories and the ambition to exceed user expectations by adding not only imagery but virtual reality which each user can use to explore each trail and the general area.
Explore tab feature
-
A dropup button placed directly above the footer section, the dropup box is accessed by hovering the cursor over the button or tap in tablet& mobile.
-
The dropup is fully responsive, on all device screens.
-
The box contains all the trail links like the navigation bar, so the user can access the next trail with ease whilst at the end of each page.
Bottom page navigation
Explore tab Summary:
- The explore tab was inspired by user story regarding navigation, also because of the difficulty of creating a fixed navigation bar feature that would follow the user as he/she scrolled the page(See https://github.com/michodgs24/Somerset-Trails/issues/11#issue-635441825 for further details on navigation difficulties). The explore tab is a compromise as once the user reaches the bottom of the page, the user can just hover over the tab and each trail will be available with one click.
Scroll back to top of page button feature
-
A button placed on the right hand side of the page, user can click the button and will be taken back to the top of the respective page.
-
The button only appears once the user has scrolled past the top navigation bar, the button hovers on the far right of the screen as to not be distracting but still noticeable.
Scroll tab
Scroll Summary:
-
The scroll back to top button was inspired by navigation, so if the user did want to return back to the top of the page, just one click of the scroll button it will ease up automatically.
Footer feature
-
Footer section signals to the user that the page has ended and provides links to homepage social media.
-
The links are center horizontally, with a light orange background& icons styled green. The site logo on far left,social media: Facebook and twitter in icon form that opens a new browser tab when clicked on, which takes the user to either our facebook/twitter page or login page if not signed in. Home icons takes the user home and the logo is static and there for trademark/visual purposes.
Footer section
Updated footer
Footer section
-
Feedback from from influenced this footer update - Read slack article here: https://github.com/michodgs24/Somerset-Trails/issues/18#issue-650534228
Footer Summary:
- Although the footer signals the end of the page, it is still important as spreading the word of the website via social media is such an important tool to raise awareness of the site.
Features left to implement
-
Summary "With future iterations of the website, the primary aims are to expand the number& enhance the content of each trail with further images, Google maps capabilities, and the improve page loading times. There are many enhancements that can be made for example #11 and future iterations aim to improve site responsiveness also."
Read full article here - https://github.com/michodgs24/Somerset-Trails/issues/1#issue-612876703
Technologies
-
Html, Css and Javascript language
-
Balslamiq - https://balsamiq.com/
-
JQuery library - https://jquery.com/
-
W3.CSS - https://www.w3schools.com/
-
Google Maps - https://developers.google.com/maps/documentation/javascript/examples
-
JS hint - https://jshint.com/
-
W3S html& css validator - https://validator.w3.org/
-
mobiReady - https://ready.mobi/
-
Google mobile friendly test- https://search.google.com/test/mobile-friendly
-
Lighthouse - Find via google developer tools in browser.
-
Free formatter - https://www.freeformatter.com/html-formatter.html#ad-output
Testing
Testing site on different browsers - i.
Shared the link on google, internet explorer and yahoo to ensure the site looks and works as it should on different browers.
Testing device on various screen sizes - ii.
Opened Google developer tools and toggled the site between various devices, that include:
- iphone X
- Moto G4
- Pixel 2
- Pixel 2 XL
- iphone 5/SE
- iphone 6/7/8 & plus
- ipad and ipad pro
Also opened site on Samsung S10 mobile device and explored all the features.
Summary:
Device looked& worked as intended on every device and screen size that was available, the primary mobile testing screen was the iphone X as this had the ratio of 375 x 812 (width x height), with it being such a narrow width ensuring features such as the drop-up navigation box had to be carefully monitored to ensure no overlap thus causing x-scroll.
Site performance testing
Testing mobile friendliness - iii.
Applied three different verified automated online testing tools to ensure website is ready for mobile:
1.
Google developer tool lighthouse:
- Opened Google developer tools on-site, find lighthouse on navigation bar(next to security) and click generate report.
Lighthouse Results
- Summary: "The lighthouse tool provided a good insight into the website mobile performance and assisted the development process by suggesting the scroll event-listener to improve scroll on mobile. Although this suggestion helped the scroll performance on mobile, re-running the lighthouse tool again, there was no improvement. During the evaluation of the feedback, it is clear the chrome extensions have a negative impact on every category of the site, performance is also negatively impacted due to the number of unique domains called such as font awesome or JQuery. I estimate that the site does indeed meet the required standard for mobile and the results attained from Google mobile test, back this estimation. Future iterations of the site to look further into solutions to improve these statistics, in particular, the performance category by reducing the special domains and reducing file size."
Update:
Through testing scroll via mobile(Samsung Galaxy S10), scroll wasn't as smooth as could be, so removed the event-listener to see whether this was the issue. Scroll turned out to be alot more smoother without the event-listener; so the decision was to made to remove it permanently and future iterations to investigate this further.
Lighthouse results discussed here: https://github.com/michodgs24/Somerset-Trails/issues/10#issue-634894703
2.
Google mobile friendly test:
- Entered website link as indicated into enter bar on homepage, an automated testing tool to verify if site is equipped for mobile devices follow link below to see the results:
https://search.google.com/test/mobile-friendly?id=VI5xc_oZOk01oyRxKnw2GQ
Google mobile test
-
Summary: "This tool has determined that the Somerset Trails website is mobile-friendly through its robust testing procedure. Future iterations of the site will look to address loading times."
Google mobile friendliness results discussed here - https://github.com/michodgs24/Somerset-Trails/issues/14#issue-639764387
3.
mobiReady mobile test:
-
Enter website link as indicated into enter bar on homepage, press enter and the site automates the website to whether it will be mobile ready.
mobiReady
- Summary: "Overall this tool proved useful as it highlighted issues within the website that hindered user experience on mobile devices and provided valuable suggestions to resolve existing errors within the site. Although there is still one major fail and six minor fails, this will allow the developer to focus on these specific areas in future iterations of the website."
mobiReady results discussed here - https://github.com/michodgs24/Somerset-Trails/issues/15#issue-639850820
*Automated testing provided great value to shedding light on issues within the site as human error is very prevalent in the development process.
Functional testing
To ensure each feature works as intended, I manually tested each section from navigation bar to the footer icon links.
-
Summary: "Functional testing has been positive overall with only two slight issues which are more performance errors rather than functional as all features work as expected."
Read full manual walk-through of each feature and how is should work here: https://github.com/michodgs24/Somerset-Trails/issues/17#issue-646701558
Code validity
Testing Code validity - iiii.
Tested html and css code formatting with https://validator.w3.org/ - done by copying& pasting the code via direct input into the site text box.
Tested the JavaScript code with https://jshint.com/ - done by copying& pasting the code via direct imput into the site text-area.
- Summary:
No errors were found in either tests, ensuring code is error free.
Testing website on mobile - iiiii
Copied site link: https://michodgs24.github.io/Somerset-Trails/ and explored the site testing each feature and the testing was done on a Samsung Galaxy S10 mobile device. Also tested the smoothness of the scroll.
- Summary:
All features work as intended, scroll is reasonably smooth and the only issue found was to do with the bottom navigation box which has been resolved.(see project barriers& solutions - https://github.com/michodgs24/Somerset-Trails/issues/16#issue-646458556 for in depth discussion on bottom navigation)
See mobile test footage here:
Exploring features: https://youtu.be/HtJoxYOrtiY Mobile scroll: https://www.youtube.com/watch?v=50wVodbREuI
Slack feedback
Summary: "Slack feedback is very valuable, as it aided the development process of increasing site responsiveness. Some of the feedback is noted such as the navigation& texts but minimal changes made, as they are specific design choices as stated above."
Read full article here: https://github.com/michodgs24/Somerset-Trails/issues/18#issue-650534228
Version Control
This sites version control is through github and using gitpod IDE, once completed a piece of work, I would type into the terminal:
git add index.html
- Adds a change in the working directory to the staging area.
git commit -m "Update index.html code formatting"
- Captures the state of a project at that point in time. Ensure message is specific to the changes made to the file(s).
git push index.html
- This pushes the file to the github project repository.
Deployment
-
This site is hosted using GitHub pages, deployed directly from the master branch.
-
The deployed site will update automatically upon new commits to the master branch.
-
In order for the site to deploy correctly on GitHub pages, the landing page must be named index.html.
-
To run locally, you can visit the project page(master branch): https://github.com/michodgs24/Somerset-Trails and clone the relevant code:
Master Branch page
-
To run this site locally, via git-pod, type into the terminal:
-
python3 -m http.server
-
opens port 8000, which the IDE presents three options two of which, view the site immediately: Open preview(Opens a window within the IDE) or open in browser(that is set as the main browser).
-
-
The code will be executed in the browser that is set as main browser, this can be Chrome or one of the other available browsers. When executed the homepage will appear.
Project barriers and the solutions
This section looks into the barriers that occurred during the process of this building this project and what solutions were chosen to hurdle those barriers:
Navigation bar barriers& solutions -
- Summary: "The navigation bar looks clean& interactive and works as intended. The drop-up nav and scroll to the top button provide greater ease of use to the user thus an effective solution. On mobile screens the navigation is large and the Somerset Trails tab ends up below the home icon, as a developer, I applied breakpoints to reduce the height of the navigation.
Although attempts to add a responsive breakpoint to mobile devices with a width of 411/420 did not seem to have any effect. I did increase the width of the navigation dropdown box in mobile ensuring it filled the length of the navigation expansion but again devices with widths of 411/420 did not respond whereas smaller devices(300-400) did respond.
Future iterations of the site will aim to resolve the navigation width for 411& over mobiles and add the site logo to the navigation bar, as will make this feature more personalised to this website and address issues stated above."
Read full article here - https://github.com/michodgs24/Somerset-Trails/issues/11#issue-635441825
Slideshow barriers& solutions -
- Summary: "The slideshow works as intended, albeit a slight jolt with some images due to varying heights but is barely noticeable. Future iterations of the site will address this. After receiving feedback from slack #18, I found a solution for the image jolt and issue has now been resolved."
Read full article here - https://github.com/michodgs24/Somerset-Trails/issues/12#issue-635778916
Google Maps barriers& solutions -
- Summary: "Although the implementation of maps presented the most significant challenge throughout this process, the value of the maps to the user experience is immense as it adds a different dimension with its virtual capabilities. Future iterations to update and maximise Google maps to the fullest extent."
Update -
Moving Google maps documentation from HTML documents and into an external .JS file was discussed with my mentor, code institute and also learning people. The consensus reached across the board was that due to calling multiple different maps with varying markers across the site, it will not be possible to place all the maps in one file. If for example I were just calling the one single map, it would not be an issue as this is shown in the code institute tutorial - Adding The Map Element (Bootstrap 4) or using google developers tutorial https://developers.google.com/maps/faq to append to the script tag of the HTML document.
With further testing& investigations, I was able to append the home maps code via app.js, to the homepage(index.html script), however the rest of the maps code was still inline within each HTML document. Later on a solution was concocted to create a .js file for each map and append the map to the specific HTML script calling class="map-custom"to each script tag.
An unfortunate side effect implementing this solution is having to add an additional script to the footer of each page, the site was having loading issues prior to this and now the main banner sometimes does not appear at all. The page has to be refreshed for this to happen, this occurs more often on desktop screens where the banner is at its largest.
Please visit https://github.com/michodgs24/Somerset-Trails/issues/8#issue-629929008 for in-depth discussion on the overall banner process.
Despite this minor seback the positives outweigh the negatives, as the HTML documents footer are not bloated anymore& the code is cleaner and browsers can load maps with greater efficiency.
See https://github.com/michodgs24/Somerset-Trails/issues/13#issue-637367865 for an in-depth discussion on the Google maps process.
Bottom navigation barriers& solutions -
-
Summary: "The issues found with the drop-up were found whilst testing the site on different device screens and physically using the site with Samsung S10 mobile device. Once the width and positioning was adapted as stated above, this feature works as intended. Future iterations to expand on the design of the feature, adding the site logo and an image of each trail when user hovers over that trail option."
Read full article here - https://github.com/michodgs24/Somerset-Trails/issues/16#issue-646458556
issues and bugs
This section looks into what existing issues that are still present in the project& what future iterations could do to resolve these issues:
-
Slideshow -
- Summary "Images are such an important aspect of this website, beginning with user stories that asked for the site to be primarily images instead of text and the subject being outdoor trails. Future iterations will not only look into expanding& increasing the quality of each image but resolve inline CSS code adapted from W3S schools."
Read full article here - Slideshow https://github.com/michodgs24/Somerset-Trails/issues/9#issue-634880128
-
Banner -
- Summary "The banner works as intended once the page is refreshed, future iterations to look at ways to resolve the issue by reducing the file size or a way to help the browser load an image of that size more efficiently."
Read full article here - https://github.com/michodgs24/Somerset-Trails/issues/8#issue-629929008
-
Navigation -
- Summary "This issue is purely visual, the navigation functionality works as intended on all device types. I was unable to resolve this issue, specifically, mobile widths of 411& over, as resolving this one error only created two more and those errors would affect the function itself. Future iterations of the website to re-structure the navigation bar to be more responsive."
Read full article here - https://github.com/michodgs24/Somerset-Trails/issues/20#issue-652252798
Acknowledgements
-
W3.CSS - Code file: https://www.w3schools.com/w3css/4/w3.css site homepage: https://www.w3schools.com/
- Credit to W3.schools for navigation, slideshow, bottom-nav and scroll to the top button code.
-
Code institute - https://codeinstitute.net/
- Credit to code institute walk through project love running for the banner animation inspiration& code.
-
Google Developers - https://developers.google.com/
- Credit to google developers documentation for mapping code.
-
Site point - https://www.sitepoint.com/google-maps-javascript-api-the-right-way/
- Credit site point documentation on how to plot markers
-
W3S validator - https://validator.w3.org/
- Credit W3S for ensuring html& css code is error free.
-
JSHint - https://jshint.com/
- Credit JSHint for ensuring JavaScript code is error free.
-
Lighthouse - find in developer tools
- Credit lighthouse for providing critical analysis of site.
-
mobiReady - https://ready.mobi/
- Credit mobiReady for automated mobile testing service to ensure site is fit for mobile
-
Google mobile friendly test - https://search.google.com/test/mobile-friendly
- Credit Google mobile testing to ensure site is error free and mobile friendly
All code adapted is for educational purposes only and not for commercial gain.
External Media
All images were take from Google images advanced search with filter - "free to use or share"