Page MenuHomePhabricator

Mobile-friendly framework for multi-column portal and project pages
Closed, ResolvedPublic

Description

On many portals and WikiProjects, front pages are designed with a multi-column arrangement of boxes. This allows a neat and compact distribution of related and/or unrelated contents on large desktop displays. However, these designs unfortunately rely on wikitables as structural elements in the majority of cases and for this reason they are intrinsically incompatible with small devices. This is an experience from de-wiki, but I think the situation is not much better on other wikis (arbitrary portal examples with poor performance on mobile: [1] [2] [3] [4] [5] [6]; to test their mobile behavior, open these links in your webbrowser and resize the window width to smartphone dimensions).

There are many reasons for these poor results. Besides the fact that many portals have been established in a pre-mobile time, we still suffer from the unavailability of a frameset of easily comprehensive technical solutions to build mobile-friendly portal/project pages out-of-the-box without the need of complex CSS hacks. I would therefore propose to develop a framework, consisting mainly of CSS classes on a suitable site in Mediawiki namespace and therefore available for common usage, with the following properties:

  • a flexible set of CSS classes, separated for style and positioning of content boxes; users can add classes to portal elements and define style and positioning by doing so
  • boxes can be encapsulated by the usage of templates with parameters, which I think are better known to wiki users than plain HTML
  • once compiled to a portal/project page, the box arrangement intrinsically adapts to display size, regardless of whether standard frontend, mobile frontend, or a Wikimedia app is used
  • a detailed documentation including use cases will complement this frameset; an average wiki user shall be able to create a mobile- & desktop-friendly portal page
  • bonus task: enable modern CSS techniques in portal namespace, like for instance media queries and whatever is useful; technically skilled users can enhance mobile and desktop experience by using this feature

—MisterSynergy (talk) 20:01, 11 November 2015 (UTC)

This card tracks a proposal from the 2015 Community Wishlist Survey: https://meta.wikimedia.org/wiki/2015_Community_Wishlist_Survey

This proposal received 5 support votes, and was ranked #87 out of 107 proposals. https://meta.wikimedia.org/wiki/2015_Community_Wishlist_Survey/Reading#Mobile-friendly_framework_for_multi-column_portal_and_project_pages

Event Timeline

DannyH raised the priority of this task from to Needs Triage.
DannyH updated the task description. (Show Details)
DannyH subscribed.
Reedy added a project: Mobile.
Reedy set Security to None.
IMPORTANT: If you are a community developer interested in working on this task: The Wikimedia Hackathon 2016 (Jerusalem, March 31 - April 3) focuses on #Community-Wishlist-Survey projects. There is some budget for sponsoring volunteer developers. THE DEADLINE TO REQUEST TRAVEL SPONSORSHIP IS TODAY, JANUARY 21. Exceptions can be made for developers focusing on Community Wishlist projects until the end of Sunday 24, but not beyond. If you or someone you know is interested, please REGISTER NOW.

I think most (English Wikipedia) portals have been moved to flex with TemplateStyles of late, see https://en.wikipedia.org/wiki/Template:Flex_columns . I think this could be closed resolved since the tools are in place to do this?