Tumult Hype for Mobile Browsers

Without any effort on your part, Tumult Hype animations work on mobile browsers like Mobile Safari and Android. That being said, there are still a few tricks you can do to make your site more mobile-friendly. This article covers these topics:

Fitting your document to the width of devices
Removing the Mobile Safari user interface (URL & navigation bar)
Adding home screen icons and a loading screen, also known as a ‘Startup Image’ (iOS only)
Detecting swipes and changing scenes using Zepto
Showing a different site based on the orientation of the device (Landscape & Portrait). Also: keeping the current scene in sync between those two orientations using the Tumult Hype javascript API.

For a quick preview of the sort of mobile web app you can make with Hype, please visit the Diesel Punk Industries Movie Player with an iOS device (preferably an iPad). You can add this web app to your home screen.

For some excellent reading on best practices for mobile web development and design, please visit http://mobilewebbestpractices.com/.

Before we get started: Many of the following modifications must be done in your exported .html document. To do any of these adjustments, you’ll need an HTML editor. Here's a few HTML editors we recommend.

General sizing guidelines

When setting up your document size, it’s important to run tests on the various devices you’re targeting. It's always a good idea to test your document on the physical device to ensure that text is readable. We’ve added a number of template sizes in the ‘Document Inspector’ to help you get started (pictured on right).

Reducing your file size to the absolute minimum is also essential, especially considering the low bandwidth of some mobile devices. For tips on how to create a fast-loading Hype Document, please read: "Decreasing load times: Speeding up large Tumult Hype Documents."

You can also redirect your users to a mobile optimized page if they are accessing your site from a mobile browser.

Make your site fit the width of the device, and notify the device that the content is "Mobile Friendly"

When you load a document, mobile browsers generally do a good job of showing the full page. By default, exported Tumult Hype .html documents won't bleed over the edges of mobile browsers because Tumult Hype adds:

<meta name="viewport" content="user-scalable=yes, width=600" />

… to each exported .html file. This method is fine if your document is 600 pixels wide and you want to allow zooming into the document, but if you would prefer to keep your document at the same zoom level no matter what, and your document is larger or smaller than your Tumult Hype element, you’ll need this code:

If you want to allow zooming, you would use this (don't declare 'user-scalable'):

	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>  

Note: This code must be added between <head>...</head>. For more information, read Apple's docs on "Viewport Settings for Web Applications".

Adding home screen icons and a loading screen, also known as a ‘Startup Image’ graphics

If you wish to create a website that can be ‘Added to the Home Screen’ when viewing it in Mobile Safari and behaves more like a normal iOS app, here’s what to do:

First, create icons that appear when the app is added to the home screen:

<link rel="apple-touch-icon" href="apple-touch-icon-57x57.png" >
	<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png" >
	<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png" >

Next, create graphics to show when launching the site:

For quicker image generation, check out this template. Each of the .png images referenced in this code are icons shown when your users click ‘Add to Home Screen’ in Safari. Touch-icon 57x57, 72x72, and 114x114 are the icons that appear in the user’s springboard. The “startup images” are shown when relaunching the app, and disappear after the page is loaded. For more information on this, read this article in Apple's documentation: "Custom Icon and Image Creation Guidelines."

Detecting Swipes

A swipe event on a mobile device is essentially a touch event that begins at one point, and concludes at another point. To recognize this type of touch event, we'll need to add the Zepto library to the <head>...</head> area of our document. First, download Zepto, and add the following javascript references:

<script src="zepto.js"></script>
<script src="event.js"></script> 
<script src="touch.js"></script>

For this example, our document name is 'swipedemo'. You'll need to replace the code below with the name of your document. (Make sure you copy the name exactly -- it's case sensitive). The code we're adding changes to the next scene when you swipe from right to left, and switches to the previous scene when swiping from left to right. The transition used is 'Push' for both gestures. This code should be added within the <head>... </head> tag:

<script>
	    $('body').bind('touchmove', function(e){ e.preventDefault() }) 
	$('#swipedemo_hype_container') 
	// when you swipe left, show next scene   
	.swipeLeft(function(){ 
	HYPE.documents['swipedemo'].showNextScene(HYPE.documents['swipedemo'].kSceneTransitionPushRightToLeft); 
	      }) 
	// when you swipe right, show previous scene 
	.swipeRight(function(){ 
	HYPE.documents['swipedemo'].showPreviousScene(HYPE.documents['swipedemo'].kSceneTransitionPushLeftToRight); 
	      }) 
	      }) 
        </script>

For more information about where this code comes from, please read the documentation for the Tumult Hype javascript api documentation or the Zepto documentation. You can see this example in the 'iOS kit' zip file attached to the bottom of this document.

