Studio K40

Beloved Festival 2011

Elliot Rasenik, the head promoter behind the Beloved festival came to me for technical assistance and redevelopment of his website. Though he had a beautiful site designed and implemented by the talented Stevee Postman, the website code was quite frankly a bit of a mess because it was built mainly out of Photoshop slices with some rudimentary Dreamweaver image replace effects. It was difficult to update, and behaved somewhat erratically.  My objective was to redevelop the website so that it provided a smoother experience for the festival goer and was easier to manage by festival staff. This also set the stage to make it easier to “re-skin” for the 2012 year, as long as most of the section dimensions stay the same.

I did so by:

1. Converting all the html pages into php pages which call php files to insert sitewide consistent content , such as the the header, navigation bars, left-hand sidebar, & footer.
2. Where previously, image hover effects were created with clumsy javascript code and multiple images, this was redeveloped to take advantage of sprites with the branded typography to be generated by cufon.
3. Most of the website pages consist of a great quantity of information about the event, such as on http://2011.belovedfestival.com/info-guide.php. For a better user experience list page information was organized into sections that toggle open or closed when the header for that paragraph is clicked upon.  On some pages such as http://Belovedfestival.com/connect-contact.php, it made more sense to create an accordion system where only one section can be open at a time.
4. A JavaScript slideshow was created in the footer in order to display more logos of the sponsors of the event.
5. A JavaScript slideshow was created on the homepage, which currently shows selections from past years event, but will soon be updated so that it features performers and artists for the current year’s festival.
6. An advanced slideshow and photo gallery was developed which is easy to navigate for the user, and easy to update by my client with a drag-and-drop backend. When displayed on mobile browsers, the flash photogallery gets converted into a JavaScript-based one so that the site remains usable on any system.
7. A “breadcrumb” system was created so that 1 of 4 Sub navigation areas are displayed and the current page is designated through a css system.
8. All page titles were recoded so that they are plain editable text, which is later styled via cufon and CSS.
9. All broken links were fixed.
10. A sitemap was created to help google index the site, as well as a 404 error page.