-
This is a website for a rigging company specialised in making and maintaining riggings for gaff rigged boats.
-
The idea derives from the experience of having renovated my own gaff rigged boat. When working with the rig, I found it difficult to find adequate information and the proffesional help that I needed. A company like Gaffers' Dock (preferably in a nearby location) would have been greatly appreciated.
-
Gaffers' Dock is an old family owned company with long experience of working with traditional crafts. Despite the fact that there aren’t many companies left, these days, with the skills and the know-how of making and maintaining gaff rigs, the owner's feel the need to reach out to their potential customers with the means of a website. The aim being to increase order intake, share their knowledge and experience and to make it easier for the boat owners to find their way to a professional traditional boat rigger.
-
The owners of gaff rigged boats are known to have a soft spot for the romantic sides boat life. They quite often have a good eye for aesthetics, are generally keen on traditional methods and materials,and... they love the smell of good old Stockholm tar.
-
The website will adhere to those attributes in its fonts, images and colours etc. (perhaps without the smell of tar) in order to capture an ambiance of a marine environment set in the early 20th century.
-
Melissa is going to reserve the wires for the rig of her boat. This time, she wants to use modern material instead of hemp. She uses the web to try to find out what to use. Browsing, she comes across the Gaffers' Dock landing site, where she can get a free phone consultation. She clicks the "Call Us" button which gives her the phone number in which to dial.
-
The owner of "Vanessa" is skimming the web to find someone who can construct a complete new rig. He finds the website of Gaffers' Dock and gets intrigued by the vintage styled images. He, therefor, stays on the site to find out more about the company. Persuaded by the Ongoing Projects, together with the company's history and skills, he clicks the "Queries" button to fills in the contact form and make a query.
-
Collin has heard about Gaffers'Dock and would like to pay a visit. He goes to the Gaffers' Dock website, finds the address at the bottom of the page where there is a map icon. He clicks on the icon and is directed to the company's location in Google Maps.
- Navigation
- The navbar makes it easy to access the different sections of the page. The logo will take the user back to the Landing Page.
- Landing Page
- With the background image, my intention is to give the user a clear sense of a classic marine environment, and, make it obvious what company it is. The Call Us button will make it easy for the user quickly get in contact.
- Our Services Page
- Defines what the company has to offer the user.
- Project Page
- I placed this section above the About Us because I believe the user to be more focused on finding out what quality thier work is, rather than reading about the company's history.
- About Us Page
- this section will give users even more information about the company and its' history.
- Queries Page
- Here, the user can make a query or write a message. An alert message will appear if the user has missed a box or entered an invalid email address. The Send button will not work due to missing post address, so an error message opens up in a separate window.
- Deviations from the wireframes:
- Pushed the "Call Us!" button aside slightly, so it clears the view of the deadeye in the background image.
- I left out the "Our Services" text background in order to receive a better contrast.
- Had an issue with the overlay snippet from w3school. The overlay did not follow the height of the Landing image. Found the solution in the "Whiskey Drop" lesson.
- Make the navigation toggler's drop down menu colaps after a selection has been made.
- Implement a soft scroll back function to the navigation links.
-
HTML5 & CSS3
-
Bootstrap 4
- For gird layout and responsivity.
-
Freelogoservices
- To create the unic logo.
-
Fontawesome
- To implement the icons.
-
Google Fonts
- To access their font-family library.
-
Tiny.png
- To compress images.
-
Smallpdf.com
- to convert images from png to jpg.
-
Balsamoq
- To create wireframes.
-
Techsini
- For multiple device mock op.
-
Auto Prefixer
- Adding vendor prefixes to CSS.
- Tested the website in the browsers listed bellow, and, made sure the site opens, appears and responds correctly.
- Chrome
- Safari
- Firefox
- Edge
- All the clickable links has been tested by:
- clicking on the link button
- making sure that the appropriate inline or external page, section or site opens correctly, and for external, opens in a separate window.
- Form validation tested by:
- Entering text to text boxes incorrectly
- making sure that a pop up message appears.
- Filling in the form correctly
- Hit Send button, and, see to that the Error response opens up in a separate window.
- The spelling of content has been checked using internetmarketingninjas.com.
- Readabiliy Test using Webfx.com. Test result.
- Google Mobil Friendly Test. Test result.
- Webpage Loading Test using Webpagetest.org. Test result.
- Contrast Test with Webaim.org Contrast Checker. Test result: Normal AAA, Large, AAA, GOUIC AA.
- Family and friends tested the different user story scenarios as well as UX and UI.
- I have deployed my website on Github to make it accessible to the public.
- I did so by:
- Logging in to Github
- Going to my Milestone 1 Project on my repository page
- Go to settings
- Scroll down to Github Pages
- click on source
- select none
- select master branch, Root
- click Save
- Wait for the page to refresh
- scroll down to Github Pages once more
- Find Site URL and copy it.
- The README structure was taken from CI's "readme-template".
- W3School
- A special thank you to my mentor Brian Machiara for his advice on sticking to bootstrap on all sections to maintain the responsivity' and, for all the support and positive energy given.
- To my fellow student and parnter in life for her technical aid. But, most of all for the invaluble moral- and loving support she has given me through out the course as well as in our past.
All content and user stories of the Gaffers' Dock website are fictional.
Any resemblance to any content or event is purely coincidental.
All images are pictures taken by the developer.
- Known Bugs:
- The website is slightly to wide in screens less than 350px. Hence the rows 14-16 in style.css.
- Special Thank you:
- To my family, for helping out with the testing, and, for giving me feedback and moral boosting.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent