code-institute-submissions / misstechy-surfing-in-bundoran Goto Github PK

SURFING IN BUNDORAN WEBSITE

View live project here: https://misstechy.github.io/Surfing-in-Bundoran/

This website is user friendly and interactive for surf lovers. It is predictable, clear, responsive and accesible.

| | |

         LARGE SCREEN                                 IPAD                                   PHONE

User Experience(UX)

First Time Visitor Goals

1.Interested in learning about the organization and also looking to find the information easily.

2.Interested in simplicity, acurasy and clarity of website's information.

3. Interested in reviews, videos and photos of other people who experienced the services, as well as the packages they offer, and also connecting with them on social media.

Returning Visitor Goals

1.As a Returning Visitor I would be interested in address, phone number, email address or social media accounts.

2.As a Returning Visitor I would look for links or photos so I can show my friends and gather a group.

3.As a Returning Visitor I would want to see in a easily maner the packages.

Frequent User Goals

1.Interested in signing up for more information.

2. Interested if the social media was updated and if I can find them on meetup as it offers a secured way to pay a service.

3.Interested in finding out the dates of the Sea Sessions Festival, purchase equipmant, watch videos.

Design

Colour Scheme

Predominant colors: red, gray, white, blue (different shades), black and a bit of yellow.

Typography

The Roboto font is the main font used throughout the whole website with Sans Serif as the fallback font in case for any reason the font isn't being imported into the site correctly.

Imagery

Images are imported from Bundoran Surf CO. social media accounts and they can be found on home page, gallery, services and signin page. Images are not made by a professional therefore their scope is to intrigue and attract the user.

Wireframes I did not use any Wireframes (Balsamiq/other apps/pen and papper. I built the design as I continued with my project. I can say I went with what was pleasant to the eye.

Features

Responsive on all device sizes.

Interactive elements.

Technologies Used

Languages Used

HTML5

CSS3

Frameworks, Libraries & Programs Used

Bootstrap 4.5.x (https://getbootstrap.com/):

Bootstrap was used to assist with the responsiveness and styling of the website, such as: nav bar, carousel image, social jumbotron, cards, testimonials, columns, sign up and sign in.

Google Fonts (https://fonts.google.com/):

Google fonts were used to import the 'Roboto' font into the style.css file which is used on all pages throughout the project.

Font Awesome (https://fontawesome.com/):

Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.

jQuery (https://jquery.com/):

jQuery came with Bootstrap to make the navbar responsive but was also used for the smooth scroll function in JavaScript.

Git (https://git-scm.com/):

Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.

GitHub (https://github.com/MissTechy):

GitHub is used to store the projects code after being pushed from Git.

TinyPNG (https://tinypng.com/0:

Resized images to log faster on website.

Testing

The W3C Markup Validator, W3C CSS Validator Services, Inspect in browser,HTML Formater - all were used to test, arrange and fix code.

https://jigsaw.w3.org/css-validator/#validate_by_input

https://validator.w3.org/

https://webformatter.com/

Testing User Stories from User Experience (UX) Section

First Time Visitor Goals

1.As a First Time Visitor, I want to easily understand the main purpose of the site and learn more about the organisation.Upon entering the site, users are automatically greeted with a clean and easily readable navigation bar to go to the page of their choice (home page, gallery page, services page and sign up page). Underneath there is a carousel image with Text and a "video" Calling to action button. The button takes you to Bundoran Surf Youtube page where users can see their promo video. Underneath the carousel images there is an "About Us" section describing the team, their passion and the goals, and also a hyper link with the Sea sessions Festival.

2.As a First Time Visitor, I want to be able to easily be able to navigate throughout the site to find content.At the bottom of the 3 pages the user will find the partners, opening and closing hours, address, phone number and email address. At the Sign in page I am able to sign in or sign up for more information.

3.As a First Time Visitor, I want to look for reviews, partners and social media links to see how popular is Bundoran Surf Co and if there are any unpleasant situations.

Returning Visitor Goals

1.As a Returning Visitor I would be interested in address, phone number, email address or social media accounts. Once I decide to take the service or buy a product I will need a phone number, address and to follow them online so I will be updated.

2.As a Returning Visitor I would look for links or photos so I can show my friends and gather a group. Photos gives a feeling of joy therefore I would share the links with friends and gather likeminded people.

3.As a Returning Visitor I would want to see in a easily maner the packages. I would need to make a decision and chose a package according to my callendar and budget.

Frequent User Goals

1.Interested in signing up for more information. Having an account will offer me more information about events during the year and possible discounts.

2. Interested if the social media was updated and if I can find them on meetup as it offers a secured way to pay a service. Being connected with their social media I would deffinatelly tag them in my posts to raise awarness or feel that I am part of a community.

3.Interested in finding out the dates of the Sea Sessions Festival, purchase equipmant, watch videos. The good thing about the website it is that it has links to their shop, Festival and Youtube. If I become passionate about surfing and trust Bundoran Surf Co I would deffinately buy equipment and tickets for the festival, as well us following the pages they follow on youtube.

Further Testing

The Website was tested on Google Chrome, Internet Explorer, Fire Fox. The website was viewed on a variety of devices such as Desktop, Laptop, Moto G4, Galaxy S5, Pixel 2, Pixel 2xl, iPhone 5/SE, iPhone 8/7/8, iPhone 8/7/8 Plus, iPhone X, IPad, IPad Pro, Surface Duo & Galaxy Fold.

Friends were asked to review the site and documentation to point out any bugs and/or user experience issues. Their feedback was that it is simple, predictable and easy to use.

Known Bugs

1.On phone devices the images were oversized.

2.The footer was messy because of missing relevant cols.

3.The review cards were uneaven as well as the price cards.

Deployment

GitHub Pages

The project was deployed to GitHub Pages using the following steps:

1.Log in to GitHub and locate the GitHub Repository.

2.At the top of the Repository (not top of page), locate the "Settings" Button on the menu.

3.Scroll down the Settings page until you locate the "GitHub Pages" Section.

4.Under "Source", click the dropdown called "None" and select "Master Branch".

5.The page will automatically refresh.

6.Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

Making a Local Clone

1.Log in to GitHub and locate the GitHub Repository.

2.Under the repository name, click "Clone or download".

3.To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.

4.Open Git Bash.

5.Change the current working directory to the location where you want the cloned directory to be made.

6.Type git clone, and then paste the URL you copied in Step 3.

$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY

7.Press Enter. Your local clone will be created.

$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY

Cloning into CI-Clone... remote: Counting objects: 10, done. remote: Compressing objects: 100% (8/8), done. remove: Total 10 (delta 1), reused 10 (delta 1) Unpacking objects: 100% (10/10), done.

Credits

Code

Bootstrap4: Bootstrap Library used throughout the project mainly to make site responsive using the Bootstrap Grid System, cards, carousels, jumbotrons and sign in page.

Content

All content was written by the developer.

Media

Images were taken from Bundoran Surf Co website and social media.

Acknowledgements

My Mentor gave some contructive feedback.

Tutor: Simen Daehli, Anna_ci, Claire_ci.

Alumni:Marcel777.