LIVE SITE ON GITHUB PAGES

The aim of this project is to highlight a selection of Game Reserves in each of the 4 prominent Safari destination countries in Africa. The project is scalable, and more countries and reserves can be added in future.

• Overview
• User Stories
• UX
• Features
• Technologies Used
• References for learning
• Testing
• Project barriers and solutions
• Code validity
• Version Control
• Deployment
• Credits
• Acknowledgments
• Support

Please note: To open any links in this document in a new browser tab, please press CTRL + Click.

The aim of this project is to showcase Safari and Game Reserve destinations to promote tourism back to the areas after the COVID-19 lock-downs.

• "I don't have a PC or Laptop at home and generally do all my online searches on my mobile"
• "I want to get an idea of where the best reserves are"
• "I want to be able to subscribe to a mailing list about future projects"
• "I want to get in touch with some unanswered questions about reserves"
• "I want to be able to join a community forum or social media group to see some of the past safaris run, and get regular updates"
• "I am interested in taking part in a trip, but would like to see some reviews first"

This website project will target a large demographic of individuals and families from all walks of life, hence an overall simple, yet effective website is aimed at. The priority focus is on information, images, maps, subscribing to a mailing list, contact and social media links.

The UX is clean and user-friendly and provides an easy navigation journey to reach relevant sections with ease.

Project Goals:

• Showcase the top 3 game reserves in 4 of Africa's most well-renowned Safari destination countries.
• Promoting game reserves by showcasing the best they have to offer.
• Obtaining subscriptions for mailing list, thereby increasing customer databases.
• Direction to Facebook Group links for each reserve, expanding on their group numbers.

Customer Goals:

• Designed site with Mobile-first approach.
• Display interactive maps for each country and each reserve within each country
• Contact form provided with option to sign up for mailing list.
• Relevant Social Media icons in the footer and links in reserve pages.
• Fixed navigation bar providing user easy navigation reference.
• Review API (Stretch goal)

• Provides a clean UX for users with easy navigation.
• Fits in with my current skill-set of HTML, CSS, JavaScript and API use.
• Quickly defines the content and focus on images and maps, subscribing to a mailing list and getting in touch via email or social media.
• I've included some JavaScript animations to subtly enhance the overall experience without overpowering the page.

The main focus of the structure is to allow Users to quickly assimilate the information, maps and imagery. Short, focused paragraphs of content information to provide enough information, yet not overwhelm. A selection of quality images to showcase the game reserves. Brief introduction information for each country. Points of contact are provided via email contact form (with newsletter subscription option) and links to Social Media in Footer.

• Wireframes: One-page website with 4 main sections.
• Fixed navigation bar - Menu headings pointing to each of the 4 pages.
• Home, About, Reserves and Contact pages
• Footer with Copyright info and Social Media icons
• (Add Country info via API - stretch goal dependent on time) - Stretch goal completed - Country REST API Info presented on About section.
• (Review API section - stretch goal)

Colours

Nature/Safari colours to fit in with the theme of wildlife conservation

Typography

• "Crete Round" font (with fall-back font of Serif) for main headings. This font was chosen for its typical 'Safari' look.
• "ABeeZee" font (with fall-back font of Sans-Serif) for body content which I found clean and balanced and not too formal.

Images

The image selection has been carefully considered to best showcase each reserve.

Maps

Interactive maps with smooth transitions to each location Additional reserve info on map markers

Design Choices

• On the intro page, I have specifically decreased the image transition rate in the image carousel, to subtly show the zebra pattern beneath momentarily between each slide. I felt that vivid and immediate image transitions would break the consistency of the ux and theme.
• Original layout from wireframe 'felt' different on screen to how I had first imagined it; and as a result, I decided on an alternative layout midway through the project. Original Wireframe

• Designed with HTML5, CSS3, JavaScript and Bootstrap.
• Home/Landing page with 4 pages in total.
• Fixed navigation allows the user to easily navigate, regardless of which page visited.
• About section outlining project focus; and REST Country API use for general country information.
• Country/Reserve section with live webcam feeds and dropdowns for reserve info and map locations.
• Footer with social media links.
• Contact Form with radio buttons.

• Add review section. This was intended as a stretch goal, but due to being fictional company, there would be no review content.
• After agreeing to subscription to newsletter in contact form, I'd like to include an automatic response of a first newsletter. As a ficitonal company, there is no newsletter at this point.
• Once skills develop, I would like to add a reservation/booking system for accommodation, park entry etc.
• Make site further scalable by using more HTML text as JSON objects, such as reserve information.

HTML5

CSS3

JavaScript

Bootstrap - by linking via Bootstrap CDN to HTML Doc.

FontAwesome Icons for Social Media links in Footer.

Google Fonts - Overall Typography import.

jQuery - JavaScript library

LeafletJS - Interative Maps API

REST Countries - REST Country info API

VSCode - Main workspace IDE (Integrated Development Environment)

Git - Distributed Version Control tool to store versions of files and track changes.

GitHub - A cloud-based hosting service to manage my Git repositories.

• Autoprefixer Parses CSS and adds vendor prefixes.
• Google Mobile-Friendly Test Mobile-friendly check on site.
• Website Page Test Runs a website speed test from multiple locations around the globe using real browsers (IE and Chrome) and at real consumer connection speeds.
• Online-Spellcheck Online spelling and grammar checks.

