IDLES

View the live project here.

This is my Milestone Project 1. It is a fan based music band site for the band IDLES.

User Experience (UX)

User stories

First Time Visitor Goals

a. As a First Time Visitor, I want to easily understand the main purpose of the site and learn more about the Music Band IDLES. b. As a First Time Visitor, I want to be able to easily navigate throughout the site to find content. c. As a First Time Visitor, I want to look for the new releases of the band and discover new videos and upcoming live dates. I also want to locate their social media links to see all the coming day by date news etc.

Returning Visitor Goals

a. As a Returning Visitor, I want to find information about music,videos,and live dates. b. As a Returning Visitor, I want to find the best way to get all the news for the upcoming album. c. As a Returning Visitor, I want to find social media links and music links like spotify.

Frequent User Goals

a. As a Frequent User, I want to check to see if there are any newly added features, interviews,new videos, new songs and the upcoming store to buy some merch. b. As a Frequent User, I want to check to see if there are any new blog video. c. As a Frequent User, I want to sign up to the Newsletter so that I am emailed to receive any early access to tickets, news, tour dates, new music and more.

Design

Colour Scheme

The two main colours used are in IDlES Band is pink, and white.

Typography

The Catamaran and Oswald 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. Catamaran is a unique font and not used frequently in programming, so it is both attractive and unique.

Imagery

Imagery is important. The large, background hero image is designed to be striking and catch the user's attention. It also very colourful, and catch the eye.

Wireframes

You can see the wireframes in the library.thanks

Features

The site is not Full Responsive on all device sizes

Interactive elements

Technologies Used

Languages Used

HTML5 CSS3 BOOTSTRAP 4

Frameworks, Libraries & Programs Used

Bootstrap 4.4.1: Bootstrap was used only in to create flexible alert message.

Hover.css: Hover.css was used on the Social Media icons in the footer to add the float transition while being hovered over.

Google Fonts: Google fonts were used to import the 'Catamaran, Oswald' font into the style.css file which is used on all pages throughout the project.

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

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

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

IDLES Official Website: was used to resizing images and editing photos for the website.

Balsamiq: Balsamiq was used to create the wireframes during the design process.

The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.

W3C Markup Validator - Results is in the html.page and also in the library in the github and two links http://jigsaw.w3.org/css-validator/validator$link or http://jigsaw.w3.org/css-validator/check/referer (for HTML/XML document only) W3C CSS Validator - Results is in the html.page

Testing User Stories from User Experience (UX) Section

First Time Visitor Goals

i. As a First Time Visitor, I want to easily understand the main purpose of the site and learn more about the organisation.

a. Upon entering the site, users are automatically greeted with a clean and easily readable navigation bar to go to the page of their choice. Underneath there is a Hero Image with Text and a "Youtube video" and a SUBSCRIBE button.

b. The main points are made immediately with the hero image

c. The user has four options, click the menu bar to discover music,videos and live dates and or scroll down, to see one quote combine with the newest video of the band, and on the bottom a SUBSCRIBE button and all the media links to end.

ii.As a First Time Visitor, I want to be able to easily be able to navigate throughout the site to find content.

a. The site has been designed to be fluid and never to entrap the user. At the top of each page there is a clean navigation bar, each link describes what the page they will end up at clearly.

b.The user can also scroll to the bottom of any page on the site to locate social media links in the footer.

i.Returning Visitor Goals

a. As a Returning Visitor, I want to find the new albums,videos,live dates.

b. Some news is in the alert-banner message.

ii.As a Returning Visitor, I want to find the best way to get in contact with the Band with any bookings I may have.

a.The Footer section clearly highlights the "SUBSCRIBE" Page.

b.The footer contains links to the organisations Facebook, Twitter,Apple Music,Spotify,Youtube and Instagram page.

c.Whichever link they click, it will be open up in a new tab to ensure the user can easily get back to the website.

As a Returning Visitor, I want to find the Facebook Group link so that I can join and interact with others in the community.

a.The Facebook Page can be found at the footer of every page and will open a new tab for the user and more information can be found on the Facebook page.

Frequent User Goals

i.As a Frequent User, I want to check to see if there are any newly added music videos and live dates.

a.The user would already be comfortable with the website layout and can easily click the video link, the menu links and all the media links.

b.The user would already be comfortable with the website layout and can easily click all the links.

ii.As a Frequent User, I want to sign up to the Newsletter so that I am emailed all major updates and/to receive early access to tickets, news, tour dates, new music and more.

a.At the bottom of every page their is a footer which content is consistent throughout all pages. b.To the center side of the footer the user can see "Subscribe to our Newsletter" and are prompted to Enter their email address.

Further Testing

a.The Website was tested on Google Chrome, Microsoft Edge.

b.The website was viewed on a variety of devices such as Desktop, Laptop, iPhone7, iPhone 8.

c.A large amount of testing was done to ensure that all pages were linking correctly.

d.Friends and family members were asked to review the site and documentation to point out any bugs and/or user experience issues.

Known Bugs

a.Is not full responsive i was trying to build the website with custom css and html and without bootstrap and it was above my limits in my current level and also in my first project to make it responsive,the lesson learned.

b.On some mobile devices the menu bars/links and the submit button pushes the size of screen on the left and on the right of the page.

c.A white gap can be seen to the left of the alert/pre-order link on some mobile devices .

d.In the video page the width of the iframes disconnect, all links in Navbar.

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. Alternatively Click Here for a GIF demonstrating the process starting from Step 2.
4. Scroll down the Settings page until you locate the "GitHub Pages" Section.
5. Under "Source", click the dropdown called "None" and select "Master Branch".
6. The page will automatically refresh.
7. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

Forking the GitHub Repository

By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by 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) just above the "Settings" Button on the menu, locate the "Fork" Button.
3. You should now have a copy of the original repository in your GitHub account.

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

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

css-tricks: Help me with some tips. w3schools: Help me with iframes. stackoverflow: Help me with some tips. Bootstrap4: Bootstrap Library only in navalert link.

Content

All content was written by the IDLES and Joe Talbot, Thank you very much for everyhting.

Psychological properties of colours text in the README.md was found here

Media

All Videos, Quote and text were created by the IDLES.

Flower photo and Band photo it was found when searching on the internet.

Acknowledgements

IDLES.

My wife and the cats.