The Diary of a Dancer
Some of the best (and worst) websites are the ones which venture into unknown territory and try to make themselves stand out with a unique design. Wade Dooley wanted this to be true of the website for his musical, The Diary of a Dancer. What better way to enrich the user experience than to immerse him right into the content? Unfortunately, the original designer wasn't able to finish the job as the client had hoped (oops) so Secret Innovations picked it up asked me to carry this project through to the end. The mission: take the atypical website design and develop a Wordpress theme.
What made this project especially challenging were the limits of the "photo album" layout. Specifically, what happens when there is too much content to fit onto the page? Originally, I tried just having it spill off the album and look like a really long sheet of paper hanging off the bottom. While readable, it certainly wasn't natural. I don't know about you, but my photo albums don't have three feet of paper sticking out of the bottom (then again, my photo albums also don't exist in physical form). The next option was to specify a content area within the album that would scroll when the content got too long. Better than the long paper, except that scrollbars are ugly. As much as I like the design of Mac OS, its space age blue scrollbar does not match my vintage red and brown. Plus, there's no way in CSS to style a scrollbar. So, I did what I do best: build a new solution. In this case, I built a new scrollbar thanks to the help of jScrollPane. Works beautifully in all current browsers and will just switch back to the default scrollbar if for some reason a browser doesn't support it.
The rest of the project was a pretty standard job, complicated slightly by an unusual layout. The final website features multiple page designs in WordPress (selectable in the administrative backend on each page) along with plugins to handle video and pictures. Mission accomplished! Check out the site at http://www.thediaryofadancer.com/.
