Android + Ryuzine

Android presents some interesting issues with using Ryuzine that aren’t present for iOS users regarding which User Interface version is delivered.

On iOS there is only one screen size that matters for phone-size screens (on the iPhone and iPod Touch) and another that matters for tablet-size screens (on the iPad and iPad2).  There are only a couple device-independent-pixel densities to consider and only two sets of pixel sizes.  Android devices come in a lot more screen sizes, multiple densities (which can be set by end users with root access), and the browser also has multiple zoom modes.  All of these factors make it nearly impossible to know exactly how any given Android user will actually experience the Ryuzine web app – and furthermore they may even see the “phone” UI in portrait and “tablet” UI in landscape.

Ryuzine was designed for Android devices based on the most common screens and densities under the assumption the browser zoom factor is set to “medium.”  However this can still cause it to show one UI in portrait and another in landscape.

In order to ensure you see only the “phone” UI in both landscape and portrait in your browser go to Settings>Advanced>Zoom and set it to “Close.”  If you want the “tablet” UI in both orientations you’ll need to set it to “Far.”  This is the only screen setting you can change without requiring root access to the device.

There is also an issue in landscape orientation with some Android and Windows phones with “widescreen” displays where full-bleed background images fail to fully cover the page (leaving an unsightly blank strip down the right-hand side).  This will be remedied in the next release.  UPDATE: You don’t have to wait for the next version, you can fix this in 0.9.2 with an updated thisissue.css file!

Test Drive the Ryuzine Machine Demo

Not sure if Ryuzine Machine is right for you?  If you are using a webKit-based browser like Chrome or Safari or the latest version of Opera you can take it for a test drive right now!

After it has loaded you should already be on the “Editor” tab.  To navigate to the other sections (“Help” and “Simulator”) just click on the tabs across the top of the browser window.  The easiest way to try it out is with the “Sample Magazine” template.

  1. Click the “Load File” button in the upper left of the “Editor”
  2. The Demo dialog is preconfigured, so just click “Load File”
  3. You should see the source file load into the editor

Now you can play around with it.  Try changing some of the text, apply styles from the “My Styles” panel, or take a look at the HTML by switching to code view to really see what’s going on behind the scenes.  When you’re ready then do this:

  1. Click the “Options” button in the upper right of the “Editor”
  2. Select which options you want to use, for example a Custom Default Theme
  3. Click the “Submit” button
  4. Click the “Refresh” button to commit your changes to the document
  5. Click the “WebAppify!” button in the upper right of the “Editor”

It should now slide the source file editor to the left and reveal the Ryuzine file editor windows.  Click on the “Simulator” tab at the top and you should see a simulated phone in landscape mode showing the Sample Magazine.  Try rotating it, switching devices, or creating your own custom device profile.

You can go back to the source editor at any point and change things, including the Output Options (for example to try out another Theme).  Each time you make changes just hit the “WebAppify!” button again to reprocess and simulate the updated version.

When you feel a little more comfortable with the editor you can try using the source editor’s “Template” option to create a custom template on the fly with however many pages you want and select which optional features to include.

Then you should read the “Ryuzine Machine Publisher’s Manual” and Download the PDK to get started on your OWN publications!

Note: Minimum recommended desktop browsers are Safari 5.x, Chrome 14, or Opera 11.5x.  Minimum recommended mobile browsers are Mobile Safari in iOS 4.3, Browser or Dolphin HD in Android 3.2, webOS Browser build 234.76 (in webOS 3.04), or BlackBerry Browser (in BlackBerry TabletOS 1.0.7).