GithubHelp home page GithubHelp logo

milestone-1's Introduction

Deephouse - DJ Hire & Fan Website

Milestone One Project | Code Institue

This website is designed for the busy DJs, fans and club owners who are always on the go. With a simple and elegant design along with its professional look and feel providing a sense of trust to its users. The sites easy to use navigation makes for a satisfying experience for its users, allowing you to navigate to any section of the page quickly and efficiently.

There are four features essential to DJs and Fans needs all combined into one website, such as booking a DJ, listening to the latest new mixes and track releases, watching videos of DJ gigs, and checking the event listings for the latest upcoming events for when your favourite DJs are playing in town.

UX

This website is for DJs, venue owners and fans of Deep house music to book and hire DJs for their venue, as well as listen to new DJ mixes and Track releases. Users of the website can also look at the latest upcoming events to find out where their favourite DJs are playing.

The website is a mobile first design, and so I decided to go with the one page layout rather than multiple pages. The reason being is that I believe the one page layout would be more efficient and easier to navigate on mobile devices.

The main objective of this website is to get as many subscribers and followers of Deephouse, in creating awareness and growth for the brand, and in doing so getting more clients, with the goal at becoming one of the top go to DJ hire and fan resource page for the Deephouse dance music genre.

At the beginning during the strategy faze I spent a lot of time researching other DJ hire and electronic dance music websites for inspiration, and to try to build up an idea in my head of what I wanted my website to look like. I also looked at what I needed to do, to make my site unique and stand out from the rest.
From what I gathered on my research is that many of these sites only focused on one particular feature, such as DJ hire sites with booking a DJ only, Music sites was only listening to the tracks, Music videos on YouTube, and the event listings are all on separate websites. So from that, what I decided to do was to combine all these features into the one website.

I then created a list on a piece of paper of what was worth doing and the importance and viability of all the features listed, and by doing so I managed to cut out a lot unnecessary features that would have otherwise cluttered up the website.

At this stage I knew exactly what I wanted to do, and in my head I was visualizing the website on how it was going to look. I then used the free trail of Balsamiq to layout the wireframes for this project.

Click the link to view Wireframes

Click the link to view external Wireframes

From the start I knew I wanted a dark colour theme, as I wanted to signify the mood of a dark nightclub. From my research I came across several colour theory and phycology websites, on how colours can affect a user’s mood, and from what I learnt is that blackish colours represents power, luxury, sophistication and elegance that evoke professionalism. The greyish colours represents neutral, simplicity, calm, futuristic and logic and is associated with technology and sophistication. This is exactly the mood I wanted to reflect from the website.

Colour scheme

Along with the shades of black and grey, I had decided to use red, blue and green colours as to represent the lights that you would see in a nightclub for the use on icons and logos, this worked well.
I later changed the shades of the red, blue and green colours to match that of the embedded music players that I sourced from Beatport. The reason being is that I could not change the CSS for the player embeds, and so I decided to match the colours throughout the website.

User Stories

  • As a deep house music fan I can click on a subscribe button and enter my email to receive the monthly newsletter
  • As a venue owner I can click on the book now button that takes me to a booking form.
  • As a venue owner I can click Contact on the navigation menu to take me to a booking form.
  • As a venue owner I can enter my first name and last name to the booking form.
  • As a venue owner I can enter my email and phone number to the booking form.
  • As a venue owner I can select from a dropdown list of counties to enter to the booking form.
  • As a venue owner I can select from a dropdown list of DJs to enter to the booking form.
  • As a venue owner I can write and leave a message to enter to the booking form.
  • As a venue owner I can click a send now button that submits the booking form.
  • As a venue owner I can listen to what the DJs music sounds like before I book.
  • As a venue owner I can move my mouse over the DJ crew images to reveal their profiles and music styles.
  • As a deep house music fan I can look at upcoming events to find out where my favourite DJs are playing.
  • As a Deep house music fan I can listen to my favourite DJ mixes.
  • As a Deep house music fan I can listen to latest new track releases.
  • As a Deep house DJ I can listen to the latest new Track releases and purchase from a link to external site.
  • As a deep house music fan I can click on social media icon links that will direct you to follow deep house on external social media platforms.
  • As a deep house user I can click the play button to watch DJ YouTube videos.

Features

