meteor music full site

Summary

This is a practice site that I built during my studies. As I leant a new skills, I tried implementing them on this site. This helped me to fully understand things since I could apply it in a more realistic setting. As my studies progressed, I continued to add more features until the site reached it’s current version. This site is not quite as polished as the others but it does have some unique features and uses different skills.

first design vs wireframe
Learning InDesign

I started building this site as I was learning my core web development skills. At this point I hadn’t covered Adobe Creative Suite so the site was constructed without an initial wireframe. However, once I did start Creative Suite, I did learn about InDesign and how to create wireframes. I then rebuilt the home page using this new design.

illustrator thumbnail
Site Assets

Originally I made some basic assets just as placeholder content. However, as I began studying Adobe’s graphics software I decided it was time to update these. I took the original sketches and traced over them in Illustrator; recreating them as vector graphic. The result, was a much bolder and cleaner look that added to the design.

Additionally, I was considering the use of these assets in other media e.g. print, so vector graphics were the best option. Aside from Illustrator, I also used Photoshop to create the site’s background image since the background was looking a bit empty. I took a stock image of some vinyl records, converted it to greyscale and then modified the contrast. This made the image work much better as a background layer and tied it in nicely with my colour scheme.

MM static file structure
Using Dreamweaver

This site is not integrated into a CMS/platform, instead it runs as static html files (with extra scripts and stylesheets). All the functionality of this site was built myself, apart from some pre-made element. As a result, I learnt a lot about site structure and about the different tools to help with the development process.

One of the most useful tool was Dreamweaver, which I used as my main environment for building the site. It has many helpful features for development which helped improve the site. I used the template feature to create reusable html elements across the site, which was good for duplicating header / footer elements across all pages. This saved a lot of time that I would have spent just repeating elements. I also used the auto-update links feature to re-order pages/resources so as the site expanded I could easily manage the site structure.

bs dw components thumbnail
Bootstrap Components

I used Dreamweaver’s premade Bootstrap components to help build more complex, responsive html elements e.g. Drop-down navigation bar, Image carousel, Tabbed menu and Modals. I then customised these elements with extra css to fit my overall design. Bootstrap as a whole, was also a very useful tool for handling all the responsive elements of the site. I used the responsive grid system to organise my site and added Bootstrap classes throughout.

db search code
Django Server – DB Search

One of the more unique features of Meteor Music is that the site has a custom search feature, that I built from the ground up. The search feature allows users to send a search request to a database and then receive the results in a table (that is dynamically generated, depending on the data). The search feature itself is actually hosted on a Django server, while the main MM files live on a sub domain of s–mckwebdesign. This was a result of initially building Meteor Music on a free Django server. Then once the site had expanded and my skills had improved, I ended up migrating the webpages to a paid server. Consequently I had to rewrite some code to enable the search box the continue to function.

How the search function works (searching the DB):

  • – When a user types in the search box on MM, a query string is attached to a request and then sent to the Django server.
  • – The Django server responds to the request by running custom python code, which uses the user’s search terms to query a database with sql.
  • – The Django server then runs more custom python scripts to parse the data and then replies to the original MM server, with the results formatted as a .json file.
db render
MM Server – Decoding Results

How the search function works (decoding results):

  • – On the MM server, the .json is decoded into two objects by php scripts. One object for use with javascript and one for php.
  • – The php object is read by more php code, which renders the result in the ‘Other’ section on the web page.
  • -The javascript object is rendered as data in the web page and is processed later, on the client side. (The reason for doing this, was for more control over DOM manipulation while building the responsive table. e.g. custom html IDs, nested items and dynamic links.)
js db render
Client Side – Rendering Final Data

How the search function works (rendering final data):

  • – On the client side, the javascript object is read by custom js scripts. These render out the main dynamic table. Depending on the result, a different number of rows are rendered inside a html table; with added nested elements and unique urls (generated from the artist and album title).
  • – Finally JQuery scripts are run to create a sticky nav bar for the table and to add dynamic scroll animations to the each of the buttons. (Scroll positions for these animations are generated depending on the number/location of each row).

Animations / Effects

  • -Link hover effects
  • -Sticky top nav
  • -Image hover effects
  • -Smooth Scroll
  • Bootstrap Components:
  • -Top navigation
  • -Carousel
  • -Modal
  • -Tabbed navigation
  • W3schools Components:
  • -Image grid

Resources