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.
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
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!
All mockups have been created with Balsamiq Mockup Software
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.
- 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
- The site could be extended at a later date to facility the selling of event tickets or merchandise by implementing ecommerce functionality
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
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:
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.
For inspiration for the video header - Traversy Media
For inspiration for the parallax layout - Traversy Media
Text has been copied from the following sites the official Queen site. Or ficticiously created for the purpose of the project text - Queen Online
all Other Images - Google Images
- I received inspiration for this project from a meeting with my mentor and from using googles mindmup for brainstorming ideas