New landing page...
Monday, April 27, 2009 at 1:05PM 
As you may know, I was fortunate enough to get a link back from the Apple website to ScreenCastsOnline, more specifically from the iLife and iWork resources page - original post
In view of this, I cobbled together a special landing page that both aggregated all the specific ScreenCastsOnline tutorials dealing with iLife and iWork, and also gave me a place to measure the traffic coming across from this prestigious site.
Although functional, I wasn't altogether happy with the landing page as I wanted something more professional and informative for new people coming over from the Apple site, after all, first impressions count.
So I decided to hold a competition over at 99Designs, to see if someone could come up with a new design for the landing page. The brief was very simple in that it needed to be a single page framed with the ScreenCastsOnline theme to match the rest of the site. At this point, I was really just looking for ideas I have to admit, so the contest did not include the coding behind the page, just the design. Out of 14 entries, the winner was Jamie Peak, who by chance, also lives in the North of England - small world!
Jamie put together a great design based on boxes and tabs that really gave a professional look and feel to the landing page and after a few iterations, I was happy to award the prize to him.
The next point was how to put the page together.
My main ScreenCastsOnline site is built using Rapidweaver and my original plan was to use the Blocks plugin from YourHead software to create the page. This is a great plugin for building graphical pages. However, Jamies design included a box with multiple tabs which allowed you selectively view the tutorials based on the package in the tab.
I couldn't really see how to implement this in Blocks.
Luckily, as well as being a talented designer, Jamie is also a coder and was happy to quote me for creating the page from scratch in HTML and Javascript. We agreed a price and a couple of days later, Jamie delivered the code. I was then able to take the custom Javascript and CSS and include it into a Rapidweaver HTML page. It took a bit of head scratching but it worked!
There is another section at the footer of the page which I've not included as of yet, but I will when I get a minute.
One of the elements I wanted in the landing page was the inclusion of a "Welcome" video that would allow me to explain exactly what ScreenCastsOnline was all about. It took me a while to get round to this but it's now finished. This is something I need to do more and will create more of these types of videos on other pages.
The last step was to publish the final page but before then, I published it to my test website and set out a tweet to see if I could get any feedback. Wow! I must have received 30 or 40 tweets back, the majority extremely positive, some pointing out some typos, a comment on the volume of the backing music on the video, a missing link and some other comments too. Absolutely invaluable and yet another example of the power of twitter.
Well I fixed all the issues and I'm delighted to say the the new landing page is up and running on the main ScreenCastsOnline website:
http://www.screencastsonline.com/apple/tutorials.html
I love the new look and it's given me some ideas on some other changes I'd like to do to the site to make it easier to use and more attractive.
Thanks Jamie!
Reader Comments (8)
Page looks great. Hope you start to get some new subscriptions from the Apple website links. Well done!
You are my hero./
Well Don what can I say other than it looks great. It's reassuring to also know that you don't always know the answers and aren't afraid to ask for help, albeit in your own creative way.
Just shout when you want to record some of those testimonial videos.
Thanks Guys!
Hmm.... testimonial videos....
Looks awesome. The layout looks like the TabLoom add-on from Yabdab software. It's given me some ideas for my own site.
Jamie did a nice job and the result is well integrated to your site.
:-)
Awesome story thanks for sharing!
I'd love to conduct a short interview with you over skype if you are interested.
Cheers,
Jason Aiken
99designs.com
No problem Jason, drop me an email at screencastsonline@gmail.com