Community Wishlist/Wishes/Make it easier for editors to design pages and templates according to the Codex design system

Make it easier for editors to design pages and templates according to the Codex design system

Submitted

< All wishes

Description

Wikimedia now has an integrated design system called Codex. Based on how the official documentation describes it, Codex seems to be intended primarily for user interfaces. But a non-expert like me might ask: for consistency, shouldn't Codex also be used when designing pages and templates?

Some examples:

  • Many (most?) wikis have a template like Hidden; but shouldn't we now use the "Accordion" component as described in Codex?
  • Shouldn't templates like article message boxes use the "Message" component in its neutral or warning variants?
  • Shouldn't regular tables and tooltips now be designed as described in Codex?
  • Shouldn't there be an easy way to apply standard design tokens to page elements and templates, such that things need not be separately edited on each wiki every time Codex gets an update?

Of course, this may not apply to all the design tokens and it certainly does not apply to all the so-called components; some are obviously specific to user interfaces and may concern extensions at most, but they do not concern pages and templates. As a non-expert, I'm not attempting to write a definitive list of what my own "wish" involves[1]; some of the things I've mentioned, like tables and tooltips, should probably be coded directly into the default skins, while others, like design tokens, accordions and messages, could use dedicated CSS classes (available by default, not to be manually kept updated on every wiki) or dedicated extensions.

Of course, it is possible to manually design pages and templates so as to match the Codex standards, but a more structural approach would obviously ensure consistency across pages and wikis and generally encourage a wider use of Codex.

A somewhat related wish would be that the LinkCards extension be installed on every Wikimedia wiki, after ensuring that the extension itself meets the Codex standards[2]. This would encourage a more modern approach to the design of certain kinds of pages, notably main pages. On many (most?) Wikimedia wikis, main pages use a two-column layout, which was nice two decades ago but does not meet the needs of responsive web design[3]. A more modern approach could use distinct sections, one below the other[4], with "cards" in every section[5]. Card-based elements would also be beneficial in portals and other kinds of pages.

I'm happy to discuss or provide explanations if what I wrote appears unclear.

  1. For example: should there be an easy way to use the standard interface icons in the design of pages and templates as well? Maybe yes, for consistency; or maybe not, as icons should be reserved for the interface (and extensions at most): I leave the answer to experts.
  2. As a non-expert, I don't know whether it already does.
  3. Such two-column main pages were originally designed for desktop, and the sections that were to be the most prominent were placed at the top of the columns. How should this be adapted for mobile, where sections must appear one below the other? If one whole column is displayed first, the sections which on desktop are at the top of the other column lose their intended prominence. Other options create inconsistencies between desktop and mobile.
  4. The order of the sections would stay the same on desktop and on mobile.
  5. On desktop, several cards per row would be displayed; on mobile, of course, only one card per row.

Assigned focus area

Unassigned.

Type of wish

Feature request

All projects

Affected users

editors of design-heavy elements and consequently all readers

Other details

  • Created: 19:22, 28 July 2024 (UTC)
  • Last updated: 19:22, 28 July 2024 (UTC)
  • Author: Erasmo Barresi (talk)