Music Website New Look! (HTML5 & jQuery)

Hello All,

I am excited to say that my music website http://pianoismyfriend.com has been refurbished and gone live! :)



I built the website by myself and it was a really good personal project and it allows me to explore all different kind of tools and technology out there. It surprised me how we can leverage variety of existing services people have to offer without reinventing the wheels these days.

Some technical information about the new PianoIsMyFriend website:
  • LightCMS is used as the hosting and the content management provider. I moved away from WordPress because of the maintenance effort comparison and the different goal that I wanted to achieve. My website should be really simple with minimal plugins. I found it hard keeping up-to-date with WordPress versions and updating my plugins that break after updating my WordPress. 

    With LightCMS I was able to get my website up within a week and focus more into my content and   how it fits together. It provides SEO support as well and the CMS is really easy to use for simple website. The only downside is the pricing - I pay $20/ month at the moment compared to the $5 for WordPress previously.
  • HTML5 with jQuery - that's all I used for my website. With the new HTML5 tags including the audio tag, a few jQuery plugins to provide animation and other functionality, it did not take very long to create compelling and attractive look for my website. I used FancyBox with the idea that my visitor should be able to keep listening to my song on the homepage when traversing to different pages. Those pages are automatically opened inside the FancyBox iframe when opened through the homepage. However when going to specific URL like http://pianoismyfriend.com/albums, you can see that it is not an orphaned page because it still has the header, navigation and footer for SEO purposes.

  • E-Junkie is used for their easy 'digital' e-commerce service. It provides digital download with robust management interface. They give the anchor tags for each product you sell to integrate to your website. (as shown above). LightCMS has not provide support for digital download but I was glad to find other alternative that is easy to use and configure.
  • AddThis is used for integrating social media buttons such as Facebook Like and Tweet button. Again, very easy to use and you can integrate with Google Analytics if you want. I just needed to paste the code from their website and modify the Facebook Open Graph meta tags to set the correct thumbnail and information when someone clicking the Like button.

I hope my experience can help you some time down the track if you intend to build simple websites for yourself or your clients. Keep in mind that LightCMS does not allow you to put custom code in so you cannot do extensive programming in that regards. Workarounds are to host that somewhere else and show it via iframe or put it in sub-domain of your website.

Take care and Enjoy!
Andreas

Post a Comment