Winter

Not to be confused with Extension:Winter for adding programming-like syntax to MediaWiki.

This document describes MediaWiki's Winter interface design, along with changes and rationale compared to the interface design of the Vector MediaWiki skin and extension, which became the default skin for MediaWiki in 2010.

An interactive prototype (with limited functionality) has been built. You may play with it here. Screenshots to come.

Some ideas from Winter were available as the beta features "Compact personal bar" and "Fixed header".

Skin: Timeless, which is bundled since MediaWiki version 1.31, is based on this skin.

Open the Winter Prototype

You're welcome to send feedback, questions, and ask for help getting involved at the talk page here, using the 'Discuss' tab at the top. For details, see:

• How to become a MediaWiki hacker
• Source code of Winter: #The Winter Framework

Purpose

Winter attempts to solve several problems inherent with the Vector skin/interface. In addition, it serves to inject a modern look and feel and serve as a showcase and prototype bed for new features and design changes.

• Tightly couple page actions and views (read, history, discussion, edit, etc.) to the page content itself
• Reduce interface clutter (either actual or perceived) to focus on content
• Synchronize design direction across devices and platforms
• Make search available at all times.
• Make user tools available at all times.
• Better surface exploration features, such as inter-project and inter-language links.
• Spur further "what if" design thinking.
• Generally improve the overall aesthetics of the interface.

Interface Consistency

This includes large screen, tablet, and mobile form factors, as well as consistency between language sites. Consistency of appearance, of behavior, and of functionality.

Highlighting Existing Content

By de-emphasising the site chrome the actual content can shine.

Highlighting Existing Functionality

By bringing forward functions and features we already have, like editing, discussion, history, contributors, additional means of contributions and collaboration, we'll open the site to many people who didn't know they had the ability or design to participate and contribute

User Tests

User tests and their results have been moved to their own page. See Winter/User tests.

The Winter Framework

With Winter version 0.6, the Winter prototype has been radically refactored and developed as a rapid-prototyping framework. The Winter framework is entirely JavaScript and CSS (with images, obviously).

This framework allows anyone with reasonable familiarity in JavaScript and CSS to write their own modules (called "snowflakes") that can be injected into the framework at runtime. Snowflakes can be simple (like one that changes the visual appearance of the page footer) to complex (like one that creates a "right rail" of surfaced activity).

Snowflakes can be developed and maintained independent of the main Winter framework (though they may have version requirements).

The source code for the Winter framework is available. Both the main "winter" depot and the secondary "snowflakes" depot are required:

• Winter
• Snowflakes

Snowflakes

The Winter framework allows for the development of extra modules or extensions called "Snowflakes". This is a list of requested Snowflakes.

Current

1. Dark Footer - changes the visual style of the footer
2. Test Mode - changes the interface by adding/removing elements and forcing fake-ups. Used when doing user tests.
3. Inner Table of Contents - Enables/disables the usage of the interior table of contents.
4. Typography Refresh - turns on/off new typography mode (should become default soon)
5. Hide Sidebar - reduces/eliminates the left sidebar and puts its functionality into a hover menu on the logo.
6. Right Rail - adds in "right rail" exploration functionality. This is fairly large in scope.

Pending/Requested

1. Hodor - changes all chrome text to randomized text ("hodor speak") in order to be able to test language selection.
2. Athena Images - adds large banner images to pages (per older Athena designs).
3. Up Next - load random or semi-random selection of articles at the bottom of article pages (transition/on scroll)
4. Side of fries - Allow new flow conversations to be started based on sections of article
5. Full screen - Allow fixed header to be hidden on scroll and restored on scrollback or echo events
6. Peek - Display more image information (uploader, author, CC info, etc) on hover
7. Pinned TOC - Allow for the table of contents to be pinned and use left column margin (wikiwand/footnote mockup)
8. Dynamic Images - start with larger default "thumb" style images e.g. 400px and dynamically resize smaller as the browser window shrinks (example code/example code/example code)

Known issues

• Contributions views:
  • Timestamps don't sort correctly
  • Comment fields are not correctly parsed from wikitext to html
  • Size changes are not correctly reflected
