Reading/Web/Desktop Improvements/Repository/A History of Wiki Skins

From https://office.wikimedia.org/wiki/User:CKoerner_(WMF)/Wiki_skins

This page attempts to document the history of skin development for Wikimedia sites. It does not attempt to cover all existing or prior skins, but the most impactful and important bits. It does not encompass skins used outside of the Wikimedia movement, of which there are many. Each section attempts to provide a short summary of the goals of the efforts, the outcomes, and the legacy – what is the general community feeling toward these efforts. Links are provided to contextualize the different initiatives.

2002: In the beginning there was Standard (a.k.a. Classic)
Screenshot: mw:File:Dantman-Skin-standard.png

Goals: Well, we have to start somewhere. :)

Outcomes: This is the initial appearance of MediaWiki, before skins were introduced. It resembled the look of the Phase II software, which itself was designed to look like UseMod.

Legacy: A persistent sidebar and the site logo in the upper left (in LTR languages). Humorously, the search box is also in the upper right corner like in Vector (in Monobook, the search box was moved to within the sidebar)


 * https://www.mediawiki.org/w/index.php?oldid=2963320

2003: Cologne Blue
Screenshot: mw:File:Dantman-Skin-cologneblue.png

Goals:

Outcomes: Bundled with MediaWiki until version 1.31. Available to Wikimedia wikis from 2003 to today.

Legacy: I couldn't even tell you why it was created. Maybe you can and edit this section!?


 * https://www.mediawiki.org/wiki/Skin:Cologne_Blue

2004: The dawn of Monobook
Screenshot: Monobook is named after the black-and-white photo of a book located in the background of the page header.  Goals: Introduce the concept of "skinning" MediaWiki, and modernize the design to be clearer and more organized for readers.

Outcomes:

Legacy: Still an actively used skin, particularly by editors who have been around the longest.


 * First introduced in MediaWiki version 1.3.0, 2004-08-11
 * https://www.mediawiki.org/wiki/Release_notes/1.3#1.3.0
 * Development discussions were in m:Layout design document and feedback at m:MediaWiki 1.3 comments and bug reports/Archive

As of 2018 there have been community-lead efforts to make Monobook responsive

2008: Modern
Screenshot: mw:File:Dantman-Skin-modern.png

Goals: A skin derived from Monobook to use on the toolserver wiki.

Outcomes: Bundled with MediaWiki until version 1.30. Available to Wikimedia wikis from 2008 to today.

Legacy: Like Cologne Blue, it's a zombie skin. Not much support or use, but still around.


 * https://www.mediawiki.org/wiki/Skin:Modern

2008: Ruby rider, the first mobile frontend
Goals: The first mobile gateway was written in Ruby by Hampton Catlin (creator of Haml and Sass)

Outcomes: Hey look, we have a mobile-formatted site!

Legacy: Eventually evolved into MobileFrontend


 * https://meta.wikimedia.org/w/index.php?title=Mobile_projects/Mobile_Gateway&oldid=1879138
 * The "Ruby rider" in this section title is a Steven Universe slash Ruby reference

2009: The Wikipedia Usability Initiative
Goals: "The goal of this initiative is to measurably increase the usability of Wikipedia for new contributors by improving the underlying software on the basis of user behavioral studies, thereby reducing barriers to public participation."

Outcomes: Vector

Legacy: Vector


 * https://usability.wikimedia.org/wiki/Main_Page

2010: Vector: The first WMF-lead skin
Goals: Implement learnings from usability initiative.

Outcomes: One of the largest WMF-lead initiatives to change the user-interface.

Legacy: Love it or hate it, it's seen so much code change as to be indomitable.


 * You're seeing this right now, probably
 * Planned and discussed for over 1 year at dozens of pages in https://usability.wikimedia.org/ and elsewhere
 * see the FAQ page https://usability.wikimedia.org/wiki/What%27s_new,_questions_and_answers
 * see the 3 massive archive pages of feedback: /Archive_1, /Archive_2, /Archive_3
 * https://blog.wikimedia.org/2009/04/24/usability-study-results-sneak-preview/
 * Full results: https://usability.wikimedia.org/wiki/Usability_and_Experience_Study
 * https://blog.wikimedia.org/2009/12/03/how-is-the-usability-beta-doing/
 * Deployed to Wikimedia wikis in May 2010
 * https://en.wikipedia.org/wiki/Wikipedia:Requests_for_comment/May_2010_skin_change
 * https://blog.wikimedia.org/2010/03/25/the-change-in-interface-is-coming/
 * https://blog.wikimedia.org/2010/05/01/the-change-in-interface-is-coming-part-2/
 * https://blog.wikimedia.org/2010/05/13/a-new-look-for-wikipedia/
 * Of note, "Wikimedia Commons is planned to be switched over first, and English and other language Wikipedias, and our sister projects will follow as our development and operations teams are ready"
 * The English Wikipedia link is to an RfC that centralizes three other RfCs.
 * https://meta.wikimedia.org/wiki/Vector
 * https://www.mediawiki.org/wiki/Skin:Vector

2011: "Mobile site rewrite" – MobileFrontend
In 2010, Ethan Marcotte wrote one of the first essays on "Responsive Web Design" and coined the term. RWD is "an approach to web design that makes web pages render well on a variety of devices and window or screen sizes."  Goals:

Outcomes:

Legacy:


 * https://www.mediawiki.org/w/index.php?title=Extension:MobileFrontend&oldid=404131

2012: Athena
Goals: A prototype created by designer Brandon Harris to re-think the mobile site for contributors. You should watch the video linked on the project page for more context.

