All Collections
Using Studio
Mobility Simulation Tips and Tricks
Mobility Simulation Tips and Tricks
Jamie Gutierrez avatar
Written by Jamie Gutierrez
Updated over a week ago

Applies To


This article applies to all versions of iRise Studio

Summary


This article provides several useful tips for creating mobility simulations. It is not intended to be a definitive list, but rather a solid starting point to help you get the most from your simulations.

Building For A Desktop Browser

There are certain things to keep in mind when building a simulation that will be viewed on a desktop web browser.

The hardware frame should typically be included, however make sure that it will fit in a full screen browser page without scrolling (for projecting, targeting a desktop resolution of 1024x768 is a good idea).

Check the iRise Mobile Templates or http://images.google.com for device frames.

Use of Flash in your simulation is OK, but ensure that your target audience has this installed on their desktop.

Scroll bars should be hidden – this can be achieved by increasing the width of the scrolling section so that the scroll bar is outside the boundaries of the hardware frame.

Ctrl – and Ctrl + are helpful web browser shortcuts that increase or decrease the size of everything in the browser. This allows you to zoom out if a simulation does not easily fit in a lower resolution screen. This may not be fully effective in different simulations and browsers.

Building For A Mobile Browser

Here are some things to keep in mind when building a simulation that will be viewed on a mobile web browser. Also included are a couple of tricks to enhance the experience.

The hardware frame should be omitted and the simulation should be built to the device default. Check http://cartoonized.net/cellphone-screen-resolution.php for device screen resolutions. For iOS simulations, you may want to make the simulations 10 pixels smaller vertically to account for the time/status bar at appears at the top of the screen

You don’t need to add in the items that the mobile OS will add in automatically (scrolling list picker, software keyboard, etc).

The app should follow the Human Interface Guidelines (HIG) for the given mobile device that it’s targeting.

iOS - Human Interface Guidelines

Android - Human Interface Guidelines

How to create an icon on the home screen of your iOS device to launch a simulation

  1. Open the simulation on the Definition Center from a web browser

  2. From the top right toolbar, choose File > Link to this page

  3. In the dialog, choose 'Exclude Toolbars', then 'Send to email'

  4. Email the link to the device

  5. Open the link in Safari on the device

  6. Tap the icon to the left of address bar in Safari and choose 'Add to Home Screen'


Setting up Side Scrolling Content (an area that allows swipe left and right for browsing)

  1. Build to full size, then reduce to proper size, set scrolling to Auto and set ‘clip-overflow’ property and place master on main page

  2. Allows for smooth scrolling on device

  3. Place scrolling master on page then place layer on top of master to simulate a native application

  4. Native buttons will stay put and allow page master on the bottom layer to scroll behind

Building For Both A Desktop And Mobile Browser

One simulation can target multiple platforms. Create scenarios for each platform and combine them in a single simulation if desired. An agnostic simulation start screen can provide a choice of platform which guides a user to the appropriate scenario

How To View A Simulation On A Mobile Device

Currently there are no apps for offline simulation access on mobile devices. To view a simulation on a device, that simulation must exist on a Definition Center. Follow the link for that simulation in the web browser.

iOS
Use the new iRise app on an iPad, iPhone or iPod Touch

Android
Use the device’s standard browser

Blackberry
Use WiFi Browser or Blackberry Browser (WiFi Browser preferred)

Once the simulation is open in the browser window you can hide the iRise toolbars at the top and bottom of the screen the same way you would on a desktop browser (by selecting the bottom edge of the top toolbar)

Did this answer your question?