Project-1 Rock Band

The project's main focus is to promote the already established and legendry rock band, Queen. Queen have a huge following worldwide and the website has focused on showcasing the band popularity over the centuries and providing existing and potential fans with a place to go online and book the band for an upcoming event. While on the site fans have a chase to see past video events and listen to a selection of songs. There is also a sign up section where fans can register for a monthly newsletter to keep better informed of upcoming events around the world. In a nutshell this site is all about giving the fans a one stop site on all the bands news.

UX

The user experience has been centered around existing and potential fans wishing to book an event, listen to a selection of music or videos, view photos as quickly as possible with just one click. This site has established this with a fixed navigation bar, booking button located in the header. The site is responsive so the user can access all features at ease on a mobile phone or desktop

User Story

The user wants to book the band for a christmas party at work:

User accesses the site via either mobile or desktop
User clicks the "book now" button
User completes all fields on the form
User submits form and is returned to the home screen
User can relax the booking is complete OR!!!
- User clicks the menu link for photos on the fixed navigation bar and views past images of events
- User clicks the menu link for music on the fixed navigation bar and listens to a choice of music
- User clicks the menu link for video on the fixed navigation bar is able to watch youtube videos which can also be viewed in full screen mode
- User can scroll down and subscribe to the bands new letter
- User can also use menu links to navigate the site in the footer
- User can click on Social Media links in the footer which opens the site in a new browser window
- Now the user experience is complete the user can leave the site till next time!

Mockups

All mockups have been created with Balsamiq Mockup Software

Features

All the user features are easily accessed by a fixed navigation bar which the user can click to move to any section of the site at any time.

Existing Features

Feature 1 - allows the users to book an event by clicking the book now button and completing and submitting a modal booking form
Feature 2 - allows the user to stay on the site and read all about the band
Feature 3 = allows the user to listen to a selection of the bands music
Feature 4 = allows the user to signup for the band's monthly news letter
Feature 5 - allows the user to browse picture gallery of the band
Feature 6 - allows the user to watch past events via youtube embeded video clips
Feature 7 = allows the user to navigate to all the bands social media sites by clickable links in the footer

Features Left to Implement

The site could be extended at a later date to facility the selling of event tickets or merchandise by implementing ecommerce functionality

Technologies Used

This project was to focus on the basics of HTML5 and CSS3

Bootstrap
- The project uses Bootstrap to simplify grid layout and add a modal booking form

Testing

At implementation of each section of development the site has been viewed for layout, correctness and usability both on desktop and by resizing for mobile using a chrome extension "for Mobile/Responsive Web Design Tester".

links checked and all found to be working correctly
buttons all checked and found to be working correctly
HTML5 validation has been implemented on all fields of the booking form and found to be work correctly
booking form modal close buttons are working correctly
parallax scrolling is working correctly until breakpoint with media query @media(max-width: 568px) where it display is set to none
all images have been set for responsive and tested to be correct and all include alt tags for screen readability
music and video links have been tested and are all working correctly
subscribe input field set to validate for email address and submits button works correctly
links to social media checked and all work correctly
menu links in footer all work correctly

The site has also been tested using the W3C valiation tester W3C_Validation

The warning for HTML5 date picker is the only comment as it may not be supported in all browsers. Having checked this in Chrome, Firefox and Safari the only browser that does not appear to test well for this feature is Safari. You can also use Can I use to check for browser support

Jigsaw.w3.org has been used for testing the css3 file which has been given a no errors found result jigsaw css test

The following links will show screenshots of testing on my mobile iphone8:

Deployment

For the project the site has been depoloyed using the hosting platform GitHub

As all files have been stored on the github respository there has been no need to change any links or alter any configuration on the project. The site has been deployed from the github master branch. As this was a small solo project no branches have been used.

github repository

github live website