Bass Militia Website

A website built for the Bass Militia Collective, created to serve as a promotional showcase and contact directive for their music events team, as well as their freshly launched record label.

UX

Bass Militia is a Bristol based collective that focuses on creating and promoting electronic dance music - namely the harder and darker side of mutant bass, drum and bass, and 4x4 bass oriented styles. They have been heavily involved in the local events industry for the past year in Bristol, having organised and successfully run some of the best nights for this style of music in years.

The owner of the brand approached me and asked if I could build them a simple but effective website to serve some of their requirements and streamline their marketing. The initial request was to have a page that easily displayed contact information and all posters of the previous events organised by the brand, allowing them to easily present their back catalogue of work as well as a means of contact for anybody interested. I suggested they should also include event imagery to deliver an instant insight on the general attendance and successful appearance of these past events.

I was told that in the past two months, the further expansion of the brand has led to the formation of a record label with the aim to push the music that has come to be expected when attending the events. When speaking with the client, we spoke about the fact they only planned to promote and display their full music catalogue on Soundcloud - a free music streaming website - and whilst this site does serve its purpose extremely well, it is not the best option for those wanting to uniquely display announcements and release information. It was also discussed how Facebook limits promotion of posts, and that when customers look on a businesses Facebook page, they don't gain a very good grasp of the company whereas a website allows you to immediately be faced with the information in a unique style.

So the basis of this project was to provide the client with a platform to document and showcase their content. I explained that I could create a front end site that would serve the following purposes for different user types:

• As somebody that has heard of Bass Militia, I want to look at the previous events organised by the brand so that I can see if its something I would be interested in.

• As a promoter looking to potentially collaborate, I want to look at what the brand has done in the past and then have the ability to contact them.

• As an existing fan of Bass Militia or as somebody that has previously attended one of their events, I want to be able to look on their website and see any upcoming events, this way I can see the dates of them and see what acts will be playing.

• As a DJ, I want to look up the music catalogue offered by the record label so that I can efficiently see what has been released and what is forthcoming.

• As a producer, I want to be able to see what has been previously released and have the ability to contact them, this way I can see if my own music will fit the style and if it would be something they are interested in.

I originally presented the wireframe found here as a rough idea, and the client was happy with my layout and general colour scheme. I did advise the layout may vary in places as I find what works and fits.

Features

As I was developing the website, the brand continued to create more media through their events and releases - meaning there became sufficient content to dedicate individual pages to each section of the website.

• Landing page
• Events page
• Record Label page
• Merchandise page
• Contact page

Existing Features

• Navbar - A Navbar is used across the site allowing users to easily navigate through the website regardless of the page they are on. The use of a collapsible dropdown menu is used on mobile view to save space.
• Social Media Links - The navbar also includes social media links across the website, these are relocated to the footer on mobile devices.
• The Landing page - allows users to easily and clearly navigate to either a specific page of the website they desire via the navbar, or to one of the external website links via the footer icons.
• Event images - The top of the Events page allows users to see photos taken taken at the events, achieved with the use of a photo carousel.
• Catalogue of past events - The Events page also allows users to clearly see all of the previous events hosted, achieved by displaying each of the posters in a chronologically ordered grid layout.
• Label page announcements - Users can clearly see any public news and announcements relating to the label at the top of the Record Label page via the 'Announcements' section.
• Back catalogue of releases - On the Record Label page Users can easily view the chronological order of releases and premieres on the label by viewing the 'Digital Album Releases' and 'Premieres' sections on the record label page.
• Direct file uploads / submissions - Artists are able to upload their demo submissions for the record label directly through the website by visiting the Record Label page and filling in the contact form in the 'Submissions' section at the bottom.
• Merchandise images - On the Merchandise page users can view photo carousels with the featured merchandise available.
• Purchase merchandise - Via the Merchandise page users are able to securely purchase using the linked PayPal 'Buy Now' buttons which display sizes and are actively linked to the correct corresponding payment account.
• Crew members contact directory - Users are able to easily view members involved in the team as well as their contact details. Users can click on these details to compose direct emails to the respectful recipients.
• Submission and enquiry sections - Users are able to see the correct avenue of contact in regards to track submissions, event enquiries or general enquiries etc by viewing the Contact page and locating the section relating to their needs.
• Direct contact forms - Via the Contact page any type of user is able to directly contact the brand via the website itself by filling in the contact form and allocating the correct reason for the enquiry.

Features Left to Implement

• I would like to include the back end processes to allow the contact form submissions to be received by the server and for file submissions to be uploaded and downloaded.
• I would like to embed social media widgets at some point to allow for Facebook and Soundcloud updates to be delivered live to the website for example.

Technologies Used

• Cloud9IDE
  • Cloud9 was the original IDE used to initially develop the majority of this project.
• Gitpod
  • Gitpod was the IDE I migrated to and finished the development of my project in.
• HTML5
  • I used the HTML markup language to create the structure of my website.
• CSS3
  • I used CSS to style the HTML on my webpage.
• Bootstrap 3.7.7
  • I used the Bootstrap framework only to help with minor content sizing and responsiveness, but mainly for the photo carousel and collapsed navbar. - I aimed to style the majority of the website myself using CSS without the assistance of the framework to maximise skills learnt.
• JQuery
  • I used jQuery alongside Bootstrap to collapse the Navbar.
• Font Awesome
  • I used Font Awesome for the social media icons.
• Google fonts
  • I implemented the use of Google Fonts into this project - I used 'Nunito Sans', 'Russo One' & 'Yantramanav'.
• Soundcloud Embedded
  • I was able to embed the respected Soundcloud tracks and playlists to the corresponding releases on the Record Label page.
