Mobile Gateway/Mobile homepage formatting

it

If the main page (homepage) of your Wikimedia project has not been formatted to be viewed on mobile devices, and you are an administrator of that project, please follow the instructions below.

Soon, all Wikimedia projects will be displayed by default in mobile view on mobile devices (excluding tablets), see the proposed timeline. If the homepage has not been formatted for a mobile view, mobile users will see no content. Therefore, it is important to select content from the desktop version of the homepage that will be suitable for the mobile view.

Please note: You must have administrator rights in order to edit the homepage.

Step 1
First, decide what content is suitable for the mobile homepage.

Evaluate the page elements in the desktop version (e.g. "Picture of the Day") by asking:


 * how popular are they?
 * are they updated regularly?
 * are they suitable for quick reading?
 * will they fit nicely in a mobile screen?

Once you decide which elements make sense, proceed to Step 2.

Step 2
You must be logged in and have administrative rights to do the following. On the desktop view of the homepage, click and find the elements you want to include in the mobile view.

For each element, you need to include a brief instruction in the wikitext, called a "mf selector", in between div tags, like so:

Please note: the letters ABC should be replaced with a title that is unique.

What goes in between the opening and closing div tags? It will most likely be a template for the page element, such as "Picture of the Day". The id of the selector can be whatever you choose, but they should be unique and descriptive.

Click "".

(Please note that there are older mobile selectors in the format "mp-ABC," which were adopted by a number of sites in the past. Those will continue to work, but for new formatting, the mf selectors are recommended.)

You are almost done.

Step 3
Now go to the mobile URL, which is typically languagecode.m.project.org. If your project doesn't have a mobile URL, please contact the mobile team at. You can reduce the width of your desktop browser to mimic a mobile screen. How does the page look?

If you want to make changes, go back to Step 2. Keep going from Step 2 to Step 3 until you are satisfied.

That's it!

An example
The homepages of each language version of Wikipedia and all of the other Wikimedia projects are diverse, so it is impossible to present an universal example. Nevertheless, to give some idea of how this might look on your site, here is the German version of Wikipedia: http://de.wikipedia.org/

If you click on the View source ("Quelltext anzeigen") tab next to "Lesen", you can see the wikitext and using your browser's Find feature, look for the string, "mf-".

In this case, the div tag for the mf selectors are part of larger page objects. Only someone familiar with that project's homepage formatting will understand this in detail.

Now go to: http://de.m.wikipedia.org/

The resulting mobile page will be visible. The sections of content corresponding to the mf selectors are rendered in the mobile view.

Please note
The English versions of projects other than Wikipedia currently show the Wikipedia logo instead of the project name. This is a known bug and will be fixed shortly. The language versions other than English should show the name of the project in the language of that project.

There is also a bug about the mobile version accessed with HTTPS using Wikipedia's SSL certificate instead of specific project domain certificate.