The Hike Style’s is a site about a social community among people who want to practice outdoor sports between nature and who want to share incredible and unique moments. The site is aimed at people who are adventurous and who want to know nature in interesting places , which where the interest in making new friends and making social encounters is the most important. The Hike Style’s will be useful as a reference for those looking for information on Hike and biking in nature.
View the live Website on Github Pages Please note: To open any links in this document in a new browser tab, please press CTRL + Click.
The Hike Style’s is a site created for physical activities among nature . That is, where I used much of the design in green color. The green color represents nature, but also represents growth and vitality. The green color is associated with health and tranquility. It is a balanced and rejuvenating color.
Initially I utilised Balsamiq to produce low fidelity wireframes to organise the site structure, potential content placement locations.
- Home page Wireframe
- Mission page Wireframe
- Photos page Wireframe
- Join Us page Wireframe
- Thank You page Wireframe
- The navigation bar features a common design across all four pages in keeping with convention with a logo on the left hand size and the navigation links on the right.
- The navigation bar includes links on the logo, Home, Mission, Photos and Join Us. The various title links head to their respective pages for easy navigation. The logo links back to the homepage as a typical shortcut users will likely be familiar with.
- A horizontal line appears under the current page as a visual indicator to the user as to which page they are currently on. With a line appearing underneath the text on hover to visually indicate to users that they are clickable.
- A color is activated once you click on each navigation link. This means that the page you clicked was visited.
- Only Home page includes a hero image with a text overlay which further indicates to the user exactly which section of the site they are on.
- The lower section of the common footer includes logo links to each of the social media platforms. This provides the user with a visual call to action to prompt them into visiting the organisations social media profiles.
- These links offer an unintrusive method of promoting the social media channels to the user, providing benefits to the organisation by the way of increased social media following.
- The lower footer section also includes the copyright notice.
-
Our Mission
- The main section of the Mission page includes a text about The Hike Style’s mission. It provides users with the main goal. The mission page contains two images in circle format.
- The way the two images are aligned is really part of the project and not any misalignment.
-
Our Gallery
- The photos page allows users to access high-quality photos of each adventurer’s encounters and activates. This allows users to easily identify the types of journey each person has experienced.
-
Join Us
-
The contact form provides users with the ability to contact The Hike Style's directly with any queries or comments they may have. The user is asked for their full name, email address and a message.
-
-
Message
-
When submitting the form, the user will be redirected to a new page, which will thank them for subscribing. The page contains a motivational message. No user information will be stored.
-
- Gallery Photos
- The website will be deployed with new tabs including virtual store with clothes and accessories according to the purpose and purpose of the community.
- The website will create an interactive tab where users can register and communicate through the site itself.
- The website will create a tab where people who are interested in nature and adventure can donate money, that is, a support foundation.
- The process included are as follows:
- Home : The user will view a background image with a wonderful landscape of nature and a brief text about our community. To move on to the next page, just click on the names Navagação menu.
- Mission : The user will read a brief text about our mission and view two images between circle about some records of the members of the site.
- Photos : The user will see some photos recorded by members about their adventures. Note that by hovering over the photo, it expands by highlighting the viewed photo itself.
- Join Us : The user who is interested in participating in our community must fill in their data according to what is requested. Name / Email and Message. All requirements must be completed, otherwise the user will not be able to contact the community for more information. Once the data has been sent, an automated message will appear pleasing the contact.
- Note that all menus change color as users click to view content. This shows users that the page itself has been viewed. Reminding users which pages they have already viewed.
-
Technologies / Tools Used
The website has been tested by friends in different browsers ( Chorme, Firefox, Safari) and in different smarthphones, laptop and desktop. I have personally tested the site extensively with development tools to ensure that the site works responsively not only on mobile devices, but also on medium to large screens. This website is supports by resolutions Desktop(1600x992px and over), Laptop(1280x802px), Tablet(768x1024px), Mobile(320x480px).
- I realized that in some sizes for browser Safari, the responsiveness was not 100% complete. I fixed this problem along with some internet searches and Slack Comunnity and realized that I was using enough property position-absolute and position-relative. So I studied deeply how to use Flex-Box and manage to solve the problem.
-
No errors were returned when passing through the official W3C Validator.
-
No errors were returned when passing through the official (Jigsaw) Validator.
-
I generated a lighthouse report for the deployed site through the Google Chrome Dev Tools. I generated both a desktop and mobile report. The two reports, both for mobile and desktop, reported that the image sizes were too heavy to load. I redacted the images and turned them into Webp archive by the site EZGIF.COM and then I improved the performance score.
-
Mobile
-
Desktop
-
- I have tested all the pages HOME - MISSION - PHOTOS - JOIN US - THANK YOU for the following analyses:
All the pages no errors were detected! Link to results
-
The site was deployed to GitHub pages. The steps to deploy are as follows:
- In the GitHub repository, navigate to the settings tab.
- Select the pages link from the setting menu on the left hand side.
- Under the GitHub Pages from the source section drop-down menu, select the master branch.
- One the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.
The live link can be found here - The Hike Style's Live Site
- The text for all pages was created by myself.
- The reference material on HTML and CSS provided by w3schools.com was utilised to implement flexbox and as general reference material for other areas.
- The logo for footer I used for this project were take from Font Awesome.
- The images used for hero image on Home Page and Gallery Page were taken by Alan Cruz (myself) and a couple friends. All the images were authorized to be made available in this project by friends.
- The Favicon, links and meta code were generated by favicon.io.