Mobile projects/Mobile Gateway
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.
- The developer tools of Safari allow you to easily set the iPhone user-agent.
- Open the page in the Opera Mini demo: http://www.opera.com/mini/demo/
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!