• Auto Close Tag
• Auto Rename Nametag
• Bracket Pair Colorizer
• Code Spellchecker
• Prettier - Code Formatter
• Indent-Rainbow

• Code Institute Course Content - Main source of fundamental knowledge.
• Code Institute SLACK Community - Main source of assistance
• Stack Overflow - General resource.
• Youtube - General resource.
• CSS-Tricks - General resource.
• W3.CSS - General resource.
• CommonMark - For Markdown language reference.
• iColorpalette - Find relevant color palette for site.
• TinyPNG - Efficient compression of images for site.
• Am I Responsive - Responsive website mockup image generator.
• Balsamiq - Wireframing design tool.
• Bootstrap Grid Explanation by Anna Greaves - This was an invaluable resource for me to wrap my head around Grid layouts.
• Tim Nelson's Github for LeafletJS

Testing documentation can be found on a separate document HERE

• Map pins were not removing after clicking reserve button, and then clicking a new country button. Had a screen-share session with Tim Nelson to try and resolve this. Need to research using Marker Clusters with LeafetJS - Updated: Tim found a fix for the existing code without necessitating marker clusters.
• Existing layout for Country/Reserve section with maps was not as expected on mobile view as the UX was difficult to navigate. Overcame this by creating a new branch and testing a new layout using dropdown buttons for the main country and reserve buttons.
• As above, found that when selecting a reserve (and then trying to scroll down to the info (under the map) it was finicky on mobile as the map is touch-responsive. This was interfering with usability and UX. Simply moved the map under the reserve info, which resolved the issue along with the dropdown box layout.
• Was having issues with the live webcam player for Namibia, (for which the only available source is non-Youtube based). Replaced with live-stream from a South African waterhole for this section (to be looked and and try to resolve after project submission).
• Had an issue with slideshow images all showing for 1 second before loading first image. After not finding a resolution and trying various functions, I overcame this by designing a pre-loading animation. This not only resolved the issue, but added a good intro and UX to the site.
• Unsolved bug: see Testing. iframe comes out of container on small mobile view on Safari browser. UPDATE: Overcame this by creating a new testing branch for the bug and after 2 attempts with different approaches, I resolved this issue.
• Unsolved bug: Country Buttons on About section have transparent background on focus. This seems to only appear with Samsung phones. Checked on an iphone and Huawei phones and this problem does not present itself.

HTML - W3C - Markup Validation

CSS - W3C - CSS Validation

JavaScript - JSHINT - JavaScript code warning & error check

TAGS - Closing Tag Checker for HTML5 - Validates all tags are opening and closing correctly.

• Used Git for version control.
• Branches were created to work on alternative layout and buttons.
• The branches were then merged with the master branch after any conflicts were addressed.

This project has been deployed on GitHub Pages with the following process:

• All code was written on VSCode, a local IDE (Integrated Development Environment).
• The code was then pushed to GitHub where it is stored in my Repository.
• Under the Settings section of the GitHub repository, scrolled down to GitHub Pages section.
• Under 'Source' drop-down, the 'Master branch' was selected.
• Once selected, this publishes the project to GitHub Pages and displays the site URL.
• There is no difference between the deployed version and the development version.
• The code can be run locally through clone or download.
• You can do this by opening the repository, clicking on the green 'Code' button and selecting either 'clone or download'.
• The Clone option provides a URL, which you can use on your desktop IDE.
• The Download ZIP option provides a link to download a ZIP file which can be unzipped on your local machine.

Media

• Site background image from Public Domain Pictures
• Intro carousel images from Unsplash
• About page image from Graham Springer Fine Art
• Africa outline image from Pintrest
• Combination of above 2 images into final product - self-made on Photoshop
• Reserve placeholder image and footer (edited for needs) taken image from PNGFuel
• Preload antelope animation .gif from Icons8

Content

• Tim Nelsons's extensive documentation on LeafletJS Maps from his MS2 project

Bootstrap 4 CDN Boilerplate

• I've taken advantage of Simen Daehlin's template boilerplate from his Marketplace

Code Snippets

• CSS: Main Country and Reserve Button styling adapted from Button Generator
• Dropdown buttons adapted from Bootstrap
• Navigation bar adapted from Bootstrap
• Smooth scrolling (using Jquery) from W3SCHOOLS
• Tim Nelson - Showing only map tiles for Africa (avoid loading world map)
• HTML, CSS & JavaScript: Intro carousel & transition function from CSS Tricks
• JavaScript: find by location in array of objects Stack Overflow
• iframe element 'stop on click' function help from John Traas (CI student) and final solution (due to stopVideo method no longer working on iframes) from Stack Overflow

Acknowledgments

I would like to thank:

• My mentor, Mark Railton for his guidance and advice on this project before submission.
• Bim Williams and JoWings for their continued support and guidance.
• Tim Nelson for his wealth of knowledge on LeafletJS and taking the time to walk me through bugs experienced.
• James Lowe for his help and patience in advice on the country API.
• John Traas for his help with overcominmg the barrier with videos not stopping on button click.
• CI staff and Slack Community for always being on-hand with questions posted and assistance requests.
• Everyone that takes part in the Slack calls, specifically from the #In-It-Together and #Study-Group channels.

For any issue resolution or assistance, please email Jim Morel on [email protected]