• Internal hash URLs don't scroll correctly when loaded from external sources (this is a problem with the prototype specifically and will not appear in the production version)
• Keyboard accelerators do not work. This is a problem of the prototype specifically and will not happen with the production version.
• Loading from JSON breaks the nice little "section hover" stuff.
• Categories are not displayed correctly, if at all.
• Page-footer overlaps with content on very short pages
  • This only affects the prototype; it's part of the way it is constructed.

Changelog

Version 0.6, July 13, 2014

In version 0.6, the Winter prototype underwent significant refactoring. Bugs may have crept back in.

New Changes

Major:

• Search functionality
  • Early level search functionality has been included.
  • Search results pages can be accessed by pre-pending a "~" character in the search box. This will force the system to display search results.
  • You can also get there by clicking the "contains..." entry in the search suggestions
• Watchlist functionality
  • Pages can now be added or removed from the user's "watchlist".
  • This is not a real watchlist, as it exists only in memory (a cookie).
• "Right Rail" functionality
  • When enabled, several changes happen.
    • Language selection is moved to the right rail
    • Topic icons are moved to the right rail
      • These could use some new icons, most def.
    • Infoboxen are moved from the content to the right rail (class .infobox)
    • Vertical navboxes are moved from the content to the right rail
    • Coordinates are called out specially in the right rail
      • Could use some design love
  • This is a Snowflake, and a work-in-progress
• Added functionality for Special:Random
  • Accessible from the sidebar ("Random page") or the search bar (just hit enter with no text)
• Significant revamp of the editor experience (in progress)

Minor:

• Revamp of the design for the in-header table of contents.
  • This now resizes itself intelligently.
• Many icons have been changed to fit the current Agora icon set.
• The page edit button has been moved into the context action ribbon
• Many visual design changes to .infobox class objects
• The personal tools bar has been redesigned according to the second iteration of Compact Personal Bar
• Visual design work on the in-page table of contents
• Integrate common.css from enwiki much better
• Bugfixes on css to make section edit links actually appear correctly
• Refactor/rebuild of the search auto-suggest in preparation for the future

Bugfixes

• Infuriating bug where some menus were not receiving any events (click, hover, etc.) in Firefox.
• 404 errors should now be handled correctly.

Version 0.5, April 20, 2014

Archived prototype: [1]

New Changes

Major:

