Welcome to the new homepage for Belfast DJ duo FAUX DJS!
This is the hub for all potential fans and employers of Faux DJs. It is a simple, minimal, intuative, easy to use website with emphasis on their particular style of music to attract potential collaborators and also a resource for potential fans to hear more of what they do musically and find out where to hear them play in the future. Social media links are included so you can find out more!
To go to the live site click here
-
All users should get a short concise description about Faux Djs with some basic information about who they are and what they do
-
Fans and potential employers shoud be able to listen to dj mixes and playlists to get and idea about all the types of music they play.
-
Fans should be able to check out where and when they are playing in the near future so that they can hear them play.
-
Potential employers should be able to find out when Faux DJs are available for their gig.
-
Potential employers should easily be able to contact Faux DJs to check availability for potential gigs
-
All users should be able to navigate the website easily and all available information on the website should be easily and intuatively accessed.
-
All users should be able to find links to various social media channels, most importantly facebook and instagram, on all pages at all times.
Basic wireframes for this project were created using Balsamiq and you can find a link to the balsamiq project file here
Wireframes Pictures Repository
A simple colour scheme was intended for this project as the design was to look minimal, also a moodboard of different photos was requested form the client to gain an understanding of the atmosphere they wanted to create with the site. On consultation with the client a dusky lavender pink background colour was selected to stand out visually in comparison to other websites and also visually and also to match the colour scheme of the photos that were selected to use for the project.
Initially a light blue font colour was chosen to contrast against the pink background but this was found to score low on accessibility on google lighthouse for users with visual impairments so black was selected as the main font colour for easier reading by all users.
- allows all users to access Dates when Faux DJs, Audio of what they play and contact details via links to all parts of the site
- allows all users to find out a bit of basic information about Faux DJs
- allows all users to access social media channels so that they can find more information about Faux DJs
- allows potential employers to easily access contact form instantly
- allows fans to find out when we're next playing and allows potential employers to see if we are available when they need us
- allows fans and potential employers to hear what music Faux DJs play
- allows potential employers to contact Faux DJs for gigs
- Photos Section showing the atmosphere at a Faux DJs gig
- Reviews section on homepage of previous employers and influencers endorsing Faux DJs
HTML5 for the structure of the website
CSS 3 for the look of the website
Font Awesome for social media icons
Bootstrap 4 for navbar, grid layout strucutre & form layout structure
Asana for project management
Balsamiq Wireframes for creating Wireframes for initial visual development
Gitpod for writing and testing code.
GitHub for storing code.
Google Chrome Development Tools for testing code on various device sizes during development.
PicResize to change picture sizes for formatting purposes.
Web Formatter to format HTML and CSS code.
Troy to test website on different device types and sizes
Google Lighthouse for testing code health, accessibility, speed and search engine optimisation
Modified Embedded Code from https://soundcloud.com/ and https://www.spotify.com/
-
Home page opened and scrolled to read entire Bio.
-
Audio page opened and scrolled so all content was viewable and mixes tested for audio.
-
Dates page opened and scrolled to ensure all dates, venues and times were readable.
-
Home page opened and scrolled to ensure book now button is readble.
-
Contact page opened and form scrolled so that all parts a viewable.
-
Contact page form submit button clicked and required message returned to ensure form works correctly.
-
Open all pages and check that link tree can be easily viewed at all times.
-
Open all pages and check that social media icons are easily viewed at all times.
The tests were performed live on Apple Macbook Pro running the following browsers without issue:
- Google Chrome
- Google Chromium
- Safari
- Opera
- Mozilla Firefox
Screenshots showing these user stories live on desktiop can be found here
The following devices were emulated on Google Chrome developer tools running the site with no issues:
- Ipad
- Ipad Pro
- Iphones 5 to X
- Google Pixel
- Google Pixel XL
The Website was tested on the Troy site using the tests below with no issues.
Devices emulated are as follows:
- PC Screen
- Ipad
- Ipad Retina
- Samsung S8
- Samsung Galaxy Tab S
Google Lighthouse testing documentation for desktop and mobile for all pages can be found in PDF form here
NB: Speed Testing information on Lighthouse seemed to be variable as it could change depending on time of day.
- Homepage
- Dates page
- Audio Page
- Contact Page
- CSS information
Bug: Couldn't center logo on bootstrap navbar.
Debug: Set navbar postion to relative and logo position to absolute. Didn't end up using this though as it made index.html feel unbalanced.
Bug: fixed-top bootstrap class made content unviewable on all pages.
Debug: adjusted margin-top and margin-bottom on all pages so that content was viewable again.
Bug: After commit 28 Google Lighthouse Audit identified that iframes had no titles from embedded soundcloud and spotify code on audio.html.
Debug: Added iframe titlesfor better accessibility on screenreader.
Bug: google lighthouse identified this these cross-origin links unsafe destinations in soundcloud links on audio.html.
Debug: added rel="noopener” to target=“_blank”. Amended this on index.html, dates.html and contact.html also as all social media links included target=“_blank”
Bug: After commit 27 w3c html code checker returned errors for css being used inline to style width for embedded soundcloud and spotify code on audio.html.
Debug: Fixed this by using a bespoke class and amending style.css with the relevant code.
Bug: frameborder and scrolling in embedded code as this also returned errors in w3c html editor.
Debug: Removed them as they are obselete elements
Bug: w3c returned errors as some img did not have alt tags.
Debug: Added alt tags to img tags identified as also causing errors.
Bug: Dates.html had an error in w3c validator as a h2 tag was used in a table.
Debug: h2 tag removed and used more suitable tag
Bug: Previously warning was returned on w3c validator as was showing that file could not be mapped in xml due to hypens being used more than twice in a row.
Debug: Amended html comments so that it is now mappable in xml files.
Bug: Section on homepage had no heading element so made site less accessable to visually impaired users
Debug: Added h2 child to section element on homepage to make page more descriptive to visually impaired users.
Bug: Date and time input types for form are not supported in firefox and safari respectively.
Debug: Amended contact.html form to take away these and used text types and placeholder info to guide users.
Bug: Links did not open in new window on dates page.
Debug: added target"_blank" to links to make them open in new window.
In the GitHub Repository from the project https://github.com/markj0hnst0n/fauxdjsmilestoneproj1/
- Click the 'Settings' Tab.
- Scroll Down to the Git Hub Pages Heading.
- Select 'Master Branch' as the source.
- The Page will reload 'Settings' again.
- Scroll to GitHub pages heading and there will now be a clickable link https://markj0hnst0n.github.io/fauxdjsmilestoneproj1/
- Click this link for the live deployed page
In the GitHub Repository from the project https://github.com/markj0hnst0n/fauxdjsmilestoneproj1/
- Click Clone or Download
- Copy Git URL from the dialogue box
- Open your developement editor of choice and open a terminal window in a directory of your choice
- Use the 'git clone' command in terminal followed by the copied git URL
- A clone of the project will be created locally on your machine
Written content by Mark Johnston
Photographs © Filly Campbell and Niall Murphy used with permission.
DJ Mixes by Faux Djs (Scott Lowry and Mark Johnston)
Laverys spotify playlist by Pete Woods with contributions from Faux DJs used with permission
My main influence for this site was simplicity. Every element must have a function and it must work well.
I took layout pointers from the following websites.
I also looked at the following website for some guidance on the 'dates' page:
Thanks to the following people for making the project happen:
- My Mentor Precious Ijege for his guidance on key concepts and patience in explaining them!
- The Code Institute Slack Community and in particular Tom Dignan for his help is centering my logo within a bootstrap navbar. I didn't go in this direction but it was a good learning expirience trying to solve this problem!
- The Code Institute tutors and instructional material.
- My Wife Joanna Johnston for her (contructive) criticism and understanding when I lock myself away in the attic for hours on end