Mobile Projects/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.
Contents |
[edit] 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:
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.
[edit] How do I format a mobile homepage?
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.)
[edit] 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.
[edit] Predefined Selectors
| CSS id | section |
|---|---|
| #mp-tfa | Featured article |
| #mp-itn | In the news |
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 wikicode).
[edit] Global Prefix
More generally, any selector that is prefixed with mf- will be added to the mobile main page for any project. All selectors must have a corresponding title.
For instance:
<div id="mf-blog" title="Wikimedia Blog">
would create a section named Wikimedia Blog within the corresponding div.
[edit] What do I do?
If you are non-techie, don't worry. You can still do this. If you are enthu 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 {{Index}} and add <div id="mf-index"> as prefix & </div> as suffix (should show <div id="mf-index">{{index}}</div> once done). If you have picture of the day template on main page, you can add <div id="mf-featuredpicture"> & </div> tags before & after it, similarly for featured article template, enclose it within the tags <div id="mp-tfa"> & </div>. 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.
[edit] Redirecting users
All redirects are now handled by our Varnish proxy, which allows us to use the WURFL db for all device detection.
[edit] 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 e-mail, and on Twitter
[edit] Development
Just pop into the IRC room. The code is available to anyone. Just get the repot and start hacking!
