This page has been commissioned by the 1960’s rock band “The Beatles”. The webpage is designed to
        -attract new and engage existing fans,
        -inform fans through band bios,
        -showcases the bands audio-visual content,
        -provides a plug for their social media networks,
        -eliminates third party resellers by directly advertising upcoming shows and gigs,
        -and building a fan base by generating a mailing list.

This serves a central location to establish the band online presence.

The following features are added to the website which is geared towards enhancing the users online experience while maintaining the bands artistic vision. This single scrolling webpage has sections for ease of use. The header provides a static menu that gives fans access to -
Home – which serves as the initial landing page. Fans are able to access the home section by
        1. clicking The Beatles logo,
        2. and by clicking Home on the fixed Navigation Menu.
Fab Four
        Provides fans band bios, history, facts and concert photos.
Audio/Video content
        - Audio section showcases the bands audio tracks,
        - While the Video section is linked to the bands YouTube channel.
Gigs
        -Announces upcoming shows and provides a venue to purchase the tickets directly from the site,
        -and provides fans a visual summary of available tickets.
Get Updates
        Allows fans to sign up for the band’s latest updates.
Book Us
        Allows the fans to connect directly to the band manager for an upcoming private event or occasion.
Footer provides access to
        -The bands Social media stream,
        -And a link to automatically take the user to the top of the webpage.

“Rudy just heard "The Beatles" and wants to know about the band”
Rudy clicks the Fab Four link which welcomes him to a condensed introduction. He has the option to read the extended version, along with facts and history by clicking Read More link.

“Cathy is mesmerized with one of The Beatles song and is curious to see if they have additional music”
Cathy clicks the Audio/Video links to listen and watch The Beatles music compilation.

“Tony wants to book tickets for the upcoming tour”
Tony is a fan of the band and has been streaming the Audio/Visual content from the website. He clicks the Gigs link to view upcoming events and purchase tickets. He also clicks Get Updates to join the bands subscription list . This provides a fan centric experience.

“Nick will be proposing to his fiancé and is curious to see if he can book The Beatles to make the event a memorable one”
Nick clicks the Book Us link and completes the questionnaire pop-up window. This questionnaire collects information like the event date, location and time. The band manager responds to Nick to confirm the event details.

“TuPac is new to social media and is curious if The Beatles have an account”
Tupac finds the Twitter and Facebook icons listed on the bottom of the webpage. He is now a part of the bands followers linked via social media.

Clicking the link below will direct you to Dropbox
Wireframes for Desktop version
Wireframes for Desktop version-About Us page
Wireframe for Mobile Version

The website is responsive and conforms to different phones and browsers.
• The Landing Page provides a single scrollable feature.

• The Navigation Menu provides an inline list of clickable links directing users to different sections on the webpage.
   Hovering over the links shows active status of the links.
   The Navigation Menu list collapses to a burger button when viewed on smaller devices.

• The Fab Four section displays text and photo content about the band.
   A “Read More” is a clickable link that display a webpage with new images and more information about the band.
Only the images displayed on the Fab Four have their sources (SRC) linked to other website URL’s.

• The bands audio (.wav) and all other image (.jpg) files have been downloaded to assets/audios and the assets/images folder respectively. The Audio controls width resizes to different devices.

• Video section displays embedded (iframe) videos from the bands YouTube channel

• Gigs section outlines a tabular display of upcoming events and ticket status indicator. The display conforms to different webpage sizes.

• Get updates section provides a fan subscription option. Java script has been used to change the button text to Subscribed once the user enters all mandatory fields and clicks the button to complete the process.

• The Footer displays social media connectors as clickable icons that can be directed to the bands social networks.

• Clicking the Book Us link in the navigation menu activates a pop-up (Bootstrap modal) input form. Features include a datetime control, a drop down option for specific fields and pop-up window confirming the inquiry has been submitted once all the mandatory fields have been completed.

Strived to use semantic HTML5 elements to structure HTML code better. Used JavaScript functions to handle events on the Subscribe button (Get Updates Section) and Book Us button(Modal Popup).

HTML5: to create structure of webpage.
CSS3: to style webpage, I used external stylesheet, file located in assets/css/style.css .
Bootstrap v 3.3.7- For css styling, I used grid, tables and responsive behavior of controls.
       CDN link included from https://getbootstrap.com/docs/3.3/getting-started/.
       for controls and classes https://getbootstrap.com/docs/3.3/css/.
Javascript and JQuery: Used Javascript and Jquery for Changing text on button,for confirm pop up,bootstrap modal,collapse menu and event handling.
Google Fonts: for additional font-family options https://fonts.google.com/.
Font Awesome: for social media icons and envelope icon https://fontawesome.com/.
Logo font: design https://fontmeme.com/the-beatles-font./
Blur background images: https://www.fotor.com/features/blur.html.
Chrome Dev tools for inspect elements for styling purpose and media queries.

The single scrollable webpage is tested across the following browsers,

• Google Chrome (Testing successfully met requirements)
• Firefox (Testing successfully met requirements)
• Internet Explorer (Testing successfully met requirements)

