Using hype scenes as assets for "traditional" web site creation

Exporting & Previewing
#1

I have this website that I did entirely with Hype:

But I have been looking for a way to create future websites along with a web developers since building websites alone is extremely slow and addressing customer feedback is a bit of a pain specially for responsive layouts and things like opening on “new tab” and going back the previous page/scene is quite problematic when the site is entirely done with Hype.

But Im looking to keep the site design and experience and animated and interactive as possible, and that’s a thing people have liked of previous web sites I have done:


http://heuristic.center

The thing is, how can I deliver to a web developer Hype assets, animations and scenes in a way he can re-build the site using more traditional and standard methods?

I have been experimenting with the idea of using scenes and “layers”, but I haven’t successfully find how actually do this:

I have seen many using iframes to add hype content to their websites, but I believe iframes have a bad time trying to interact with content outside the iframe itself.

#2

The sites look great!

Unfortunately I’m not sure there’s a particular rule of thumb, since a lot of it is up to the site technologies used and where you want to draw the line between Hype exports being production vs. prototype.

Because Hype exports in a data format and not structured HTML, Hype documents are only meant to be edited in Hype itself. In this regard a general flow is to think of highly animated/interactive areas as a single box on the screen and you can deliver that portion, with the outside shell of the page being HTML made by a developer. But this is just one approach; others may have different ideas from experience.

An iframe isn’t strictly necessary; you can embed via a div. This makes javascript communication dramatically easier. In the exported .html you can just copy and paste the *_hype_container div code that looks like:

	<!-- copy these lines to your document: -->

	<div id="index_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:600px;height:400px;overflow:hidden;">
		<script type="text/javascript" charset="utf-8" src="index.hyperesources/index_hype_generated_script.js?66445"></script>
	</div>

	<!-- end copy -->
1 Like