Outcomes: A first go at a unified, responsive, "mobile-first" skin for both desktop and mobile.

Legacy: General positive feelings, but never turned into a production skin.


 * https://www.mediawiki.org/wiki/Design/Archive/Athena#Rationale
 * https://www.mediawiki.org/wiki/Design/Archive/Athena#Goals

2013: VectorBeta Beta features feature
Goals: The VectorBeta extension was the first implementation of Beta features for the Vector skin.

Outcomes: Enabled users to test typography experiments, compact personal tools, and fixed header.

Legacy: Evolved into the current Beta features. This became a frequently (but inconsistency) used way of allowing desktop users to try out new features before making them available to all.


 * https://www.mediawiki.org/w/index.php?oldid=2216952
 * https://www.mediawiki.org/wiki/Beta_Features



2014: Winter is coming
Goals: A set of modules for experimenting with changes. Currently six of which are used as examples thought to be good ideas by the sole driver of the project, Brandon Harris (Jorm)

Outcomes: Jorm left the Foundation and the project stopped.

Legacy:


 * https://www.mediawiki.org/wiki/Winter
 * https://tools.wmflabs.org/winter/

2014: Typography refresh
Goals: Lets do general redesign with a focus on typography. Was initially a beta feature logged-in users could opt into. When deployed not all items from Beta feature were carried over. Ideas were cherry picked from beta (Winter). The project added many little changes with some technical issues. Product teams did not wait long enough to see if users would get use to changes. Other non-typography-related changes were included (thumbnail appearance, fix-width content, removing numbering from Table of Contents). Some font changes were problematic, they did not work in some languages. Particularly in Indic languages things were broken. One small wiki was blank as the font variant didn't exist for that language.

Note: The typography refresh was one of several initiatives inside the VectorBeta extension along with a fixed header and compact personal tools.

Outcomes: many changes that were not typography-related, lacking documentation, no attempts to document changes as they happened.

Legacy: Frustration, with some improvements


 * https://www.mediawiki.org/w/index.php?oldid=2216952
 * https://www.mediawiki.org/wiki/Typography_refresh
 * https://www.mediawiki.org/wiki/Typography_refresh/Retrospective
 * Extension to add alterations to the Vector skin to the list of beta features ahead of the features being merged into the core Vector skin for all MediaWiki users.: https://www.mediawiki.org/w/index.php?oldid=2216952

2015: Timeless
Goals: A single responsive skin for MediaWiki based on Winter

Outcomes:

Legacy:


 * https://www.mediawiki.org/wiki/Skin:Timeless


 * Community-built skin
 * Included with MediaWiki since version 1.31
 * Currently available across Wikimedia projects as an opt-in skin
 * Was discussed by the French Wiktionary community as a potential replacement default skin

2016: Minerva Neue
Goals: Historically, the mobile skin was not a real skin and there was a preconception that MobileFrontend was being built in bad faith and Wikimedia centric. Splitting out the Minerva skin was a passion project to show that it was something that could be used outside the mobile universe and maybe in future a usable desktop experience.

Outcomes:

Legacy:


 * https://www.mediawiki.org/wiki/Skin:Minerva_Neue


 * Minerva skin decoupled from MobileFrontend

2018: Advanced mobile contributions
Goals:

Outcomes:

Legacy:


 * Page issues
 * Opt-in interface
 * User menu
 * Special: page updates
 * What's next for MobileFrontend

Notes for future initiatives
This is mostly advice to anyone developing a new interface for Wikimedia projects. From a community perspective by way of Community Relations.


 * https://meta.wikimedia.org/wiki/Turning_off_outdated_skins
 * https://meta.wikimedia.org/wiki/Talk:Turning_off_outdated_skins
 * Remember, the contents of the sidebar (a collection of links and tool curated by the community) is inconsistent across projects. Don't depend on it for anything resembling consistency. (E.g. meta: / w:he: / w:zh: / voy:ru: / mw: / etc)
 * The Foundation, as an organization leading recent efforts, has changed drastically since Vector was developed. In 2010 one could describe the Foundation as small teams, loosely affiliated.
 * Keep in mind the impact any changes to the interface (skins) will have on editor recruiting rates – particulary initiatives across the Foundation to grow medium-size wikis in emerging communities.
 * Don't hide the edit button.
 * Don't say you want to make a "simple" interface, but do say you want to make the interface "clearer".
 * With a broad stroke, power-editors don't want simplification. They are more focused on their workflows and not concerned with the complexity. To them, mastery of the interface is a sign of competence and commitment. They want more advanced tools (search, filters, quick actions (AWB, Huggle, Twinkle)), not less. You can sell them on a "clearer" interface, by also making their powerful tools more easily accessed and utilized - Progressive Disclosure designs, with an emphasis on how it will also help users who want even higher-density content/interfaces.
 * If you want to present on-boarding documentation, this needs to be created with the community, not for them.
 * Communicate everything, early and simply.

Stats and other numbers
As of May 2019 there are six skins installed on Wikimedia sites.


 * Vector (default on desktop; supported by the WMF) - example
 * Cologne Blue (volunteer-supported) - example
 * MinervaNeue (default on mobile; supported by the WMF) - example
 * Modern (volunteer-supported) - example
 * MonoBook (originally WMF supported, and now volunteer-supported) - example
 * Timeless (volunteer-supported, partly via a WMF grant) - example

Statistics (phab tasks):


 * Re-run active editors skin statistics (2018)
 * Stats from 2016 on use of skins in Wikimedia by user activity (2016)
 * Research usage of different skins in Wikidata community (2014)

To add

 * Jon Notes