The website is a fan website and has been created solely for the course, but it was inspired by an actual hiking trail based in Braunwald, Glarus-Süd, in the North East of Switzerland. "Zwerg Bartli", a mountain-dwelling
The dwarf is an affectionately well-known character in this area—a fictitious character made famous by a children's book.
The site was designed and developed mobile first.
The idea of the website was inspired by a friend, Hermina Oláh Vass. She and her family are very enthusiastic about the trail. She is motivated to breathe a new breath of life into this local attraction. The idea was to provide an essential website to start her project. and gain support from investors in Braunwald. As due to climate change, the winter season needs to be open to ventures, other than winter sports.
-
Parents with children
-
Families
-
Schools
-
Client Goals
- Provide content that is child appropriate
- Provide content for adults or parents with children
- Provide easy access to routes
- Show trail distances
- Show approximate times to hike
- Show difficulty level
- Provide a booking form
- For people to book family passes in advance
- To also ask questions about the trail
-
First Time Visitor Goals
- Find information about the trails
- Find out how to get to the start of the trails
- Find information about the distance of the trails
- Find variations of the trial
- Find the difficulty and suitability of the trails
- See images of various trails
-
Return Visitor Goals
- Try alternative routes
-
Frequent Visitor Goals
- Refer their friends, families and associates about the hiking trail.
Wireframes were created for the site with Figma.
Wireframe for mobile and desktop
Home page for mobile and desktop
Landing page - mobile and desktop
Trail list for mobile and desktop
Trail list section - mobile and desktop
Trail page for mobile and desktop
Trail page - mobile and desktop
Form view for mobile and desktop
Form - mobile and desktop
Form success page for mobile and desktop
Form success page - mobile and desktop
Header navigation and footer for mobile and desktop
Header navigation and footer - mobile and desktop
Page not found page for mobile and desktop
Page not found page - mobile and desktop
To see the full wireframe, view it here.
The website consists of the following:
- Home page
- Storybook page
- Form page with a success page
- Trail page
- Additional pages for each trail shown on the trail cards displayed on the home page
- A 404 page
The colour palette was meant to support a cheerful and natural backdrop to showcase the trails. The colours should complement greens to represent nature and the forest. The red was to represent Bartli's hat.
Created colour palette using:
Feedback from lighthouse testing raised an issue with accessibility and colour contrast. As a result, the red colour was changed on the button with white font.
Permanent Marker and Overpass Fonts were chosen from Google Fonts. Fonts were selected to represent fun, playful, clear and easy to read.
When thinking about typography, the type had to suit responsively as well. The fonts had to be also readable on mobile View.
Using Utopia, clamps for fonts and spaces were created. This minimised errors where fonts would be oversized or too small on desktop or mobile devices.
- min(), max(), and clamp(): three logical CSS functions to use today
- Modern Fluid Typography Using CSS Clamp
- RFS
- Utopia - Responsive font and space sizing
Images are located on all pages. At the top of the page, under the navigation, is the header image. All pages have the same thematic layout, and the layout should be consistent on all pages, including the home page.
Hiking photos have been used from:
Illustrated images, icons and favicons were generously provided by:
- Hermina Oláh Vass
All images should match the theme of the site, families with children on hiking activities. The hand-drawn illustrations were to support the theme of the trail being inspired by an illustrated storybook.
To increase the speed of the website., all images were compressed. Also, I added the lazy-loading attribute to images showing below the fold.
Icons were used for social links and buttons. The icons used on the site were taken from:
The footprints-SVG was created using the SVG from:
-
Footprint by OpenClipart-Vectors from Pixabay
The footprints were created by using GIMP to manipulate the Image, and then the SVG was created with Inkscape.
Details of each feature are listed under General Features on Each Page.
The website consists of the following pages:
- Home page
- Storybook page
- Individual hiking trail pages
- Full trail
- Option 1
- Option 2
- Option 3
- Option 4
- Option 5
- Form page
- with a success page
- 404 page
The home page consists of 5 sections.
- Full height and width image with:
- text overlay
- button to scroll down to hiking trail cards
- Image, title and text
- Trail cards
- Image, title and text (reversed order)
- Gallery
- Floating booking button
The storybook page consists of the following:
- Image banner at the top of the page
- Multiple images, title and text, alternatively reversing the order
Individual trail pages are accessed via the home page. A link around each card directs visitors to see more about the trail.
The hiking trail page consists of the following:
- Image banner at the top of the page
- Statistics are divided into 3 "boxes."
- A back-to-trail list link, which redirects visitors back to the home page to the Trail Cards
- A table of the stages, trails are divided into easy-to-walk stages
- A map with markers of the locations indicated in the stages
The form page consists of the following:
- A table to clearly present the tickets and prices
- Form to add first name, last name, email address, number of adults and children and additional comments.
- A map with the location of the main station
Every page except the 404 page, success page and form page has a CTA Button, which is a button to take visitors to the booking form.
Screenshot of the trail (lists) feature for mobile
Screenshot of the trail (lists) feature for desktop
The trail cards displayed contain text descriptions. The height of each card depends on the size of the device. A class was added to shorten the text so that the card heights were manageable on mobile devices.
Screenshot of the gallery feature for mobile
Screenshot of the gallery feature for desktop
The gallery is in a grid layout masonry style. The gallery was to suit and demonstrate images that are meant to be viewed in portrait or landscape.
Screenshot of the CTA feature for mobile
Screenshot of the CTA feature for desktop
The button link for the contact form is a floating element on the page. This was changed from the original wireframe, as the CTA button was to be visible wherever the user was on the page. Floating, it made it visible and accessible for visitors to easily click.
Screenshot of the back button feature for mobile
Screenshot of the back button feature for desktop
The back button is to enable visitors to go back to the trail card list quickly after viewing the trail page. On mobile, the backlink is always coloured red, but on the desktop, there is a hover effect from white to red.
Explore_button.mov
The explore button is located on the landing page. The button takes visitors directly to the trail cards so that they can explore the different hiking trails.
Screenshot of the header image for trail page with statistics and back button feature for mobile
Screenshot of the header image for trail page with statistics and back button feature for desktop
The header image should be the first View of the landscape and also quick information about the trail. Showing the distance, approximate time to hike and the level of ease.
Screenshot of the trail map on trail page feature for mobile
Screenshot of the trail map on trail page feature for desktop
The trail map should show all the locations the trail encounters. The trail map markers are custom markers of Bartli.
Version 1:
Screenshot of the text image feature for mobile
Screenshot of the text image feature for desktop
Version 2:
Screenshot of the text image with quick links feature for mobile
Screenshot of the text image with quick links feature for desktop
There are two versions of the text-image feature.
The first one can be found on the home page. This is a simple layout of a single image and text. When multiple image text sections are on the same page, they are set to be alternative sides. The text remains in a container, and the Image stretches to either the left or right side, dependent on which side of the text it is positioned. This effect was to fill empty space on wider devices and to add colour.
The second version is seen on the storybook page. The layout is exactly the same. The content is slightly different, as, under each text, there is a link which enables the visitor to quickly go to the trail page if they are interested in visiting the place mentioned in the story.
- Add SwissMobility API to show:
- Show actual height
- Show real distances
- Show declines and inclines
- the ascent and descent
- Connect Instagram API to enable hikers to share images
- Share their photos on social media
- Try other activities provided in the area
- Connect to other local companies
- Be able to contact Braunwaldbahn, the company that provides the cable car service
- Stay overnight in the accommodation provided in the area
- Try other recommended activities in the local area
- Provide a platform that boosts tourism in the area
- Use of semantic HTML
- Use of ARIA
- Use of alt attributes
- Provide an invisible "Skip to content" button for a screen reader. Enabling visitors to skip the navigation menu
- Use Adobe Color to check colour contrast
- Fixed header, providing visitors with easy access to other pages
- Floating button element providing visitors to reach the contact form easily
- HTML5
- CSS3
- JavaScript
- Google Fonts
- Google Fonts was used to import the font to the style.css, which is used on all pages throughout the project.
- Font Awesome
- Font Awesome was used on all necessary pages throughout the website to add icons for aesthetic and UX purposes.
- Git
- Git was used for version control by utilising the Gitpod terminal to commit to Git and push to GitHub.
- GitHub
- GitHub was used to store the project's code after being pushed from Git.
- Gitpod
- Coolors
- Adobe Color
- Pexels
- Unsplash
- Devtool
- Browserstack
- LeafletJS - Use of GeoJSON with Leaflet
- Figma
- Inkscape
- GIMP
- SVGator
Git was used for version control. Version control was done locally and remotely. For remote version control, GitHub was used. Regular commits were made after each file change.
GitHub Pages was used to deploy the site remotely.
github-pages_deployment.mov
Screencast of deployment
-
Go to the repository
-
Click the Settings tab
-
Click on Pages in the left-hand menu, under code and automation
Screenshot of how to get the Pages section -
Under Build and deployment > Source, ensure Deploy from a branch is selected
Screenshot of source option -
Under Build and deployment > Branch, select the main branch
Screenshot of branch option -
Click save
-
It may take more than a few minutes, but when the page has been created, you will see the following success message
Screenshot of success message
To contribute or check the code yourself, you can:
- fork the repository
- clone the repository
- To fork, go the repository
- Click on the Fork button in the top left corner of the page.
- Fill in the form with either keep the name or create a new name for the repository
- To clone on the repository
- Click on the Code button above the repository files.
- A drop-down will appear and choose either
:
- HTTP
- SSH
- GitHub CLI
- Go to your terminal and decide where you want to clone the files.
- Use the copy/paste button and copy it into your terminal
- You also have the option to download a ZIP file of the code
Browserstack was used for testing. The devices selected were:
- Windows
- Firefox 108 on Windows 11
- Chrome 108 on Windows 11
- Apple
- Ventura Safari 16
- Android
- Chrome Galaxy S22
- Xiaomi Redmi Note 11 Chrome
- Apple iOS
- Safari iPhone SE 2022
Testing implemented from User stories
| Client goal | Implementation | Tested | Successful |
|---|---|---|---|
| Provide content that is child appropriate | The content was child-friendly | Yes | Yes |
| Provide content for adults or parents with children | The content is descriptive yet simple | Yes | Yes |
| Provide easy access to routes | Trail list navigated via the nav bar. Quick links added to the Storybook page | Yes | Yes |
| Inform visitors of trail distances | Trail details and distances are easily seen on the top of the page | Yes | Yes |
| Inform visitors of approximate times to hike the trail | Trail details, approximate times easily seen on the top of the page | Yes | Yes |
| Inform visitors of difficulty levels | Trail details, difficulty levels easily seen on the top of the page | Yes | Yes |
| Provide a booking form | Accessible via the CTA button show on all pages | Yes | Yes |
| Provide a form which allows users to book family passes in advance | form has inputs for booking the number of adults and children for family pass | Yes | Yes |
| Provide a form for visitors to ask a question about the trail | Textarea input added for users to ask comments or ask questions | Yes | Yes |
| First Time Visitor Goals | Implementation | Tested | Successful |
|---|---|---|---|
| Find information about the trails | Trail list shows available trails. The link from the home page takes visitors to individual trail pages | Yes | Yes |
| Find information about the distance of the trails | information about the distance is above the fold on individual trail pages | Yes | Yes |
| Find variations of the trial | List of trail variations are on the home page | Yes | Yes |
| Find the difficulty of the trails | information about the level is above the fold on individual trail pages | Yes | Yes |
| See images of various trails | Images of hiking trails in the gallery on the home page. The main Image in the header is of the trail | Yes | Yes |
| Return Vistor Goals | Implementation | Tested | Successful |
|---|---|---|---|
| Try alternative routes | List of trails on the home page. Visitors can check other routes | Yes | Yes |
| Frequent Vistor Goals | Implementation | Tested | Successful |
|---|---|---|---|
| Refer their friends, families and associates about the trail | Visitors can share the trail list and each of the individual trail pages | Yes | Yes |
| Bug / Errors | Where / Location site | Browser | Device | Remarks | Mode (light / dark) | Fixed | Solution |
|---|---|---|---|---|---|---|---|
| Fields in form not visible | contact form | Chrome, Firefox | Apple Laptop | dark | Yes | Change line colors for field. Applied colour for dark and light mode | |
| Only adults and kids visible (missing: first name, last name, email, telephone) | contact form | Chrome | Apple Laptop | dark | Yes | Change font colour to suit dark and light mode | |
| Arrows to add / sub-adults / kids only visible on mouse over | contact form | Chrome | Apple Laptop | dark | No | ||
| Reference * not visible (bottom of the page) | contact form | Chrome | Apple Laptop | actually there are * but they are at form fields marking mandatory entries, slightly confusing | dark | Yes | |
| Social media icons go white (on white), therefore not visible on mouse over everywhere / every page | Chrome, Firefox | Apple Laptop | dark | Yes | Changed the icon colours in the footer | ||
| Twitter link typo - redirects to "Twiiter" instead of "Twitter" | everywhere / every page | Chrome, Firefox | Apple Laptop | dark | Yes | Corrected typos | |
| Text box / frame of text box not visible | contact form | Chrome, Firefox | Apple Laptop | dark | Yes | Added border to textarea field. Applied colour for both dark and light modes | |
| Image not loading | full trail | Chrome, Firefox | Apple Laptop | dark | Yes | Fixed the broken link by correcting the relative path | |
| Zoom/pan on the map does not include all dwarfs, only the top half | every trail page | Chrome | Apple Laptop | dark | Yes | Added bounds to the leaflet map to centre the map according to all markers | |
| Shorten text on the first story (size is off in comparison to the next story bits), not a bug, just looking off | storybook | Chrome, Firefox | Apple Laptop | dark | Yes | The text remains the same but changed spacing on the text image grid areas | |
| Links either labelled wrong or wrong links set (Trail option 3 leads to variation 1) | storybook | Chrome, Firefox | Apple Laptop | dark | Yes | Fixed links to suit the actual href | |
| Image not loading | full trail | Chrome | Android mobile | dark | Yes | Fixed the broken link by correcting the relative path | |
| Little arrow to expand/collapse above adults doesn't do anything | contact form | Chrome, Firefox | Apple Laptop | light / dark | Yes | form made visible by changing colours for dark and light mode | |
| Neither the labels nor the placeholder texts are visible at the first name, last name, email and phone number inputs | contact form | dark | Yes | Make placeholders visible by changing the default opacity to 1 for input placeholders. I also had to fix specificity, as I initially assumed the issue had occurred due to the wrong pseudo element being selected. After trial and error, I discovered that the problem occurred due to specificity, as form input needed to be more specific. | |||
| Zoom out of your maps more than the max size of the maps are | All trail pages | Yes | Set a min and max zoom on the leaflet map | ||||
| Error form display in Chrome only sometimes notifies about wrong inputs. Firefox tells you correctly which input is wrong | contact form | Chrome | Apple Laptop | dark | Not a fix | Chrome moves the page to the area of the error, the red border line highlights the missing information | |
| When going back from the trail page to the storybook, the last chosen trail option is marked in green instead of red. Nice, but I wonder if intentional. does not happen in Chrome only ff | storybook | Firefox | Apple Laptop | dark | Yes | Change the look of the button, ensure :visited pseudo is not used |
The following bug was found, but it was hard to determine the reason for the jumping of the sticky button. It only occurred on mobile devices. The issue still needs to be resolved and added as an issue to GitHub.
bug_cta-btn_storybook_mobile.mp4
| Bug / Errors | Where / Location site | Browser | Device | Remarks | Mode (light / dark) |
|---|---|---|---|---|---|
| book your family pass blocks scroll down text and animation; Book your family pass goes into hiding when scrolled to the position of any header; Book your family pass seemingly jumps around randomly when scrolling; Book your family pass snaps back down after scrolling up from the bottom of the page | Home / Storybook | Chrome | Android mobile | dark |
Home page
Home page in light mode
Home page in dark mode
Storybook page
Storybook page in light mode
Storybook page in dark mode
Full trail page
Full trail page in light mode
Full trail page in dark mode
Option 1 trail page
Option trail page in light mode
Option trail page in dark mode
Option 2 trail page
Option 2 trail page in light mode
Option 2 trail page in dark mode
Option 3 trail page
Option 3 trail page in light mode
Option 3 trail page in dark mode
Option 4 trail page
Option 4 trail page in light mode
Option 4 trail page in dark mode
Best practice error in dark mode
The error states:
"Image natural dimensions should be proportional to the display size and the pixel ratio to maximise image clarity."
This error looks to be from the map tile, as all the screenshots refer to the Image added by the tile, linked by vmts.geo.admin.ch.
Option 5 trail page
Option 5 trail page in light mode
Option 5 trail page in dark mode
Contact us form page
Contact us form page in light mode
Contact us form page in dark mode
Success form page
Success form page in light mode
Success form page in dark mode
404 page
404 page in light mode
404 page in dark mode
- Use W3C Markup Validation Service to validate all HTML pages
- Use W3C CSS Validation Service to validate all stylesheets
- Error (
width: min(100% - var(--container-padding), var(--container-max-width));) caused from related to the following issue:
- Error (
All code is also referenced as a comment in stylesheets.
- Fix hover effect
- Fix error with scroll to content
- Screen Reader only - hidden elements
- Custom Checkbox
- Gallery layout
- Containers
- Image with text overlay
- Assessibility - Kevin Powell - Most sites have a "hidden" link, and yours should too!
A list of references used for the site:
- Kevin Powell
- Box shadows
- CSS Tricks - HTML Picture
- Web Dev - Browser level image lazy loading
- Editorx - Font size
- The 100% correct way to do CSS breakpoints
- Containers - width for different devices
- Jonas Schmedtmann
- Flexbox
The content created for this website was created by my partner, Stefan Tschudi, a colleague, Hermina Oláh Vass and myself. The story was loosely based on a rough translation of the character based on "Der Zwerg Bartli" by Lorly Jenny.
All maps were created from actual locations found in Zwerg-Bartli-Erlebnisweg.
The address, email and telephone number on the contact page were made up and are not associated with Braunwald or the story.
The trail is an actual, locally well-known tourist attraction. The trail locations were based on the existing hiking trails in Braunwald, Glarus-Süd in, Switzerland.
Homepage
The footprints were created by using GIMP to manipulate the Image, and then the SVG was created with Inkscape.
Gallery
- Man, woman, and child walking together along dirt road by Alberto Casetta on Unsplash
- Child looking at map photo by Annie Spratt on Unsplash
- Two boys hiking through tall trees in forest by Greg Rosenke on Unsplash
- Man carrying child by Katie Moum on Unsplash
- Girl with turquois backpack, walking with family and friends by Greg Rosenke on Unsplash
Trail list and Trail Pages
- White-Red-White Hiking flag painted on rock by Curdin Giger on Unsplash
- View of the View with the mountain as the backdrop by Christian Regg on Unsplash
- View from the path that leads to the lake by Marc on Unsplash
- View of mountain and valley below by Marco Meyer on Unsplash
- View from the top of the mountain by Mohammed Abdullatif on Unsplash
- Swiss Alps in the middle of summer on a sunny day by Paul Szewczyk on Unsplash
Storybook
- Children and adults hiking on a trail in the photo of the mountains from Unsplash by Greg Rosenke on Unsplash
- Girl journalling on a rocky surface by Tyler Nix on Unsplash
- Family and dog going down the mountain by James Wheeler on Unsplash
- Boy climbing up rocky steps by Mael BALLAND on Unsplash
- Sun rays beating down on mother and daughter walking in the forest by James Wheeler on Unsplash
- Boy walking up alpine hiking trail path by Morgan David de Lossy on Unsplash
- Small child with pink teepee tent Photo by Caleb Oquendo from Pexels
A big thank you goes to all the incredible people who supported me during this process. Acknowledgements go to those who took the time to provide great insights and advice
- Rahul Lakhanpal - for keeping me focussed.
- Stefan Tschudi - for repeatedly testing my site on his computer and mobile. Being continually supportive and keeping me on track.
- Hermina Oláh Vass - for providing beautiful illustrations and allowing me the privilege to use your images on my website.
Also, a huge thank you for the support on Code Institute's Slack Channels, especially Ger Tobin, who suggested using Leaflet and Szilvia Csernus, for reviewing my project and taking the time to give me constructive feedback, which I was able to report as bugs.