Hide the Mobile Safari interface when the app is launched

Adding the following code is great for maximizing the real estate of your web app. From Apple's documentation: "On iOS, as part of optimizing your web application, have it use the standalone mode to look more like a native application. When you use this standalone mode, Safari is not used to display the web content—specifically, there is no browser URL text field at the top of the screen or button bar at the bottom of the screen. Only a status bar appears at the top of the screen." To enable this, add the following code between <head>...</head>:

 <meta name="apple-mobile-web-app-capable" content="yes" >

The default color of the status bar at the top of iOS devices is gray. If your site would look better with a black status bar, then also include the following code:

<meta name="apple-mobile-web-app-status-bar-style" content="black" >

Scrolling down after page load

On iPhones, you can effectively jump past the URL & navigation bar by forcing the screen to scroll slightly down. This only works if your page is actually longer than the viewport of an iPhone. To do this, replace the code <body> (at the top of the page) with this:

<body onload="window.top.scrollTo(0,1);">

Detecting portrait or landscape orientation

Let’s say you have a Hype document that looks great in Landscape mode, but not so good portrait mode. If you create two documents for those two rotations, you can use CSS to show only one depending on the rotation. For this example, let’s say your Portrait document is called ‘Portrait’ and your landscape document is called ‘Landscape’. All we have to do is hide the Portrait when we’re turned to landscape, and hide Landscape when we’re turned to Portrait. You'll need to add these styles to your <style> area in your exported html file:

<style type="text/css">
  body {
    background-color: #FFFFFF;
    margin: 0px;
  }
  @media screen and (orientation:portrait)
  {
    #portrait_hype_container {
      display: block;}
    #landscape_hype_container {
      display: none;}}
  @media screen and (orientation:landscape)
  {
    #portrait_hype_container {
      display: none;}
    #landscape_hype_container {
      display: block;}}
</style>

Note: The preceding CSS will not work in IE8 and below. We recommend that you include this 'media queries' script in your document. If you are using a max/min width CSS style instead, you may be interested in 'respond.js'. Either script you choose should be added between <head>...</head> You can download this example and the script at the bottom of this page.

When you are creating these two files, make sure you create them from scratch. Don't create one, duplicate it, then edit it for use as the other orientation. You should create a document, and copy and paste shared elements between portrait and landscape versions.

The previous example is great for single page sites, but what if you have multiple scenes? We’re going to need to keep track of what scene you’re on so both the Portrait and Landscape version of the site are in synch. The file named 'RotationAndSceneDetection…' at the bottom of this page does just that. That example advances to the selected scene in both Portrait and Landscape versions by triggering events in Tumult Hype Javascript API. You can pair this functionality with the 'swipe' gestures mentioned earlier in this article for a very native-feeling web app.

Building a truly “Offline” app with a Tumult Hype document

...For sale in the app store

For a tutorial on working with Hype within iOS apps (via Xcode) read this excellent tutorial by Gordon Johnston. The most streamlined method to create something with Tumult Hype for sale in an app store is to load your Hype animation into an additional Framework like Phonegap and Appcelerator -- powerful and free applications that allow you to package a full blown app from a Tumult Hype document.

If you're hoping to make an ebook, please check out the Baker framework.

Aerei di Carta, which contains a series of video tutorials for creating a variety of paper airplanes, is a recent example of an app created with Hype for sale in the App store. Roberto Davide Gambuti used only Phonegap & Tumult Hype.

...To add to your home screen

If you want your app’s assets (images, javascript, and other files) to be downloaded on the device for faster second load times, you’ll want to create a file called cache.manifest. For more info, read our article on application cache.

Example Files

At the bottom of this article you'll find a number of linked example files:

"iOS kit.zip" contains a demo of swipe gestures (index-swipe-gesture.html), 'apple touch icons', and orientation-specific CSS.
"Rotation Example.zip" demos an iPad web app where either the 'Portrait' or 'Landscape' Tumult Hype documents are shown.
"RotationAndSceneDetectionExample.zip" demos an iPad app where the Landscape and Portrait document scenes are on the same scene.
"Apple-touch-images.zip" contains a series of images that iOS web apps use.

Other tips

For a visual reference to interfaces in the latest iPhone 4s, check out this PSD at 365psd.com
Remove the ‘tap’ color when tapping a link in iOS by adding the following CSS between <style>...</style> - a {-webkit-tap-highlight-color: rgba(0,0,0,0); }
You can read more about building Web Applications here.

Tumult Hype Forums

Support Center

Tips for making your Tumult Hype production Mobile Friendly (iOS & more)