Mobile Gateway/Mobile homepage formatting

If the main page (homepage) of your Wikimedia project is not showing any content when viewed on mobile devices and you're an administrator on that project, please follow the instructions listed below.

Soon, all Wikimedia projects will by default be displayed in mobile view from mobile devices. Users can switch to the desktop view, but it would be better to show appropriate content to mobile users with a mobile-friendly version of the homepage.

Please note: you must have administrator rights, and be logged in, in order to edit the homepage.

Step 1
First, decide what content makes sense on the mobile homepage. Take a look at the desktop version of the site and decide which elements of the main page you would like to include in the mobile version.

Evaluate the page elements 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. Go the desktop or standard view of the homepage. Open Edit 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 selector, in between div tags, like so:

...

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 and title of the selector are up to you, but they should be unique and descriptive.

Click Save page.

You are almost done.

Step 3
Now go to the mobile domain, which is typically lang.m.project.org. If your project doesn't have a mobile domain please contact the mobile team at. You can reduce the width of your 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 homepage of each language version of Wikipedia and all of the other Wikimedia projects are diverse, so it is impossible to present an example that applies universally. But to give some idea of how this might look on your site, here is the Serbian version of Wikipedia:

http://sr.wikipedia.org/

If you click on the View source ("Изворник") tab next to Read, 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://sr.m.wikipedia.org/

And 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 version of projects other than Wikipedia currently shows 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 not have this problem.