Mobile Gateway

The MobileFrontend MediaWiki extension is the primary mobile web interface for all Wikimedia projects, written in PHP. It replaced the first mobile gateway written in Ruby.

Behind the scenes
The mobile interface of a Wikimedia project can be reached by visiting langcode.m.X.org (where X is the name of a Wikimedia project)

For instance:
 * pl.m.wikipedia.org
 * [//en.m.wikinews.org en.m.wikinews.org]
 * [//en.m.wikisource.org en.m.wikisource.org]

Alternatively, any user going to a domain without .m will automatically be redirected to the mobile interface.

When a user loads one of the above urls the'll be presented with a screen layout that is appropriate for their device. Articles will be automatically reformatted but the home page will not. In order for a homepage to be mobile friendly it has to be configured with the appropriate selectors.

This page gives some information about how to make sure the mobile interface works best for your project.

How do I format a mobile homepage?
A more complete set of instructions in multiple languages is available at: Mobile homepage formatting.

For all language versions of Wikipedia and related Wikimedia projects, the mobile view of a home page requires some formatting to show content. This content can be "pulled" from the content of the desktop home page by using the appropriate css selectors. (By default, the only content that a user will see on their project homepage is search, license, and action control.)

Selectors
We currently support a predefined list of selectors and a global prefix. The mobile interface uses these selectors to create the various sections of the homepage automatically.

Predefined Selectors
An example of the usage of these CSS selectors 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 [//en.wikipedia.org/w/index.php?title=Main_Page&action=edit wikicode]).

Global Prefix
More generally, any selector that is prefixed with mf- will be added to the mobile main page for any project. Any title attributes set on these elements will be promoted into a heading before the section. A title attribute is optional.

Example:

would create a section named Wikimedia Blog within the corresponding div.

What do I do?
If you are non-techie, don't worry. You can still do this. If you are enthusiastic and want to help your project, this is all that you require. On your project's main page, e.g. this or this, simply search for   and add    as prefix &     as suffix (should show     once done). If you have picture of the day template on main page, you can add  &  tags before & after it, similarly for featured article template, enclose it within the tags  &  . These are the most common templates on most of the main pages of various projects. Likewise, there are some more codes given above, you can use them depending upon the features on your mainpage. If you want to display any other template/feature on the mobile homepage, goto More information below and contact developers.

N.B.: Main pages are quite often protected to prevent vandalism, hence you might not be able to edit them depending on your user status and page's protection level.

The easy way
Add  at the top of the wikitext and add   at the bottom. Refresh the mobile site. Now you can either adjust your styling to be mobile friendly or you can hide parts of the homepage by adding class="nomobile" to the elements you do not want to show.

Redirecting users
All redirects are now handled by our Varnish proxy, which allows us to use the WURFL db for all device detection.

More information
If you have a question, just ask Patrick Reilly or Tomasz Finc.

You can also talk to the developers in the IRC channel, via [mailto:mobile@wikipedia.org e-mail], and on Twitter

Development
Just pop into the IRC room. The code is available to anyone. Just get the repot and start hacking!


 * Report a new bug
 * List of known bugs