The HTML5 export function allows you to produce material which can be displayed on a wide range of mobile devices including Android smartphones, Apple iPads and iPhones as well as tablets and desktops. However, there are a number of difference in the way these devices work which have to be considered when designing your application.
Note about Automatic Playback of Audio and Video
At the current time several browsers, including Chrome, actively prevent audio and video being played automatically when on mobile devices. This is to prevent extensive data usage without the user’s permission. This means audio and video can only be started by user interaction and will not play via timelines or On Show triggers. The limitation does not apply to HTML5 installed as Android apps using the APK packager.
This is currently under review buy Google and others so please check our website for further updates or follow the technical discussions on Chrome development online.
Mobile devices, especially smartphones, have different screen sizes and even very different screen proportions depending on the model and the operating system. In addition they are very different to desktop screen sizes. Smartphones are often used in an upright/portrait orientation – making the optimal page size tall and thin, whilst tablets are usually landscape which requires a page which is wider than it is tall.
There are details of different screen resolutions on the internet and we have included some of the more popular ones as presets in the Chapter Properties. Where possible we have allowed for system status bars and such like which the device will display automatically. Therefore our presets may be slightly different to published screen sizes.
Obviously this does not matter if you are happy for your content to be scrolled but is important if you want a full page application.
The HTML5 output from Opus automatically includes code to check the device screen size and set the publication to suit the device. However, the default setting for Opus publications is to display your publication at it’s original size on any screen, so you will to need to use the options in Chapter Properties to set the material to be resizable.
If you want the complete page to be displayed full screen then you will want to set both vertical and horizontal resizing to be possible but do not set a Maximum Width or Maximum Height. You switch off the maximum height and width settings by clicking the checkbox alongside each so they are off. This is probably the preferred option for games or slideshows or any other content where you want everything to be seen at once.
If you want the publication to simply use all the available width of the device then you can just set the horizontal resizing to be on and don’t set a Maximum Width. Unless you turn the Aspect Ratio option off (not recommended) the content will be scaled to fit the width of the screen and if the page is then taller than the screen scrollbars will appear for the user to scroll down the content. This would be the best option for websites.
If you want your publication to stretch to fit any screen size you simply do not set a maximum width or a maximum height. Click the checkbox alongside each to turn the option off (do not set the values to 0).
We recommend that you always set a minimum value for both width and height and if this is inside the minimum width for mobile devices you can be sure the material will always be viewed in the best way possible.
We also recommend that you use an exact multiple or fraction of your original page size to set the maximum and minimum values.
In both cases we recommend you keep the Maintain Aspect Ratio on to avoid the content being stretched out of shape.
Remember that you can set the background of any blank screen outside your page to a particular colour. This is called the Surround Colour and is provided on the Options tab of the Publication Properties. You can also set an image to the background of the page if you prefer though you should consider the impact on the download time.
A combination of these options should ensure you can display your publication in a usable and effective way on a wide variety of devices without the need for complicated grids and repositioning.
Most mobile devices are optimised for touch screen input and for the user to touch and drag material around the screen. In Opus content you will usually want the touch to act as a left-mouse trigger to allow interaction in your publication.
To ensure your left-mouse trigger is not overridden by the scrolling action Opus includes an option on the General tab for each object which allows you to set the Wants Touch Input if this is on your object will get priority for the touch input.
Buttons should automatically recognised as requiring touch input but other objects may need this option to be set explicitly.
Opus is not currentlydesigned to facilitate multi-touch commands but we hope to add this functionality in a later release.
Text input boxes should be automatically recognised as requiring text input and a system keyboard will appear.
It is worth bearing in mind that even top-end smartphones don’t have the same graphical power as desktop machines or tablets and so animations may run more slowly. Try to avoid having too much going on at once.
Remember that your content is HTML5 and not a compiled application, so there will be limitations. Opus Pro is not intended to recreate Need for SpeedÔ on a smartphone.
Phones often have a default browser installed which connects to promotional services from the network or provider. These can run Opus output much more slowly than commercial browsers such as Chrome so you should recommend Chrome or Firefox or similar when running Opus content, including those packaged as APK files.