On Thu, Oct 9, 2014 at 11:16 AM, Pine W <wiki.pine(a)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