Redirecting your Mobile Visitors to a different page or scene


#1

It’s important to provide your visitors with a site that looks good on small screens and desktop browsers.

Tumult Hype 3 Professional introduces Responsive Layouts that gives you the power to create different layouts for different screens.

Flexible Layouts, a feature for scaling and pinning elements to fit in the available width of your document, is another tool in the responsive designer’s arsenal. Learn more about that feature here: http://tumult.com/hype/documentation/3.0/#flexible-layout

Using the two features above, you might not need redirection. If you want to handle redirection yourself, the tutorial here is what you’re looking for. This article explains how to redirect your visitors accessing your site from a mobile device such as an iPhone or an Android device to a page built for them or to a different scene optimized for them.

Switching to a Mobile-Optimized Scene

A mobile-optimized scene (especially for targeting phones) should not require any Mouse Over or Mouse Out actions, and should have larger interface elements. By default, Tumult Hype loads the first scene when opening a document. It’s a good idea to test your ‘mobile’ scene on a mobile device to see how it looks and feels.

To detect a mobile device when your Tumult Hype document is first opened, we’ll be creating an ‘on scene load’ action for the first scene that runs this JavaScript:

if (screen.width <= 699) {
    hypeDocument.showSceneNamed('MobilePhone', hypeDocument.kSceneTransitionCrossfade);
    window.scrollTo(0,1);   
} else {
    hypeDocument.showSceneNamed('Desktop', hypeDocument.kSceneTransitionCrossfade);
};

This example code switches to either the MobilePhone scene or the Desktop scene using the crossfade transition depending on the screen width of the device. Note: The code ‘window.scrollTo(0,1);’ is not required and scrolls down the page slightly to hide the URL bar when the scene is loaded.

You can also redirect mobile device users to a separate HTML file by using the following script (this script targets iPhones, iPods, and devices with screens under 699 pixels:

<script type="text/javascript">
if ((navigator.userAgent.indexOf('iPhone') != -1) ||
        (navigator.userAgent.indexOf('iPod') != -1) ||
        (screen.width <= 699)) {
        window.location = "http://site.com/mobile.html"; 
        }
        else { 
        //  Do nothing.
        }
</script>

The code above needs to be added in the ‘Head’ of your Tumult Hype document. You can edit the contents of the <head>…</head> of your exported .html file by clicking on ‘Edit HTML Head’ in the Document Inspector. It should be included in the first document that your users view (typically the ‘Desktop’-targeted version). Please note that the full URL should be included for this script to work. The document http://site.com/mobile.html can represent either an additional Tumult Hype document, or an HTML page you control.

Redirecting to a different document

This technique uses a short snippet of Javascript and takes about 2 minutes to complete.

First, make sure that you export an additional version of your document and host it on the web. We’ll be redirecting mobile visitors to your mobile version, and doing nothing if they are on desktop browsers (or tablets).
To add the Javascript snippet, we’re going to need to edit the exported .html file that you’ve made for your website visitors on desktop browsers. You will need an HTML editor.

  1. Export your mobile version of your Tumult Hype document to your web host and write down the URL of that page. You’ll need it later. When exporting, make sure you have ‘Also save .html file’ checked.
  2. Export your desktop version of your Tumult Hype document to your desktop and edit your exported .html file in an HTML editor.
  3. Copy the text from this page, and paste it after the <body> tag in your desktop-targeted Hype .html file.
  4. Next, replace the site at the end of this code (http://mobilewebsite.com/mobile.html) with the URL of the mobile-specific document you already uploaded to your server.
  5. Export your document to your web host. Mobile visitors will now be taken to your mobile version when they visit this document.

Note: If you need ever re-export your Desktop version of your site, make sure you uncheck ‘Also save .html file’ so your modifications are not lost.

The code for the script above was generated by http://detectmobilebrowsers.com/. This script looks for the user agents of mobile devices and redirects only those to a specific page.

Here are example files: redirect-demo.zip (61.4 KB)

Redirect Certain Browsers

Another method to redirect your visitors is to detect the width of their devices. Since most mobile devices are less than 700px wide, we can use the following script to detect and redirect them. This code needs to be placed in the <head>…</head> area of your initially-loaded document. You can edit the contents of the <head>…</head> of your exported .html file by clicking on ‘Edit HTML Head’ in the Document Inspector.

<script type="text/javascript">
if (screen.width <= 699) {
document.location = "http://site.com/mobile.html";
}
</script>

We can also look at the ‘navigator’ string, which is the browser’s reported name. For redirecting just iPhones and iPods, we can use the following navigator strings and the full URL of the document we’d like to redirect to:

<script type="text/javascript">
if (   
    (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
   location.replace("http://site.com/iphone.html");
}
</script>

What about all iOS devices?

<script type="text/javascript">
navigator.userAgent.match(/iPhone|iPad|iPod/i) && (function(){
location.replace("http://site.com/ios.html");
}());
</script>

Photo above by JDhancock.


(Martin C.) #2

Hi Daniel,
I have a question regarding redirections. I’m building a project with, in the first scene, a redirection to another scene for ipad, another one for iphone/pod, another one for android and last one for desktop. The question is: do all the scenes load in the device even if only one scene is displayed ? I’m asking that because doing a test, I’ve noticed on the inspector of the browser that the code for all scenes is present… Is there a way to have only the code of the scene involved in the redirection ?
Thank you and have a nice day


#3

Yes. I would use layouts though if wanting to show different content on different devices.

Unfortunately, no. All scenes are built on load. You could have different documents for different devices and do a check in your output html and serve only the document for that particular device. The logic wouldn’t be handled in Hype but in the HTML document where you want to serve them.