This website is to showcase up and coming band emily 7. It is a place for their fans to find out about gigs, tickets, check out their gallery and for prospective booking agents to contact them.
This website was designed to have an Indy feel and somewhat rugged design in line with the bands music and image. Currently they only have social media as a way of sharing upcoming gigs and use a third party for selling tickets.
The idea is that fans can come to this site to keep updated about the bands current schedule, see photos and to buy tickets.
The home screen is a center piece landing page. Just a carousel image block with a navigation bar. People who want tickets can purchase through one of the many links on the images or via the navigation bar.
There is also a facility to listen to the bands music via the spottily button clearly marked green on the carousel.
The about page is designed to highlight who the band members are, some of their back story with a scrolling parallax effect in the background of a music concert to further highlight this a bands website.
Further down the about page their is an i-frame for fans to sample some of the bands tracks without having to leave the page so for people who may be curious as to who the band are, they can get a feel for them here.
The gallery provides a nice visual presence with the main center piece one of the bands music videos in an i-frame from YouTube. This should grab the attention of browsers and if this type of music is to their taste they will get what they came for.
The Contact us page is a form for potential bookings, sponsorship, or general contact. The bands main goal is to attract fans but the best way to do that is by playing gigs.
As this site does not have a back-end the form at this time does not actually collect data. This is not within the capabilities of CSS/HTML. However as a visual representation of what I would like the user to see,
once the form is submitted it will take the user to a success page advising them their message has been sent and the band will be in touch.
John Doe was struggling to find tickets for the up and coming band now he has a resource that he can go to to get tickets
Jane doe wanted to catch up on the bands tracks and find out more about them. She went on to the about section and it had access to listen to music on the page as well as read up about the band
Joe Doe is a booking agent for a few festivals and gigs around the country and is interested in getting the band in for a few gigs as a support act. Now he can contact them on the contact page.
Kyle who is the lead singer / guitarist wanted a place to showcase upcoming gigs, be able to share new songs and to get information about the band out to the public. He wanted to streamline the booking process and to ensure agents can get in touch with them a lot easier.
Scott who is the drummer for the band wanted a place to showcase the bands recent photos from their gigs and tease new releases.
Wireframes created with Balsamiq. Project was developed from initial wireframes however changes were made to the final project outcome. Wireframe located in assets/img/wireframes/Emily7-milestone-wireframe.pdf and you can find them HERE.
Home Page
Navigation bar with logo to the left of 5 links : Home, about, tickets, gallery, contact. Carousel of 3 images relating to the band with different links and brief css animation and footer to band socials
About
Scrolling parallax images with css animation, images of the band members and lorem ipsum sample text. I-frame linked to Spotify account for the band
Tickets
External link to ticketmaster.ie to the bands next upcoming gig for buyers to get tickets. The main aim of the band will be to sell tickets to their gigs, users can do this easily by clicking tickets on the nav, or else one of the many buttons on the home page.
Gallery
Centered block i-frame to the bands music video on YouTube as the center-piece. These features highlight the bands music and creativity with an i-frame for spotify to their page and another to YouTube to one of their music videos.
So people wanting to know what the band are about can easily access this information Further down some sample images of the band in a gallery format.
Contact
Contact form collecting relevant information from prospective partners of the band or people just wanting to get in touch. Once a user completes the form it brings them to a sample success page This is just a visual and no data is actually collected. This would be something that will ideally be functional in the future.
Socials
The band want people to be able to find their social media accounts and follow. These are included in the footer of each page of the site to make that easier and have them all in the one place.
-
Add CSS navigation and effects to images in gallery to allow them to pop up when clicked on along with scrolling
-
Finish a functioning contact form that collects data
-
Add on a merch store for fans to be able to buy albums / branded
product -
Direct ticketing portal so fans can buy their tickets on the actual
bands website as well as 3rd party sources.
**
**
HTML
Basic necessity for a web site
CSS
Required to style my HTML and images
Used to develop wireframes and I am extremely grateful for the licence to use this product for the rest of this year. Credit to Matt at CI for approving.
Provided useful components and layout features to create this website. Extremely powerful box grid system for developing websites with a responsive design.
Used for editing photos and resizing
Amazing library of full web framework components to pull from and assisted with understanding the structure of certain elements.
Used for version control and storing and deploying website once complete.
Used this for icons and favicons for the likes of socials
Used Animista to create some moving visuals with CSS. Specifically the image overlays on the Home page H1 and About H1.
Used google fonts to pick appropriate fonts for the band
Built in features of bootstrap to allow animations not available with just HTML/CSS. The project uses JQuery to simplify DOM manipulation.
**
**
Testing phase 1 Beginning the project I have continuously tested for user experience and usability on multiple devices. Frequent usage of google developer tools to fix padding / margin and location issues of some of my components with css. In the early stage I was not using bootstrap as much as I have should have been. Because of this I used bootstrap but extremely limited amounts in creating the first layout. This caused quite a few errors in terms of positioning.
Testing Phase 2 After I revisited the bootstrap section of the course and sourced material from the official bootstrap website along with YouTube for structural information I updated my website to ensure it was responsive and efficient for users. Frequent testing on:
- 22 inch Dell monitor
- 17 inch HP Laptop
- Samsung s8
- I-phone-8
After each day of coding I would asses the usability and responsiveness of what I created and ensured it was functional.
**
Testing Phase 3
** Tested each individual webpage on https://validator.w3.org/ when I was nearing the end of my project. Each page had between 6 and 10 errors. Mostly labeling issues with classes and spaces in comments. There was one such issue regarding obsolete technologies regarding the width of the I-frame on the gallery.html page that has since been fixed. I consulted Stack Overflow for the reason behind this error. Results of W3 Validator:
- Home.html: Pass - https://validator.w3.org/nu/?doc=https%3A%2F%2Fthebigbushman.github.io%2Femily7-MS1%2Findex.html
- About.html: Pass - https://validator.w3.org/nu/?doc=https%3A%2F%2Fthebigbushman.github.io%2Femily7-MS1%2Fabout.html
- Gallery.html: Pass - https://validator.w3.org/nu/?doc=https%3A%2F%2Fthebigbushman.github.io%2Femily7-MS1%2Fgallery.html
- Contact.html: Pass - https://validator.w3.org/nu/?doc=https%3A%2F%2Fthebigbushman.github.io%2Femily7-MS1%2Fcontact.html
- Success.html: Pass - https://validator.w3.org/nu/?doc=https%3A%2F%2Fthebigbushman.github.io%2Femily7-MS1%2Fsuccess.html
**
Testing Phase 4
** After some minor bug fixes and non visual errors I enlisted 4 colleagues to navigate the site. I wrote down 5 challenges for each.
- Locate where to buy tickets
- View the gallery and play the music video
- Contact the band
- Follow the band on social media
- Find out the names of the band members
Within 3 minutes each person advised me they were able to navigate and find each of these without any issues and all tasks were successful.
Follow on testing from GTmetrix.com showed the page has a speed score of A (92%), A fully load time of 1.6seconds. Test server location: Vancouver, Canada using chrome.
Site tested using internet Explorer, Chrome, Google app, Firefox. Some slight delay in loading on IE but nothing too significant. Displays and resolutions all fine. No user issues and website functioning fine.
|Scenario|-----------------------------------------------------------------------------------|Result|
|Link testing from Home page to all page links: About , Tickets , Gallery , Contact, Socials |Pass|
|Link testing from About page to all page links: Home , Tickets , Gallery , Contact, Socials |Pass|
|Link testing from Gallery page to all page links: Home, About , Tickets , Contact, Socials |Pass|
|Link testing from Contact page to all page links: Home, About , Tickets , Gallery, Socials |Pass|
|Link testing from Contact page to all page links: Home, About , Tickets , Gallery, Socials |Pass|
|Mobile capability buttons checked as above|-------------------------------------------------- |Pass|
|Contact form checked on mobile with correct information|--------------------------------- |Pass|
|Contact form checked on mobile with incorrect information|------------------------------- |Pass|
|Tested contact form with correct criteria requirements|--------------------------------------|Pass|
|Tested contact form with incorrect criteria requirements|------------------------------------|Fail|
Some bugs noticed with the socials in the footer towards the end of development. The last icon was wrapping below the first three icons on mobile. I have resolved this issue so all 4 footer socials wrap on same line.
Home tab not responding on contact & gallery page. Review of link addresses showed it was still marked as "#" towards end testing.
Contact form not requiring specific formats, ie Letters in phone number section and not requiring e-mail or any content for form to be submitted. Added in required fields on selected content and updated input Id's.
When I finally deployed the project to github pages, most of my images were broken. I had to evaluate my code and find the error. Even though everything worked fine in gitpod it still would not display. I discovered a path error in some of the images that were sending github to far up the chain to find them. Issue resolved
** To deploy the project I followed these steps:
-
From within the main Repo Here I clicked on the settings button on the right hand side.
-
I then Scrolled down to Github Pages and selected master branch as a source.
-
This page is now deployed to here
-
If i make any new changes to this repo it will automatically update on Github Pages
**
**
Viewed some websites for inspiration as to what to build and how to implement them.
Nishant Kumar (Mentor) Nishant has provided me with guidance and feedback consistently throughout my project. He was always constructive and provided resources for me to research in areas I struggled. These have mad a huge difference to the work I create. I am extremely grateful.
Easy Tutorials Was a valuable resource when I was briefly stuck on an issue relating to the gallery page. Thank you for your work.
Academind A fantastic resource and videos explaining the bootstrap box model in a different way. Extremely easy to grasp the concept and further added to what I already knew.
Code Institute Amazing course, has provided me with clear direction in everything I have created so far. The trainers explain things in a great way and provide great resources to be able to further learn.
**
**
Lorem Ipsum The Dummy text used on the website primarily on about.html is from. A really useful resource for adding in authentic looking language to give the impression of a functioning web page.
Pexels amazing catalogue and free use images which are greatly appreciated. Both parallaz images on the about page taken from Here & Here
Emily7 Images of the band provided by the band.
Spotify I frame and buttons to link to the bands music.
Youtube Credit to youtube for hosting the video used in the I-frame.
**
** Code Institute Nishant Kumar Sarah AlMutairi for her work on codepen. It gave me an understanding of parallax images Wolfgang (Pexels) for his free to use photos