This website was created to showcase the music and talents of The Whom, an original 1960's rock band, that has performed domestically and internationally for over 50 years. This is a proof of concept, and is front-end only, therefore certain external links do not currently function (these are detailed below).
This websites provides fans with the ability to:
-
listen to The Whom's albums (past albums and any future releases), they will also be able to buy the tracks/albums via the provided links.
-
Watch videos of concerts, private venues and music videos
-
See photos of past events, concerts and even exclusive looks behind stage
-
Connect to the band via social media (facebook, instagram and youtube)
-
Fans will also be able to contact the band to enquire about booking for private venues (such as festivals, weddings, parties, e.t.c)
The menus at the top and bottom of the page provide navigation to each page of the website (details on how to access each page are summarized below)
NOTE: the bottom menu is only present on medium to larger screens (611px and above)
The banner "The Whom" logo at the top of the page also acts as a home button
The home page currently contains two parts: a callout section advertising a newly released album ("Generations") and a reach out section below.
The callout section allows the user to quickly access the new album, and listen to a free track, by clicking on the Generations album cover.
The reach out section provides a little background on the band and invites users to contact the band for the purposes of hiring. But also provides quick links to the music and photos pages.
- Click on the music navigation bar item (at the top or bottom of the page)
- This will take you to the music page, click on the album that you want to listen to
- Then you will arrive at a the album page, with the album artwork on the left
and the songs on the right, along with links to buy on itunes and amazon
- On mobile screens the album artwork will appear on top, with the song table below and the links to buy below
- Click on the play button (3rd column) to start listening.
NOTE: currently only the "Generations" album page has currently been deployed , with only the song "our generation" currently available for listening
- Click on the videos navigation bar item (at the top or bottom of the page)
- This will take you to the videos page.
- Videos are displayed along the left, with short descriptions on the right
- On mobile screens the videos will appear on top, with the descriptions below
- Click on the play button on the desired video to view.
- Click on the photos navigation bar item (at the top or bottom of the page)
- This will take you to the photos page
- photos are displayed along the left, with short descriptions along the right.
- On mobile screens the pictures appear on top, with the descriptions below
To see the band's facebook, youtube and/or instagram accounts, please click on their respective icons on the bottom of each page.
NOTE: the icons do not currently link to their respective accounts
- Click on the contact navigation bar item (at the top or bottom of the page)
- This will take you to the contact page
- Please provide all the following details in their respective boxes:
- Full name
- contact number
- details about your requirements (i.e: type of event, duration, song requests, e.t.c)
- Once information has been provided, click on the "send" button to submit.
We aim to reply to all submitted contact requests within 48 hours. However, if you do not receive a reply within this time, please re-submit your request.
NOTE: this time frame excludes bank holidays and weekends
- Cloud 9 IDE was used to write the HTML and CSS
- Bootstrap framework (v 3.3.7) was used to structure the page and add components (ex: forms, button, navigation items, e.t.c)
- Fontawesome icons were used for social media links and navigation icons
- Google fonts were used on all text (i.e: Knewave, Anton and crete round
- Minify code HTML and CSS code minifier was used
The project was uploaded to the github pages (via git). Github was updated with each addition of major content, i.e: with the creation of:
- the header
- the footer
- each page addition (music page, video page, e.t.c)
- after each testing and improvement
To run the code, simply open using any web browser.
In addition to testing after each new component was added, other more through testing was conducted at the end of the competition of each major stage (i.e: creation of header, footer, and the section areas for each page)
Testing consisted of: checking the validity of the code (using W3C HTML and CSS validator) and the behavior of each element across all screen sizes.
After, google’s developer tools were used to audit the site, using both mobile and desktop audits.
Final checks were conducted by several independent people at the end of the project, to ensure all was working as expected and the user experience was uniform.
Layout is similar across all screen sizes, with the following differences between mobile and desktop resolutions detailed below:
- Footer links disappear on mobile screens
- Music page: albums appear vertically aligned on mobile, rather than horizontal on desktop
- within each album page (ex: generations), the album list and where to buy are displayed to the right on desktop, whilst being below on mobile
- Photo page: pictures appear with captions to the right on desktop, whilst appearing below on mobile
All text is original and produced by myself, in accordance with the requirements provided by the client.
Videos were taken from youtube
Photos for the album covers were sourced from pinterest
The bands banner logo was created by myself.
All other photos were sourced from google images
I received inspiration for this project from the band "The Who". The original layout was inspired by the band "Iron Maiden's" 2014 website, as seen here (no.13)