Page MenuHomePhabricator

Improving how tables display in iOS app
Open, MediumPublic

Description

As a user, I find it difficult to read large-sized tables on the app easily. Rendering large tables is a difficult problem, as I understand it. I went through a bunch of different apps which handle this a little better and more cleanly than the Wikipedia app.

For example, for the massive table on https://en.wikipedia.org/wiki/List_of_Manchester_United_F.C._managers article, here's what we see on the iPhone Wikipedia app:

IMG_3188.png (1×640 px, 126 KB)

And this is what a third-party Wikipedia app, Viki, shows (the table opens in a pop-up):

IMG_3189.png (1×640 px, 170 KB)

I understand that the latter makes use of far reduced font size which might cause problems but it's hard to deny that it's much more useful than what we see on the Wikipedia app currently.

Is there a way to test the impact of having tables like these on the app?

Event Timeline

Niharika updated the task description. (Show Details)
Niharika updated the task description. (Show Details)

Shrinking large tables is relatively easy with css, but isn't always a good solution, as once you've zoom in enough to read you've lost context such as column and row headers.

See https://css-tricks.com/accessible-simple-responsive-tables/ for some recommendations on how to build responsive tables in several different ways; ultimately we need better tools to help people put together -- and test -- tables that can handle both short and wide viewing spaces.

JMinor triaged this task as Medium priority.May 9 2016, 9:44 PM
JMinor subscribed.

This is something we should solve across our apps and mobile web skin(s) which all handle tables poorly IMO.

Should be relatively cheep to prototype and test in HTML/CSS...

We received this review on the app store:
Basically, you click on episodes in television to view the list and relevant information, the window that opens is too wide for a cellphone to two times the width of a cellphone, making you have to slide back and forth left and right. This happens with other sublistings in Wikipedia articles when listing filmographies, discographies, awards and nominations, but the bibliographies I checked did fit. It is this table structure, it just does not show up right on cell phones. I hope you make it more adaptive in the future