Thursday, March 29, 2012

Anonymous said: if you had to write an application that would be generally similar on Mac, Windows, iPhone, iPad, Android phone & tablet, what dev tools would you use in order to minimize the amount of dev tools and code? The other requirement is that it needs to feel like a native application.

I find this an interesting question as I used to be one of the architects of a platform that tried to solve screen size, orientation and input methods semi-automatically.

And in the end, I decided it was best to design each layout for each phone differently - using Adobe Flash.  There were business reasons and differentiation in there too, but there’s no escaping the feeling that we found only pain in trying to make phone UIs automatically adapt and lay out based on the form factor.

It reawakens distant memories.  I remember being in one top secret planning meeting around a new phone chip-set and realising that whilst the CPU was four times faster than previously, the screen was five times bigger (QVGA -> WVGA): our software-rendered UI could well be slower.  Panic ensued.  But that’s only a fun old war story.

I ust asked an old friend from the UIQ days whether he thought you could make one UI that worked on all screens.  He was exceedingly skeptical.  But I, on the other hand, think there is some measure of hope; more recently the landscape has changed and technical choices have changed.

One key lesson - obvious when you think about it - is that all layout choices have to be made in a hybrid of physical measurements and pixels.  The density of displays differs dramatically.  I think it was Nokia’s Series 60 that was forced to strictly quadruple their screen area so they could simply double all the measurements for the widgets that were hard-coded in the app in pixels.  DPI is really important when making font and icon size choices.  But you can’t ignore pixels entirely and just blend over pixel boundaries; edges have to be pixel aligned, and that means the interior lines in font glyphs too.  You can’t do arbitrary scaling (neither vector nor bitmap); everything would look smudged.  Basically, top-quality artwork has to be pixel perfect and so you need a lot of it and pick the best for each screen.

You can do automatic layout between portrait, landscape and widescreen options.  Ideally you have some tool that automatically shows you thumbnails of your screen laid out on a variety of form factors and you get to go in and tweak any you think the algorithm got wrong.  I don’t know of any such tools but I speak from the experience of coding the automatic screen furniture layout code in my UIQ days.

A lot depends on your constraints.  Obviously it matters what kind of app it is; off the top of my head there are at least three categories - drawing, text / list and games.

The drawing apps are based around their canvas for that you’d use OpenGL and a widget set using OpenGL.  Performance demanding games, ditto.  WebGL is not really there yet so they aren’t going to be web apps directly, but Google’s Native Client (that I have high hopes for) goes some way in this area and I’ve even written an OpenGL framework for my Ludum Dare entries to use.  Or you can simply do raw OpenGL.  Anyway, 99% of your program is portable OpenGL, and the rest is target-specific.  I’ve not much more to say about drawing app and game portability.

The text and list apps - the normal domain of widget frameworks and desktop apps - is where things change though: I’d recommend you make a web app using jQuery Mobile.  I’d guess it works just great on non-mobile browsers too, and imagine its totally workable on mouse-driven keyboard UIs on the desktop/laptop/netbook.

jQuery Mobile has themes and such, but the defaults are sane and you can go with them.  After all, you say it has to feel like a native application, but I think that’s pretty open to interpretation.  Apple products have a fairly strict style, which jQuery Mobile follows and fits out of the box.  Android is close enough (but never expect to make much money on Android, honestly; sadly). 

And Windows?  Windows Phone I haven’t seen, but on the Windows desktop there is no semblance of uniformity left!  There was a time when apps were in three camps: win32, MFC or Borland.  These days  though its just a jumble and an iPhone -style UI on the desktop will look slick and modern and not jarringly out-of-place.

If you want some window decoration and back-behaviour control and persistence and such simply put your web UI into a browser frame and make a native app to create this web view on each platform.  So 99% of your code is portable, and 1% is specific to each target to give you the native integration you want.  I’ve explored this route on iOS and Android and you can even mix local content with remote content and do neat things trivially.

I’ve completely skipped non-web frameworks like Qt and the portable frameworks I recall from the distant trade-show days that claimed to run on all phones.  All that is so outdated.  Go web-view.


  1. williamedwardscoder posted this

 ↓ click the "share" button below!