• Personal tools section no longer modifies itself upon scroll and remains fully expanded.
• In-header table of contents now appears to the left of the search box.
  • No longer waits to appear upon scroll.
  • Now includes context actions at the top when opened (Edit/Discuss/History/etc.)
    • (This has bad visual design but it's good enough to test)
• Moved Language links into the page context ribbon area.
  • Hovering over the affordance will show some languages to better enable discovery
  • Clicking will open the language list. This could be the ULS; could be something else. But a pulldown list isn't working.
  • This is for testing discoverability.
• Moved the watchlist star out of the context ribbon and right next to the article title.
• Some context-ribbon button labels are now automatically updating:
  • Discussions counts the sections in the talk page and changes accordingling (e.g., "35 Discussions")
    • We're aware that there are possible caching issues with live implementation
  • The history link now shows the last updated time in human-readable format.
• Experimental: Added new toggle, "Hidden Sidebar". This hides all sidebar links until hover over the logo.
  • Toggle off or on from the sidebar.
  • It needs a lot of work, especially around the "non-scrolled" visual state. This is possibly a throw-away experiment.

Minor:

• Removed the header shadow appearing on scroll
• Removed shadow from editor toolbar
• Added option to disable the modification of the header buttons/controls on scroll (requires JS change)
• Removed "quiet mode" and "thinner" options from the sidebar; these are defaults now.
• Removed the restricted measure from the Typography toggle (this will probably become a default really soon now)
• The personal actions toolbar always remains fully expanded now.
• Added page-context actions to the header's TOC item.
• Added "Contents" header to the header's TOC menu
• Removed "overflow: hidden" from h2,h3, etc. (for now) as it prevents the menus from working on the section edit links

Bugfixes

• Missing icon for data items.
• Fixed issue with "bunching links" (thanks, theDJ and Sven!)
  • ... and promptly had to undo this change because the edit pulldown menus broke (above overflow thing)
• Certain icons were appearing in Contributions views that shouldn't have.

Version 0.4, February 07, 2014

Archived prototype: [2]

New Features

• Added version identifier in sidebar.

• Significantly upgraded the prototype chassis:
  • Added functionality to pass Page names to the url with ?page=$PAGENAME
    • This allows the prototype to open new tabs and such.
    • Other actions also follow suit (edit=, history=, contribs=)
  • Added "History" functionality
  • Added "Contributions" functionality
  • Added "Edit" functionality
    • Edit-mode controls are placeholders and not implemented. Also incomplete.
    • Always loads source editor
    • Links to article/user and discussion both appear here.
    • Section edits also work
    • DOES NOT SAVE.
    • Changed "Edit Source" to "Edit Visually" in edit button menus because we're not faking up the visual editor (At this time)
• Search box now works and does basic type-ahead lookups.
  • Not entirely fully functional (e.g., does not auto-select)
  • Some issues with clicking out of the search area not defaulting back to the page title
  • No full search functionality (yet)
• Additional sidebar toggles:
  • Quiet Mode: (default)
    • This applies several visual changes to the button ribbon (including border removal)
    • Also slots the button ribbon right below the page title
  • Thin Mode: (default)
    • This reduces several borders to 1 pixel instead of 2.
• Sidebar settings now are remembered between pages.
  • Cookie clears with "clear saved data"
• Personal bar now collapses when page-context tools pop into the header.
  • Animation could use some work.
• Changed avatar icon
• Added link to notifications from user pulldown menu
• Added small color highlight to internal tabs/buttons to indicate location
• Attached several "This is not implemented" modal dialogs to various actions.

Bugfixes

• Clicking on internal hashlinks (like from the TOC) now target correctly given the fixed header.
  • Also smooth scroll animation.
• Page now scrolls to top when new page is loaded
• Toolbox sections now open and close correctly
• Found broken css rule that was applying a ginormous font size to all <a> tags.
• Applied a max-height to the header table of contents and gave it scrollbars when the size of the TOC is larger than its content.
• Page co-ordinates now go to the correct place
• Language links now list the name of the language, not the name of the article
  • This was a pain. This data needs to be in the API call.
• "Discussion" link now becomes "article" link on discussion pages.
• Redlinks now appear red.

Version 0.3, January 20, 2014

Archived prototype: [3]

• New code name: Winter
• System now prompts for a user name upon load and will optionally save the value.
  • This sets up the personal bar to be, well, personal.
  • This action DOES NOT log the user into Wikipedia.
  • Saved data can be cleared from the sidebar.

• Searchbox now drops text on focus and replaces it on blur
• Searchbox now has a hover state with invitation text.
• Searchbox icon now turns blue on focus
• Logo now snaps to white background when in locked position.
• Sidebar is now white by default, with a grey border that fades out when all items in the sidebar are out of view.
• The Table of Contents now appears in the header of the page from the beginning
  • (Previous versions of Winter had the ToC only appear there after the in-page Table of Contents rolled off-screen)
• Article actions now dock in the header when they scroll out of view (iconfied).
• Added tipsy behaviors.
• Fixed issue with search box positioning.
• Added pencil icons to section edit buttons
• Section edit buttons now are visible at all times but do not have borders.
  • On hover, they turn blue.
• Changed section edit hover transition from 'linear' to 'ease'
• Added footer section
• Added "categories" box in example article
• Added "Typography" toggle in sidebar. Activating it turns on:
  • An approximation of restricted measure
• References have returned
• Built a JSON parser into the demo so that different pages can be loaded via the API.
• Language links are now slotted into the sidebar.
• System correctly recognizes when it's looking at User content (User: and User_talk:) and adds icons and functionality as required
• Handles contributions (sort of - buggy)

Version 0.2, January 14, 2014

Archived prototype: [4]

New Changes

• Added "watch" button to button ribbon
• Shadow only appears on scrolling; disappears and turns to solid border when not moving.
• Added icons to article action elements
• Turned "more" action into a single pulldown
• Edit buttons now have secondary pull down for additional actions (edit source, insert image, etc.)
• Section edit links are now standard "white" color until hover, where they turn blue.
• Targeted sections now have a slight border in addition to light color fill
• Removed border from Table of Contents
• Left aligned TOC header
• Search placeholder text is now replaced with article title on scroll
• All menu items now have icons (placeholders, mostly)

Bugfixes

• Fixed issue with hoverstate on H2 sections and striping (set background color to transparent rather than white)
• Fixed border radius issues with internal button ribbon

Version 0.1, November 25, 2013

Archived prototype: [5]

• Initial release