Existing Features

  • Feature 1 - The Navagation bar

    • The Navbar has a slight dark transparency and is fixed to the top and will follow the user as they scroll the page. I went with a fixed navbar as I wanted the user to be able to click any section on the Navbar menu and get their destination instantly without having to scroll back to the top.

    • When you hover over the menu links it highlights the text in white and displays a green underline effect that is visually pleasing to the user.

  • Features 2 - Images

    • All images on the website where free and sourced from royalty free stock photo websites. The images where then edited and resized in Photoshop and a free online tool was used for compression to reduce file size.

  • Features 3 - Subscribe Button

    • By clicking the Subscribe button on the landing page, the user receives a pop up modal where they can input their email address, and by clicking on send will receive a monthly newsletter with all the latest information. This is intended for building up a lot of subscribers and fan base. (There is no back end server to this website for the send functions to work, it is only for educational and coursework purposes.)

  • Features 4 - Book Now Button

    • The Book Now Button is to the right and is part of the Navbar, as with the Navbar the Book Now button will always be in view to the user as they scroll the page, when clicked it will bring you to the booking form destination where the user can fill in a form to book a DJ for their club.

  • Features 5 - Rotating CD Icon

    • The Deep house logo in the Navbar and centre of the landing page have a CD Icon that spins as you scroll the page, this is used just for user experience. Also the back to top indicator has the same rotating CD Icon.

  • Features 6 - Back to top indicator Icons

    • When you scroll past the landing page a Scroll to top indicator will appear, giving the user an indication that when clicked will bring the user back to the top of the landing page. The back to top icon is a CD with and arrow on top and the CD spins as you scroll the page. Clicking on the logo and on the home section of the Navbar will also bring the user back to the landing page.

  • Features 7 - Bouncing arrow down

    • The bouncing animated arrow on the landing page it there as an indication to the user that they can scroll down the page for more information.
      I got the idea to do this from what I learned by completing the bouncing ball challenge with Code Institute, by adding my own tweaks and an arrow icon to get the effect as a scroll down indicator.

  • Features 8 - Sliding Profile information on DJ Images

    • As the user points their mouse over the DJ images in the About section, you get a horizontal slide transition that shows the user a little profile information on the DJ such as Name, age, Location and style of Music that they play.

  • Features 9 - Club Scene Image Zoom

    • On the media section of the page when you move your mouse over the club scene images, the images will have a slight zoom effect.

  • Features 10 - YouTube Videos

    • YouTube videos where embedded to show users what kind of music sets our DJs play at gigs, and what to expect at one of our shows.

  • Features 11 - New Track Releases

    • The new tracks are there so that DJs can find out the latest top 5 deep house music releases and listen to it, with the option to buy from an external source.

  • Features 12 - New DJ mixes

    • The new DJ mixes player embeds allows users to click on play and listen to DJ mixes

  • Features 13 - Upcoming Events

    • The upcoming events section uses tables to create the listings and on smaller devices such as mobile phones the user is presented with a direction arrow left and right to indicate that you can scroll horizontally left and right to see more of the events listing.

  • Features 14 - Booking Form

    • The booking form section allows users to enter their First and Second name, plus Email and Phone number, and are all required fields. The user can also select a Country and DJ from a dropdown list and enter a message but these fields are optional. By clicking the send now button the booking form information will be sent. (There is no backend server set up for this project, and is just used for educational and coursework purposes.)

  • Features 15 - Get in Touch

    • The get in touch section provides contact information to the user such as Address, Phone number and Email address. When the user mousses over the contact information there is a bobbing up effect.

  • Features 16 - Social Media Icon Links

    • The social media icons provide the users with links to Deep house social media platforms so the user can follow.

Features Left to Implement

  • CSS limitations: To use JavaScript to edit default browser styles.

    • Some of the features that need to be implemented are on the Bootstrap booking form and modal sections, and I had reached the limitations of what I could do with custom CSS. I had to turn off auto complete on the email input sections, as there was no way to change the default browser style with custom CSS, and it was causing a white background to appear in the input section once a selection had been made.

      The border colour of the dropdown menu for select country and DJ sections also could not be changed with custom CSS and believe it was a browser issue and would need JavaScript to fix this. Different browsers displaying default arrow style indicators on the enter phone number section would need to be removed or styled using JavaScript.

  • Other Feature Ideas: Some ideas of possible features in the future.

    • A forum for Deep House music fans to chat and share their views and ideas with other fans.

    • Be able to book and purchase tickets for upcoming events.

    • The ability to purchase tracks on the website internally, rather than being directed to an external website.

    • To have DJ mixes available for download to users on the website.

Technologies Used

