On Thu, Oct 9, 2014 at 11:16 AM, Pine W <wiki.pine@gmail.com> wrote:

I can see how those are difficult issues especially for the smallest screens.


For reference, the smallest screens we tend to see on smartphones is 320x480 (CSS pixels|points|device-independent pixels). Vertical space may be further constrained by presence of toolbars and other UI from the browser.

There may be some slightly narrower phones out there though, especially older budget Androids or weird OSs. But targeting 320px width is the main one to hit.

Could you do partial collapses, that is, show just the first few rows and columns, and give the user options to scroll OR expand horizontally and/or vertically?

Yes, where good CSS/JS support is available (mainline current browsers and the apps) there are a few possibilities here:

* restricting the height and adding a vertical-expand/collapse button could work very well for "super tall" infoboxes that still fit horizontally. This should be doable by setting height and overflow and adding a button to the DOM.

* "zooming out" ("thumbnailing?") a table that's too wide should be possible using CSS transforms, but I'm not sure how easy it is to tell that something "needs" more space automatically.[1]

* "zoomed-out" tables could then be presented full-size in a full-screen overlay that lets you pan around....

* or you could just pinch-zoom *into* the "zoomed-out" table and pan around it. Hmm.

[1] In the apps we use JS in the web view to loop through tables and see which ones are wider than the available space to try to force their width; however that'll probably leave things that "can" render at tiny size but look like crap. This might be more fixable by setting minimum sizes in inline CSS on cells or whole tables that require it.

-- brion