Mobile web projects/Infoboxes

As a reader, I don't want to have to see broken-looking/scroll past huge infoboxes, so I can have a good mobile reading experience.

Background information

On en.wiki and any wikis that use the Infobox Lua module, Infoboxes are implemented as tables with class 'infobox'. Even on wikis that don't use the Lua template (de.wiki), infoboxes are typically tables of class 'infobox' (although this is not required by the software). This allows us to do some styling and manipulation of them from MobileFrontend (or Mobile.css). The infobox template allows custom CSS pretty much anywhere in the infobox, so our level of control is limited unless we were to strip all inline CSS, which leads to messy formatting in some cases (see question #2).

We are already doing a fair bit of manipulation of infoboxes from MobileFrontend. Specifically, on small displays we set the width to 100% and center them. We also override much of the table styling to force consistency.

1. Should we hide or collapse infoboxes?

Q: Should we hide all infoboxes and let users tap to expand them AND/OR make infoboxes scrollable?

Technically, it would not be very difficult to collapse them by default. If we did, I assume we would show just the infobox title and an expand arrow. The title is detectable without much effort (it is either the table caption or the contents of the first row in the table). If we wanted to show the first infobox image as well, this would be more difficult:

1. The first image can correspond to pretty much anything (flag, map, logo, photo, etc.). It's not necessarily the most important/illustrative image in the infobox, nor is its size or aspect ratio predictable. For example, imagine if we automatically scaled a map of Chile to 100% width.
2. Some infoboxes have 2 primary images, for example an infobox that shows the male and female forms of a species. It would be awkward for us to show only one by default.
3. There are no classes or ids assigned to make selection of a particular type of infobox image easy.

Showing just the infobox title may be a bit awkward as it typically duplicates the page title. It may not be obvious what the collapsed infobox actually is without more context. Another option would be to just show the label 'Information', 'Data', or 'Infobox', instead of the infobox title.

Making the infobox scrollable would also be awkward, as having scrollable elements within a scrollable page doesn't work well on mobile since people expect to be able to scroll the page from anywhere on the page. If they wanted to scroll the page, but accidentally scrolled the infobox instead, it may be confusing or frustrating.

Another option would be to make infobox hiding a pref setting like image hiding is.

2. Can we change how templates are rendered?

Q: Can we override/mangle the templates somehow before rendering and thus control their styling? If so: Can we filter out inline styles in some way and apply our own styles to make them presentable?

Yes, we already override several infobox styles with mixed results. With our overrides, the infoboxes are more consistent in appearance, but lose some useful styling (for example, text-alignment used to differentiate subheaders). We also add borders to every cell, which looks a bit clunky/old-school (see https://en.m.wikipedia.org/wiki/United_States). Stripping all inline styles would actually make complex infoboxes harder to read in some cases. There are, however, some specific inline styles, for example hard-coded widths, that are especially problematic for mobile and may be worth stripping out regardless.