Photoshop - Image editing

  • Being an experienced Photoshop user, I used the software to reduce the file size of all the images with the purpose of optimization and to reduce loading times of the website, especially on mobile devices.
    The original images sizes where between 4000 and 5000 pixels and approximately 3-5mb each on disk. I reduced the images to 1400 pixels, as anything below that size was causing noticeable aliasing. This reduction in size got each of the images to less than 1mb size on disk.

  • I also used Photoshop to convert the DJ profile images to black and white, as well as changing the hue and saturation colour settings to bring each image to the same level of brightness. I then added a darkish brown colour tint to make the images have a nice warm and welcoming feel to them.

  • Dot Overlay Image

    • For the dot overlay image on the landing page I created a 6x6 pixel background in Photoshop. I then used the brush tool with a white colour to make the dot but only have 1 of the pixels solid and surrounding pixels fade out. I then used a grey layer and set the image to 50% opacity.
      In the CSS I also used a grey colour that is part of the colour scheme of the website by using the RGBA(24,24,24,0.8) and played around with the colour and transparency until I thought it felt right.

    • The reason I used the dot overlay is because the background image of the crowd had some imperfections and the image was to bright making the landing page text looked too washed out, by using the dot overlay it made the text stand out more. The dots overlay also makes for a nice decoration and feature to the landing page.

      https://www.adobe.com/ie/products/photoshop.html

TinyPNG - Image compression

  • The online image compression tool TinyPNG/JPG was used for further optimization of the images to improve loading times of the website. After the compression the images had been reduced by up to 70% leaving the file size on disk for each image roughly between 80-300 kb.

    https://tinypng.com/

Balsamiq - Wireframes

  • I used the free cloud trail of Balsamiq wire framing software to create the wireframes for the project.

    https://balsamiq.com/

HTML5 - Hypertext Markup Language

  • HTML5 is the standard markup language and was used to create the basic structure of the website, semantic elements where used to provide meaning of the content to search engines.

    https://www.w3.org/TR/html52/

CSS3 - Cascading Style Sheets

  • CSS3 was used to decorate the HTML and style the page layout with colours, Fonts, positioning of content, and to make the site responsive on all devices.
    I also used custom CSS3 to override bootstraps default stylings.

    https://www.w3.org/Style/CSS/

Javascript - Programming Language

  • Although not required for this project, some JavaScript was used and added to the end of the HTML document. Some scripts such as smooth scrolling with navigation and also the spinning icon was used as a visual indicator when scrolling the page. The reason these scripts where added was for a better user experience on giving a nice smooth flow to the navigation of the page.

    https://developer.mozilla.org/bm/docs/Web/JavaScript

Cloud 9 - Intergrated Development Enviorment

Bootstrap V4.1.3 - Front End CSS/JS Framework

  • Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, Mobile first sites. This was used to speed up development, by using bootstraps library of design templates such as the navigation bar, the grid system, Modal, Buttons, Tables, and Forms.

    I used custom CSS heavily to override bootstrap default stylings.

  • Content Delivery Network

    • I used the Bootstrap (CDN) system of delivery method for this project. I added the Bootstrap CSS link to the head of the HTML and at the bottom I then added three JavaScript plugins that are required for some of the bootstrap components to work.
      Bootstrap uses its own JavaScript plugin along with JQuery and Popper.js

    • jQuery's Slim Build - https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/

    • Popper.js - https://popper.js.org/

Git - Version Control System

  • Although Git can be downloaded separately, the Git I used for this project came as a pre bundled package that was part of the Cloud9 (IDE) I used Git to commit versions of the project to repositories on GitHub.

    https://git-scm.com/

GitHub - Hosting Version Control Repositories

  • GitHub was used as an external backup, version control and hosting of the projects repositories. GitHub pages were also used for hosting and deployment of the website.

    https://github.com/

Font Awesome - Icons

Google Fonts - Typography

  • The font families that are used on the website where imported from Google Fonts extensive library. The font 'Ubuntu' was used for the logo text and the font 'Roboto' were used as the main text throughout the site.

    https://fonts.google.com/

Favicon - Tab Icon

Hover.css - Hover Effects

  • Hover.css was used to add a hover underline border transition to the navigation menu bar and also to the get in touch section of the page using a hover bob effect on the Address, Phone, and email info section.

    http://ianlunn.github.io/Hover/

Testing

Chrome Dev Tools

  • Chrome browser and dev tools were used as the main testing environment. The list of devices below where all tested comprehensively on portrait and landscape displays. The responsiveness with window sizing was also tested.