• PayPal Embedded
  • I was able to embed PayPal purchase buttons to allow users to safely and effectively purchase items on the Merchandise page.
• Git
  • I used Git for version control.
• GitHub
  • I used GitHub alongside Git to commit the development stages and host the repository.
• GitHub Pages
  • I deployed my website to this for project marking and peer review.
• IONOS by 1&1
  • I registered the domain and hosted my final site to this service for my client to use officially.
• TinyJPG
  • I compressed my images using this website.
• ResizeImage.net
  • I used this website to quickly resize my images.

Testing

• Before I started the more in depth testing, I ensured that the website served the purpose it was built for by running through each of the user stories myself and checking all requirements were met.

• I tested the contact boxes as follows:

  • I went to the Record Label page and tried to submit the form without any information entered to verify the 'required' prompt appears. - Working
  • I tried to submit an incorrect email format to verify the error message appears. - Working
  • I verified it would only allow the user to upload audio file formats. - Working
  • I went to the Contact page and tried to submit the form without any information entered to verify the 'required' prompt appears. - Working
  • I tried to submit an incorrect email format to verify the error message appears. - Working
  • I verified it would allow the user to upload multiple file formats. - Working

• I tested all embedded Soundcloud players. - Working

• I tested the merchandise 'Buy Now' PayPal links, checking the correct information transferred to the secure purchase page. - Working

• I checked all navigation, href and anchor links were working and pointed to the correct destinations. - Working

• I checked that all images were displaying correctly across the site and in the photo carousels. - Working

• All email mailto: links were correct and allowed the user to quickly compose emails. - Working

• I tested the responsiveness of the website across every different phone size within Google Developer Tools. - Working

• I ran Audit tests within Google Developer Tools on both Mobile and Desktop to check that everything was hitting the highest scores possible. - Each section was 90-100%.

  • Doing this outlined the fact I needed to compress many of my images to allow for maximum speed performance. I successfully compressed every image to the threshold before it impacted on visible quality.

  Please note the 'Best Practices' score is reduced on each page due to me deliberately placing low contrast text at the bottom of the page

  

  

  

  

• I used the W3C HTML Markup Validator to check all HTML was applied and working correctly. - Working

• I used the W3C CSS Validator to check all the CSS was also valid and working correctly. - Working

• I tested the website on an Iphone 5s, Samsung Galaxy, iPhone 7 and X. I also tested on multiple Macbook Pro's and Windows laptops as well as across multiple different browsers. - Working

• I ran my website through GTmetrix and it presented me with speed issues I had not been given on Google Developer Tools.

  • It outlined that some of the images had been resized within the IDE so their native pixel ratio was still far too large.

  

  • I used compression and resizing tools to edit the images to give the best result possible.

• I hosted the website on its own domain https://www.bassmilitia.com and showed the client for feedback and testing.

  • He was happy with everything and found no bugs.

• I posted my webpage into the Slack 'Peer Review' channel for feedback from other students.

A small bug I ran into at the end was an image on the record label page breaking each time I attempted to load the page. I spent a while revamping the image and trying different ones. Finally I discovered I had somehow left a forward slash before the 'assets' part of the file path.

Deployment

GitHub pages

To deploy this project for project marking, I utilised the GitHub Pages feature. The steps I took to do this are as follows.

• I visited my GitHub repository page.
• I clicked on Settings in the top right hand corner.
• I scrolled down to the GitHub Pages section.
• The top part named Source contains a dropdown box, I clicked that and selected Master Branch from the menu.
• Upon clicking the Master Branch, the page automatically refreshed and a ribbon appeared stating this below message detailing the successful deployment of the page.

  Your site is published at https://samlaubscher.github.io/bass-militia-website/
  

IONOS by 1&1

To deploy this project for official use by my client, I followed the below procedure.

• First I registered the domain www.bassmilitia.com and bought the hosting package.
• I downloaded my repository from the GitHub repository page.
• I then opened the web hosting overview page - https://my.ionos.co.uk/hosting-overview
• I clicked on Use Webspace and was taken to a file uploading page.
• I unpacked the repository folder I had just downloaded, and uploaded it to this directory.
• I then returned to the web hosting overview page and selected Link Directory to Domain.
• I selected the domain I had just purchased.
• The page then refreshed and showed that the webspace was successfully linked to this domain.
• I then clicked on Manage Domain.
• I clicked on Settings and selected Apply SSL Certificate.
• The domain was now ready for use with https and the website was successfully and securely deployed.

Local Deployment

To deploy this website locally, users can follow these steps.

• Visit the repository page repository page.
• Click the Clone or download dropdown menu box.
• Copy the SSH key [email protected]:samlaubscher/bass-militia-website.git .
• Open terminal on their own local machine.
• Change the directory to the location you want the repository to be saved by using the cd command.
• Type [email protected]:samlaubscher/bass-militia-website.git .
• The files should now be downloaded to the specified directory allowing the website to be run locally by running the index.html file.

Credits

Credit must be given for the initial advice supplied through the project guidelines by Code Institute.

• Soundcloud provided the embedded code for the players via the release page share feature.
• PayPal provided the embedded payment button function through their website.
• Bootcamp Photo Carousel was taken from w3schools https://www.w3schools.com/bootstrap/bootstrap_carousel.asp.

Content

• All content was created myself or provided from Bass Militia directly.

Media

• All media used in this project was taken from Bass Militia directly. No content was taken from online.

Acknowledgements

• I would like to thank my mentor Ignatius Ukwuoma for his mid and end of project feedback, as well as the other students that provided information and advice either directly or indirectly through the Slack channels.