Will not load on iPhone or iPad

[philmayor2 (Phil)]

I have built quite a large site http://test.elearninglaboratory.co.uk/Employability/index.html

Which does not preload anything, on the iPad it will load fine first time and then has issues when reloading or revisiting.

On an iPhone 5S I cannot get the site to load at all gives me a problem waring a few times and then times out.

Any ideas why it isn’t loading?

Thanks

[jonathan (Jonathan Deutsch)]

The employability_hype_generated_script.js is weighing in at a whopping 37.3 MB! This file contains animation and scene data, but is is generally much smaller since it is just textual information. Before doing anything else, the web browser needs to download and interpret all this, which is a lot. The phone/ipad is likely running out of memory and crashing. Is there anything you know of that might have added this bloat? I’d be curious to see a zip of your .hype document to give recommendations on what to do to reduce the size.

[philmayor2 (Phil)]

Thanks Jonathan, I don’t have that many animations but there are lots of scenes, there are over 100 scenes and 4 layouts in each. There is also a reasonable amount of javascript to unload audio and videos.

Dropbox - Link not found

I really appreciate any help you can give.

[jonathan (Jonathan Deutsch)]

100 scenes with 4 layouts each is definitely pushing things to the limits (and quite impressive!). I'm pretty sorry to say that the amount of data included is simply too much for browsers to cope with on one page. My best advice is to split your document up to one page per scene. Hype Pro has a feature in the Advanced Export panel where this can be automated, but currently the "jump to scene" linkages aren't replaced with Go To URL actions that would be required (though I'd love to add this feature for cases like this). It might require a lot of manual work to trim this down.

We did put together an article that might provide some guidance:

Decreasing load times and optimizing performance: Preparing a Large project in Hype

Tumult Hype is built for producing animations as a part of other websites, but we have also seen projects that take the form of entire websites. While building and launching large Tumult Hype projects with many scenes is possible, there are a few things you should keep in mind to ensure that your website loads quickly, works well on mobile devices, and is easy to maintain: Defer loading of images Images added to your document will need to be downloaded when your visitor first visits your site, …

Sorry there's not a faster solution to the loading woes; I know a lot of work went into this document.

[ouch_stop]

@jonathan

100 scenes with 4 layouts each is definitely pushing things to the limits (and quite impressive!).

Hi Jonathan, I just caught this note and had a large Gulp reaction since a site I'm working on will have about the same. I'm beginning to wonder about a blank template which can dynamically load texts and images as being better to organize this, such that my, say, 100 product buttons all call the same template file but 100 different text files. Would you recommend this approach?

Thanks!

[sandor]

Hey Guys,

just for your info: I am dealing now here with some presentations each with 40-60 scenes, a LOT of (small) animations, small js scripts, symbols, external JS libraries and TONS of video files and images. The filesize of my hype_generated_script.js are all around 6-800KB … The overall project size is varying and is between 50-150MB - depending on the videos that we used… The HTML output is running (far as I can tell till now) cool and smoothly on iPAD retina and iPAD Pro (locally in a cordova wrapper) and viewed online in Safari. Also cool on OSX etc.

I just want want to share here my experience in MY user case with fat&huge scenes in Hype…

@jonathan – have to say that Hype is really kickass – I would not have expected to get so less problems with this kamikaze project

[jonathan (Jonathan Deutsch)]

@ouch_stop

I'm beginning to wonder about a blank template which can dynamically load texts and images as being better to organize this, such that my, say, 100 product buttons all call the same template file but 100 different text files. Would you recommend this approach?

In your case I would recommend this approach; it would be akin to using Hype as Interface Builder .

Due to the scripting complexity I'm not sure I'd canonically say this is the best way for everyone - though part of a better recommendation I think would be adding features potentially to symbols such as slots and per-instance overrides.

@sandor

@jonathan – have to say that Hype is really kickass – I would not have expected to get so less problems with this kamikaze project

That's great to hear , thanks! There's definitely ways I'd like to improve Hype both from a UI standpoint to working with larger documents and also techniques to reduce filesize/load times. The good news is that iPads continue to get more powerful, so Apple does some of the work for us!