Phone Tablet Desktop/Laptop
BlackBerry Z30 BlackBerry Playbook Laptop with HiDPI Screen
Galaxy Note 3 Kindle Fire HDX Laptop with MDPI Screen
Galaxy Note II Nexus 10 Laptop with Touch
Galaxy S III Nexus 7
Galaxy S9 iPad Mini Windows 10 Desktop
Galaxy S7 (real) iPad 27 inch Monitor (real)
LG Optimus L70 iPad Pro 24 inch Monitor (real)
Microsoft Lumia 550
Microsoft Lumia 950 Windows 7 Desktop
Nexus 4 27 inch Monitor (real)
Nexus 5 24 inch Monitor (real)
Nexus 5X
Nexus 6
Nexus 6P
Nokia Lumia 520
Nokia N9
iPhone 4
Pixel 2
Pixel 2 XL
iPhone 5/SE
iPhone 6/7/8
iPhone 6/7/8 Plus
iPhone X

Questionable Issue: When testing on Chrome device emulators, I noticed that when scrolling over YouTube videos and music players on mobile devices seems to lose its focus. When I tested this on a real mobile device, this does not happen and scrolling works fine. So I’m not really sure if the emulators are 100% accurate.

Other Brousers

  • Firefox

    • The Firefox browser and all its device emulators where tested along with window responsiveness and landscape and portrait displays.
      No issues encountered and all work as intended.

  • Opera

    • The Opera browser and all its device emulators where tested along with window responsiveness and landscape and portrait displays.
      No issues encountered and all work as intended.

  • Safari

    • As I had no access to any Apple devices for testing, I downloaded Safari for Windows on a Windows 7 operating system.

    Issues Encountered

    • The latest version of Safari I could get for windows was Safari 5.1.7. And on further research into this I found out that Apple has abandoned and discontinued development for Safari for windows many years ago, with the latest update for this in 2012.

      I tried to use this older version anyway but when I try view GitHub or the project I get a message that Safari can't establish connection to server github.com.

      For this reason I could not conduct any testing for the Safari browser. If in the future I can get access to an Apple device I will do testing for this.

  • Edge

    • The Edge browser and all its device emulators where tested along with window responsiveness and landscape and portrait displays.

    Issue Encountered

    When testing on the Edge browser I encountered an issue with the image on the landing page. When the user scrolls the page the background image judders (some sort of shaking).
    I have spent a lot of time on this project trying to resolve this one issue and have searched the internet tirelessly for a solution with no luck.

    In my efforts to try pinpoint this problem I started to comment out all the JavaScript scripts and testing the site each time I removed a section of code. I continued to remove sections of code back to the bare minimum and also using Chrome dev tools until I found what was causing the Issue.
    From what I found is that the dot overlay image with transparency that is overlaid on top of the background image on the landing page is causing this judder, and by removing this the site works fine.

    Although I found what was causing the problem, and because it renders and displays perfect on all the other browsers I still had the issue of trying to find a fix for it on Edge.
    If I was to leave out the dot overlay image just for the sake of Edge browser the elegant look and feel of the site would be lost with the background image looking to bright and plain and the text looking washed out and hard to read.
    So I continue to try finding a solution for this problem

    On my search to try find a fix for the issue I came across numerous sites and forums with many offering some sort of solution and lots of comments saying that it was a common Microsoft bug with several posts offering JavaScript hacks and solutions. All of the possible fixes I came across I tried and they did not resolve the issue.

    I also tried the Code Institute slack community for some feedback and possible fixes, but all solutions put forward I tried and did not fix the issue.

    My conclusion on this issue is that I decided to leave the Dot Overlay image in the site as it works perfectly fine on the other browsers, with the purpose as I move forward onto the next module JavaScript Fundamentals that I can learn and better understand a way to fix this problem.

  • Internet Explorer

    • GitHub and GitHub pages where I have this project deployed does not support Internet Explorer anymore with the message to use Edge, Chrome or Firefox instead.
      Regardless of this I had a look at the site anyway and there is an issue with the arrow down indicator pushing to the right and off the screen.
      With further research on the internet I discovered that Internet Explorer is outdated and obsolete browser even with the latest IE11 still being updated by Microsoft but not supporting many of the modern technologies for a modern browser experience and to use Edge instead.

      For these reasons above I cannot conduct proper testing with Internet Explorer on this site as the results would be inconclusive.

