Researching HTML5 to use as a platform builder

Today I am researching HTML5 and how it might be used to build a platform on the web for What Love Sounded Like. 

The main reason behind putting What Love Sounded Like on the web is to utilise a interactive platform that can expand the story further. Assets such as additional photographs and background information relating to the characters in the film which can give the audience/users a richer experience and highlight the documentary elements in the film.

Short film and possible assets

The above diagram shows the 4 components making up one episode of What Love Sounded Like. A short film has a beginning middle and end. An interactive platform brings new elements to story telling and raises questions as well as possibilities.

Questions like;

• will a story begin straight away or does the site require interaction to start

• how will the audience choose which episode

• can they click ahead to another story or other additional material

• how will I monitor and test audience participation to make sure my story architecture and structure is working at its best

possible website flow chart

After a story has finished playing or the film has been skipped a submenu appears. Below are two examples of how they might look. The audience is asked if they would like to know more about the author of the recording. In the case of 'Just The Two Of Us' the author is 'unknown' and in 'Please Hold The Line' the author is 'Howard'. The red arrows indicate how parts of the image will be animated.

possible sub-menu for Just The Two Of Us

possible sub-menu for Please Hold The Line

So now I have the basic asset ideas and structure. Which platform builder should I use? I have little experience of website building and no code writing knowledge so I will need a program that does all that for you. Website editors often have a WYSIWYG (What You See Is What You Get) function which is important to see what you are doing as you build. Which brings me to Hype. I am interested in Hype as it a WYSIWYG application that allows users to program events to occur in sequence or after user actions like mouse clicks and doesn't require code knowledge.

Here are some pros and cons:

Pros

• HTML5 by default
• Timeline features to animate the page
• browser checking support with problems highlighted when chosen
• no coding required
• user friendly
• affordable
• technical support from St Joost (Michel knows how to use it)
• free trial

Cons

• HTML is not 100% valid in all cases (although Hype website says it supports most devices) 
• No upload
• No forms, tables, or e-commerce
• no text editing

At this stage I think the pros out way the cons for Hype. First of all because I dont need to know code and I have experimented with the program and it seems something I could work with. I think HTML5 interactive abilities out weigh the fact that is not 100% used across all devices as it is more valid then Flash for example. I dont need ecommerce and while I first thought I would like to invite the audience to upload their found audio I think this could potentially become too much for me to manage on my own over the life of the project. The no text editing function is not ideal as I want to have a subtitle option however I think there might be another way to include text in the actual video as a work around for this. The user could also have the choice of turning the sub-titles off if I load a video asset with no text embedded.

Another no-code WYSIWYG web editor I am considering is Website painter. 

Pros

• clear instructions
• affordable
• drag and drop building
• supports e-commerce
• free trial

Cons

• traditional menu layout

The main con for me is the traditional menu layout. I am not sure I will be able to create the design I want by using this program but I will download a trail to experiment with.

Another no-code WYSIWYG web editor to look at is Freeway express.

Pros

• drag and drop building
• supports comments
• track visits with google analytics
• supports
• e-commerce
• free trial

Cons

• express doesn't support HMTL5 and full version is 3 times the price of Hype and Website painter.
• traditional menu layout (but may be more flexible compared to Website painter)

While there are a lot of website editors  to try it can take a lot of hours to work out the best one for what I am trying to do and I dont want to waste time trying programs that will not do the best job in the end or take too much time for me to learn. I think another meeting with an experienced user like Michel at St Joost will help me decide on the best no-code web editor now I have the assets and basic structure to work with.