Mobile/Windows 8 Metro

Jump to navigation Jump to search

For background, see Wikipedia's article on Metro.

This page describes development of the Wikipedia app currently available in the Windows Store for Windows 8. Source lives with the main mobile app under WikipediaMetro subdirectory.

Windows 8 offers an HTML+JavaScript API (WinRT) for Metro-style (tablet-style) apps. We hope to support this in a version of our phonegap app, with system integration for available app protocols and styles.

Differences from conventional UI[edit]

To fit in best with Metro style:

  • don't show our own search UI -- use the system search integration exclusively
  • don't have buttons/menus to trigger "share" -- do it through system integration
  • settings dialog belongs in special "settings" area (system integration)
  • some items we have in Android menu/iOS toolbar will belong in a toolbar that can be swiped in from top/bottom
  • our tile in the start menu can be customized
  • Metro style loves horizontal scrolling and columns; consider making the content area multicolumn
  • in "snapped" mode we're only 320px wide, need a sane single-column view


System integration is similar to Android's global search, and allows us to search both while the app is open and to start the app. Unlike on Android, this is also the recommended way to handle your in-app search UI, so there should be no default search bar or button to activate it.



For user to activate while the app is up:

  • open charms bar (swipe in from right edge of screen)
  • hit "search"
  • start typing
  • hit "enter", submit, or pick a suggestion from the suggestions list
  • the app should then show the article if exact match, or search results

When app is not up:

  • open charms bar (swipe in from right edge of screen)
  • hit "search"
  • find 'Wikipedia' in the list of searchable apps
  • start typing
  • etc.



We can use our OpenSearch REST API to provide typeahead suggestions fairly straightforwardly by listening to the appropriate events. Sample implementation in WikipediaMetroTest app.

Search results display[edit]

Search results in simple demo app

When a full search request comes to us...

To best integrate, consider a ListView control, using extracted thumbnails and descriptions. Scroll horizontally.

For an example, here's a search results list in the Windows Store:

Search results in Windows Store app



System is similar to Android's intents. We can share a link with a brief title, description, and thumbnail image.

For user to activate:

  • open charms bar (swipe in from right edge of screen)
  • hit "share"
  • pick a target application and go through its sharing UI



For user to activate:

  • open charms bar (swipe in from right edge of screen)
  • hit "settings"
  • ... we have some more stuff stuck in there?


Application toolbar[edit]


Toolbars should stay out of the way in Metro style, but should be activated and slide in when swiping from the top or bottom of the screen.

FIXME add examples from Internet Explorer etc

Snapped mode[edit]


Metro apps can be shown side-by-side in two possible sizes:

  • 320px wide
    • switch to a still-readable single-column display?
  • whole screen minus 320px wide
    • show normal UI, we're just a little smaller

CSS media queries can take care of implementing this.



Tile notifications...

FIXME show just featured article or make it selectable among several items?

FIXME can we schedule updates from the RSS/Atom feed or do we need to produce custom XML in Extension:FeaturedFeeds to get it to auto-refresh while the app's not open?

FIXME can we get images in or do they have to be produced in the proper size?



Tile logos[edit]

Solid or slight gradient background. Can specify light or dark text & a background color for notification tiles.

  • standard tile 150x150
  • wide tile 310x150 (sized to also show notifications)
  • small logo 30x30 (shown on notification tiles, etc)

Toolbar icons[edit]

Metro style likes 2d b&w, with circles around items

(Check size!)

  • 40x40, inside a circle about 2px thick
  • recommend using SVG so they always scale cleanly!

Need icons for at least:

  • Read in [language]
  • Nearby
  • Save
  • Saved pages
  • History
  • Open in Browser (possibly?)


  • no search icon
  • no share icon
  • no print icon