Areas Tested

  1. Subscribe Button:

    a. On the landing page I clicked on the "Subscribe" Button, and can verify that the pop up modal functions.
    b. I tried to submit an empty email form and can verify that a required now message appears.
    c. I tried to submit an invalid email an can verify that the relevant error message appears.
    d. Entered correct email format and can confirm that it works as intended.
    e. Clicked on the close button and X to close and can confirm that both function as intended.

  1. Navigation:

    a. I clicked on each menu link on the Navbar and I can confirm that all links work as intended.
    b. I clicked on the "book now" button on the Navbar and can verify that I was directed to the Contact booking form on the page as intended.
    c. I clicked on the Navbar Deephouse logo and can verify that I was directed to the landing page as intended.
    d. I moved the mouse over the navigation links and the green underline hover works as intended
    e. When viewing smaller devices and on window resizing I can confirm that burger menu comes into view for smaller devices as intended.
    f. I clicked the burger menu and it displays the menu links on dropdown list as intended.
    g. I clicked on menu links from the burger dropdown and selected each link I can verify that this works as intended.
    h. After selecting a link from the dropdown burger menu I can confirm that it closes the dropdown after selection as intended.

  1. About Us - DJ Profile Images

    a. I moved my mouse over each DJ Profile image and I get a sliding overlay effect with DJ Information as intended

  1. Media

    a. I moved my mouse over each of the club scene image and it creates a zoom effect and can confirm that it works as intended.
    b. I clicked play on YouTube video embeds and it plays the video as intended
    c. I clicked on each one of the 5 embedded new tracks and they all play and work as intended.
    d. I clicked on each one of the 5 embedded new mixes and they all work as intended

  1. Event Listing

    a. On smaller devices I can scroll horizontally on the events listings as intended

  1. Boooking Form

    a. I tried to enter empty first name and can verify the required message appears.
    b. I entered my first name and can verify that it works as intended.
    c. I tried to enter empty second name and can verify that the required message appears.
    d. I entered my second name and can verify that it works as intended.
    e. I tried to submit empty email form and can verify that a required now message appears.
    f. I tried to submit an invalid email an can verify that the relevant error message appears.
    g. I entered the correct email format and can confirm that it works.
    h. I tried to enter empty phone and can verify that the required message appears.
    i. I tried to enter text in the phone section and it does not input as intended.
    j. I entered numbers in the phone section and it works as intended.
    k. I tried to select a county from the dropdown list and it works as intended. This field is optional.
    l. I tried to select a DJ from the Dropdown list and it works as intended. This field is optional.
    m. I entered text to the message field and it works as intended. This field is optional.
    n. I clicked on the send now button and it works as intended. ( There is no backend server set up for this project, it is just intended for educational and coursework purposes. )

  1. Get In touch Info

    a. When I move my mouse over the get in touch address info I can confirm that it pops up and hovers.
    b. When I move my mouse over the get in touch phone info I can confirm that it pops up and hovers.
    c. When I move my mouse over the get in touch email info I can confirm that it pops up and hovers.

  1. Social LInks

    a. I clicked on all the social media icon links and I can verify that all links work as intended and open in a new window.

  1. Scroll to Top

    a. I clicked the scroll to top icon and I can verify that it works as intended

W3C Validation

  • Markup Validation Service

    This online service was used to check the validation of the HTML code.

    • Errors encountered and fixed

      • Images: I removed stray end tags on images that where displaying errors in validation results. The removed end tags fixed the issue.

      • Music Player Embeds: The music player embeds where displaying errors in the validation results. The 100% width was giving an error bad value so I removed it and added it to the CSS instead.
        Removed Frameborder from the music player embeds as it is an obsolete element and I used Border in the CSS instead.
        I removed Scrolling element from music player embeds.

        Putting the HTML through the validation again displays no Errors or Warnings.

        https://validator.w3.org/#validate_by_input

  • CSS Validation Service

    This online service was used to check the validation of the CSS code.

Deployment

I used GitHub Pages free hosting to publish the website for this project.
Milestone 1 project Click to visit Deephouse

Credits

Content

Media

Code

Inspiration

Acknowledgements

  • I'd like to thank my Code Institute mentor Chris Zielinski for his help and guidance on this project.

  • I’d like to thank the Code Institute student care tutors for quick response to any questions I had, and also for the encouraging emails that help to motivate me.

  • I’d like to thank the Code Institute slack community for the help and support with any questions I had, and also the information and feedback I received.

milestone-1's People

Watchers

avatar avatar

Forkers

code-institute-submissions

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.