The problem:
Currently tables are highly unusable on mobile. Depending on the width of the table, most tables are cut off on the right on mobile and other small screens.
Why it is a significant problem:
A large and growing share of readers access Wikipedia articles using mobile phones (which can be verified with the pageviews tool for some popular pages). This is why good support for mobile phones is very important. Some websites go so far as to design with an increasingly popular "mobile first" approach that ensures that the display on mobile is at least as good as the desktop one.
Tables are important content of Wikipedia, featured in many articles and often displaying very useful, well/better-structured content that is sometimes making up most of an article's content and often of high interest to the readers of the article.
Advantages of responsive web design in respect to tables would be very useful for the standard display of common, unextended, tables already but may also better enable further features or use of existing functionalities.
Suggested solution:
As a solution to this problem I suggest the following responsive web design:
- When the reader taps on a table rotate the screen and show the table in fullscreen. Don't show any other content of the table except eventually preceding or succeeding text that is directly referring to the table / descriptive of the table. The tap could be anywhere on the table but there should be a small image that indicates that the table has to be taped to be viewed better.
- When the table is displayed in rotated-screen-fullscreen show a large horizontal scrollbar at the bottom if some columns are still cut off. Maybe the scrollbar could be hidden until the user taps the screen. Maybe it would be best to allow scrolling horizontally by swiping left and right - if no scrollbar is displayed to indicate that columns are cut off and that scrolling is possible there should be some other small icon/image, like a small arrow, to indicate this.
Additional suggestions/requests beyond the basic solution:
Additionally there could be a way to "prioritize"/tag columns so that if columns are cut off on mobile (or small screens) it's not the most important columns. This could be achieved by either hiding columns with less important data (and showing a [show] button) and/or placing the "field of view" of the table so that the tagged columns are visible and the less important ones are cut off.
Further issues:
Sortability on mobile:
https://phabricator.wikimedia.org/T233340
https://phabricator.wikimedia.org/T181452