I’ve been working on a cross-browser, cross-platform magazine-style web app off and on since March 2011, and am pleased to say that version 0.9.0 has now seen an official public launch over at www.ryumaru.com/products/ryuzine/ just in time for Halloween!  It is called “Ryuzine” and future updates will be exclusively available through that domain.

In addition to the magazine web app I also wrote an “Authoring” web app that makes it pretty easy to create a simple web page with elements “tagged” with certain ID and style names and the authoring web app converts it into the magazine-style format.  The content can be created in a WYSIWYG editor (it’s a customized version of the Xinha HTML editor).  You can even preview how the magazine will look/work on different device screen sizes (presently iPhone, iPad, Android Phone, and Android “Honeycomb” Tablet).  You can also add your own custom “device profiles” to see ahead of time how the magazine “reflows” on that device’s screen size (obviously it can’t actually emulate the device, but a web app “lives” in the device’s web browser anyway, so simulation of the browser size is more important).  Ironically the authoring app was actually written AFTER the magazine web app.  A working demo is available if you want to give it a test drive, especially if you’re using a webkit browser.

Ryuzine Machine Web App Editor

My targets for the magazine app were both desktop and mobile devices running Windows, Linux, OSX, iOS, and Android and specifically I wanted it to work on the Desktops, Laptop/Netbooks, Android tablets, Android phones, iPhone, and iPad.  Browser I was targeting included Safari, Mobile Safari, Chrome,  Chrome Mobile, Firefox, Opera, and (begrudgingly) Internet Explorer.  That level of cross-browser, cross-platform compatibility proved to be a massive undertaking given the HTML5 and CSS3 elements I wanted the app to include.

Ryuzine Machine Web App Device Simulator

Especially daunting since I don’t consider myself a “programmer” in that I’ve never taken any classes in programming (nor web coding for that matter) with everything I know having been learned on the job since I got into this line of work in 1997.  I’m sure there are probably tons of ways to accomplish what I want with less code or shortcuts and techniques I don’t know, but I continue to tweak things and combined with subsequently faster browser releases the usability keeps getting better.  During the “private beta” (versions 0.8.8 – 0.8.9) a lot of testing was done on different platforms, devices, and in different browsers and I’m sure now that it’s in “public beta” I’ll learn of a ton more bugs that need squashing, but all that preliminary testing revealed that older/underpowered devices often struggle with the web app, which led to including “Alternative View” modes that let users with problems running all the “bells and whistles” opt for either a “Continuous Pages” view (kind of like you get with PDF files) and a really stripped down “HTML Only” view that takes all the custom styling out of the page flow.

Also during the “private beta” phase the idea of separating out some of the “bells and whistles” into optional scripts and stylesheets came into being.  It’s not a true nor robust plugin architecture, but it does make the web app optionally extensible.  Oh yeah, almost forgot, the User Interface is completely theme-able.  During development I came up with a number of different themes, but got it down to the point where the actual theme is a single file in a single folder (in which you can also include supporting images and fonts for the theme).  An optional configuration file system also came into being with the ability to switch the “binding” of the virtual magazine from left to right and you can also define different themes to be delivered to different platforms – that way you can give iOS users and Android users different “native-looking” themes.  I’m not a huge fan of browser/device sniffing, but it was a necessary evil to accurately target with that feature.

If you got in on the “private beta” there are a few new features awaiting you in 0.9.0. . .

Ryuzine Web App

  1. Added Built-in e-mail sharing widget
  2. Removed Javascript-Based animation for legacy browsers (to improve usability)
  3. Added Language Localization Option
  4. Added Keyboard Controls for page flipping back and forth
  5. Added webOS support
  6. Added automatic Zoom & Pan detection (still buggy)
  7. Major rewrite of UI and Theme stylesheets
Ryuzine Machine Web App
  1. Added Split-View for Coding & Preview
  2. Added option to create custom device profiles in Simulator
  3. Added “Tags” side panel for coding from scratch
  4. Added Template creator
  5. Added “Browser View” and “Screen Only” Simulator options
  6. Import options for both source HTML files and Ryuzine files.

Both web apps are available as FREE DOWNLOADS and non-commercial use for your own projects is also free.  I’ve invested a lot of time in this so I’m only asking those who use it commercially to pay a small licensing fee.  More info on that at www.ryumaru.com.