Testing Tools Used
• W3C CSS Validation Service (https://jigsaw.w3.org/css-validator/).
• W3C Markup Validation Service (https://validator.w3.org/).
       Received the following Warning: The datetime-local input type is not supported in all browsers. Please be sure to test, and consider using a polyfill. However the website works well on all browsers mentioned above.
• Mobile Friendly Testing Tool(https://search.google.com/test/mobile-friendly)

Testing scenarios

1. Landing Page(index.html) and Navigation bar:
   • The landing image fits the browser with the static Navigation menu displayed on the top. I used the aspect ratio method to measure the width of the image as a percentage of the overall width of the page.ie.(height/width)*100. The landing is responsive and conforms to the browser size. This was tested in Google Chrome Developer tools responsive mode on Galaxy S5, Pixel 2, Pixel 2XL,iPhone 5/SE, iPhone 6/7/8, iPhone Plus 6/7/8, iPhone X, iPad, iPad Pro.
   • The navigation bar collapses to a burger icon when viewed on medium and small devices. On hovering on each of the link the color changes to yellow this is done using pseudo-elements in CSS.
   • Tested every link on the navigation bar and verified that I was directed to the appropriate sections.
   

2. Fab Four Section
   • Clicking the “Read More” link takes me to a new webpage.
   • This responsive webpage has the same layout of header and navigation as the landing page. The header image is made responsive on Google Chrome Developer tools in responsive mode – Galaxy S5, Pixel 2,Pixel 2XL,iPhone 5/SE,iPhone 6/7,8, iPhone 6/7/8 Plus, iPhone X, iPad, and iPad Pro. This was achieved using VH (percent of view height) units.
   • The right image is hidden when the section is resized on medium sized devices. This image is accessible only smaller and large devices.
   

3. Audio and Video Section
   • Tested all audio and embedded video files and they play well.
   

4. Gigs Section
   • Tested the responsive behavior of this section.
   • Since the buttons have no post method implemented, clicking the buttons has no effect.
   

5. Get Updates Section
   • Verified error message on the form when the mandatory fields were left blank. This also included the proper email format ([email protected]) on testing.
   • Validated the button text changed to Subscribed once the mandatory fields were updated.
   Link to Get Update Test Case

6. Book us
   • Tested the link to open up a modal.
   • Verified error message on the form when the mandatory fields were left blank. This also included the proper email format ([email protected]) on testing.
   • Validated the activated button initiates a pop up acknowledgment window.
   Link to Book Us Test Case

7. Footer- Social media and copyright
   • Social media links - Clicked the social media icons i.e. Facebook, Twitter and Youtube and confirmed it directs you to the desired site.
   • On small devices the social media and copyright are centered on the webpage.
   • Confirmed the Back to the top link works by directing the user to the top of the webpage.
   

Project is built and developed on Cloud9 workspace

The files have been edited in this development instance. When ready, the changes were "deployed" to the staging instance. After user acceptance and testing, deploy again, this time to production. I used git and GitHub pages for deployment.

The following steps are followed to deploy the pages:

1. Initialised the local directory in my project as a git repository used the cloud9 terminal to perform this step
   $git init
   
2. Added the files in the local repository created. And staged them for commit $git add .
   
3. Commited the files that I have staged in the local repository.
   $git commit –m ”Initial commit”
   This step is perfomed for any changes I have done to sections in webpages and stylesheets as well as the images and audios folder.
   
4. Created a new repository in Github and in the terminal, added the URL for the remote repository where your local repository will be pushed.
   
5. On major changes I have pushed the changes in the local repository to GitHub. $git push origin master
   

On Github

1. Click Settings of the repository hosting the project and generated the external link.

Link to Github pages
Link to Final Project

FabFour Section and About us.html- Content for this section is copied from-
http://www.thebestofthebest.com.au/the-artists/the-beatles/
https://en.wikipedia.org/wiki/The_Beatles

Media
Image url grabbed from Beatles-The offical website
Video iframe have been taken from Beatles-YOUTUBE channel

This project is been developed from the codes learnt throughout the course of UX design from the videos of Code Insitute. Also referred Bootstrap documentation and W3schools

For ReadMe file referred README MARKUPS

1. The landing image and header image on the webpages would not scale responsively in the viewport,instead it would display at its true size and the user on a mobile devices would have to scroll or swipe to see full width. I handled this issue by referring-
   Resizing-Embeds-To-Be-Responsive.
   
2. When the modal is opened on clicking the Book Us link it applied the model.open class to the body,however this made the body width increase to solve this issue I copied code from-
   Body width increases when modal is opened.
   
3. Encountered an issue that involved scaling down a large table of content(for audios and gigs section) to fit into a mobile device view.I used the overflow-y:hidden; however the horizontal scrollbar did not make the webpage appealing. An option used here is changing the HTML5 tables code to grid layout.This made the website more responsive on both browser and mobile devices.
   
4. Also referred Stack Overflow occasionally.

I would extend my sincere thanks to my mentor for giving me ideas on optimizing my webpage,However all the work was done by me with references made to links as mentioned in "Credits" and referring "Code Institute UX Design" videos.I also took inspiration from the Bootstrap Project "Whiskey Drop" and "Resume Project" from Code institute as well fom [Shania Twain website] (https://www.shaniatwain.com/now-tour-2018) and Beatles website.