Mobile projects/Mobile Gateway

From Meta, a Wikimedia project coordination wiki
This is an archived version of this page, as edited by Qgil-WMF (talk | contribs) at 17:42, 21 April 2011 (Undo revision 2518273 by 85.118.193.147 (talk)). It may differ significantly from the current version.

MediaWiki Mobile is the mobile interface for Wikimedia projects (only Wikipedia at the moment), run by Hampton Catlin and written in Ruby.

Behind the scenes

The mobile interface can be reached by visiting langcode.m.wikipedia.org – a mobile interface for every Wikipedia we have already exists, even if there is no translation. People are sent to the mobile interface by explicitly requesting it (by visiting m.wikipedia.org) or through automatic redirection based on User-Agent (see #Redirecting users). The mobile interface of MediaWiki is an application that reformats a Wikipedia article into something more suited for a range of mobile devices. This page gives some information about how to make sure the mobile interface works best for your project.

Translations

The mobile application requires separate translations from the MediaWiki PHP software. The translations are done through the Translatewiki community, and by the last count there are only 29 messages that you will need to translate. If you want the application to be usable in your language, please visit Translatewiki and volunteer your services.

Please note that currently only the content languages are supported by the software for interface messages, and you cannot configure your own desired language yet when using Mediwiki Mobile. (bugzilla:21806).

Mobile homepage

By default, no homepage is configured for the mobile interfaces and only a search interface is provided. In order to create a homepage for a language, two different techniques can be used; Selectors or a Mobile portal.

Selectors

The original method that is used on the English Wikipedia version is to make use of selectors. You add the selectors listed below to the relevant sections of the homepage of the Wikipedia. The software then extracts the sections from the homepage and constructs a mobile homepage for that language. Currently only "Today's featured article" and "In The News" are presented.

The selectors are:

CSS id section shown
#mp-tfa Featured article YES
#mp-itn In the news YES
#mp-otd On this day YES
#mp-tfp Today's featured picture YES
#mp-dyk Did you know ? YES
#mp-tfga Today's featured good article NO
#mp-qotd Quote of the day NO

An example of the usage of these CSS ids can be seen in the source of the main page of the English Wikipedia (Go to the page and choose "view source" in your browser. Also see the wikicode).

After you have added these IDs to your Wikipedia mainpage, create a ticket in bugzilla. Add the following information:

Wikipedia: lang-code.m.wikipedia.org
Main page: The name of your local main page. For instance: Portal:Main_page

Mobile portal

An alternative method is to create a dedicated portal page on your Wikipedia. An example for this is the page of the Swedish mobile main page.

When designing a mobile portal you will have to take some things into account.

  • Content first. Mobile devices have little screen real estate. If you put a lot of information before the content, it might be that you will have to scroll one page down to reach it on an Android for instance.
  • Be careful with indentation; horizontal screen real estate is even more precious than vertical screen real estate.
  • All used CSS needs to be inline CSS, because the mobile portal does not yet include CSS pages from your project.
  • Tables are stretched to 100% width. Use div floats for images.
  • Keep information and especially images limited. You don't want to drain a person's databundle just by visiting the main page.

You will probably want to test the page you have designed. Go to http://language.m.wikipedia.org/wiki/portalpagename and see how it looks. Preferably on a mobile device, but you can also use your browser.

After you have created a portal for Mobile Wikipedia, create a ticket in bugzilla. Add the following information:

Wikipedia: lang-code.m.wikipedia.org
Main page: The name of your local portal page. For instance: Portal:Main_page_(mobile)

Redirecting users

Which wikipedias are redirecting is now controlled by the WikimediaMobile extension and the $wmgUseWikimediaMobile setting.

More information

If you have a question, just ask Hampton Catlin or Derk-Jan Hartman.

You can also talk to the developers in the IRC channel, via e-mail, and on Twitter

Development

Just pop into the IRC room. The code is available to anyone. Just get the repos from github and start hacking!