Formattage mobile de la page d'accueil

From MediaWiki.org
Jump to: navigation, search
This page is a translated version of the page Mobile Gateway/Mobile homepage formatting and the translation is 37% complete.

Outdated translations are marked like this.
Other languages:
العربية • ‎روچ کپتین بلوچی • ‎বাংলা • ‎dansk • ‎Deutsch • ‎English • ‎español • ‎suomi • ‎français • ‎interlingua • ‎Bahasa Indonesia • ‎italiano • ‎日本語 • ‎한국어 • ‎Kurdî • ‎Lëtzebuergesch • ‎lietuvių • ‎олык марий • ‎македонски • ‎မြန်မာဘာသာ • ‎polski • ‎پښتو • ‎português • ‎português do Brasil • ‎русский • ‎سنڌي • ‎svenska • ‎удмурт • ‎Tiếng Việt • ‎粵語 • ‎中文

Si la page d’accueil de votre projet Wikimedia n’a pas été formatée pour être vue depuis un mobile, et si vous êtes administrateur sur ce projet, veuillez lire les instructions suivantes.

Note : vous devez avoir les droits d'administrateur afin d'éditer la page d'accueil.

Étape 1

Choisissez d'abord les contenus adaptés pour la version mobile de votre page d'accueil.

Évaluez chaque élément de la version de bureau (par exemple, "Image du jour") en vous posant les questions :

  • sont ils populaires ?
  • sont ils mis à jour régulièrement ?
  • sont ils appropriés à la lecture rapide ?
  • s'adapteront-ils correctement l'écran d'un mobile ?

Lorsque vous avez fait vos choix, poursuivez à l'étape 2.

Étape 2

Vous devez vous connecter et avoir les droits d’administrateur pour effectuer les étapes suivantes. Sur la version de bureau de la page d’accueil, cliquez sur "Modifier" et recherchez les éléments que vous voulez inclure dans la version mobile.

Chacun des éléments que vous souhaitez inclure dans la version mobile, doit être identifié par un attribut id="mf-..." (ou "..." est un nom unique, significatif pour un humain). Nous les appelerons "sélecteurs mf". Une façon de le faire est d'encadrer les éléments voulus de balises div en mettant le sélecteur mf dans la balise comme ceci :

<div class="nomobile"> ... </div>

Qu’est-ce qui doit figurer entre les balises div ouvrantes et fermantes ? Probablement un modèle pour l’élément de la page considéré (par exemple, l'Image du jour).

Updating styles

Certain styles are not mobile friendly. For example any css rules which make use of fixed pixel size e.g. width, height, padding. If different style treatment is needed please use the Extension:TemplateStyles or port these styles to MediaWiki:Common.css or MediaWiki:Mobile.css.

Some tips on common problems are addressed @ Making MediaWiki Mobile Friendly.

Cliquez sur "Enregistrer".

C’est presque fini.

Troisième étape

Maintenant, allez sur une URL mobile qui est normalement de la forme code_langue.m.projet.org. Vous pouvez réduire la largeur de votre navigateur de bureau pour imiter un écran de mobile. Est-ce que ça rend bien ?

Si vous voulez faire des changements, retournez à la deuxième étape. Naviguez entre les étapes 2 et 3 jusqu’à ce que vous soyez satisfaits.

Et voila !

MFSpecialCaseMainPage

When MFSpecialCaseMainPage is enabled (which is disabled by default), it is possible to serve different content to mobile and desktop users. Use of this method is discouraged and deprecated as it only works on the `Main Page` and is a maintenance burden and should only be used as a stop-gap measure when transitioning your MediaWiki site to a mobile experience.

Les pages d’accueil de chaque version linguistique de Wikipédia et des autres projets sont diverses, il est donc impossible de présenter un exemple universel. Cependant, pour donner quelques idées de ce à quoi pourrait ressembler votre site, voici pour la version en allemand de Wikipédia : https://de.wikipedia.org/ Si vous cliquez sur l’onglet "voir la source" ("Quelltext anzeigen") à côté de "Lesen", vous pourrez voir le wikitexte et utiliser la fonction "Rechercher" de votre navigateur pour chercher les chaînes de caractères de la forme "mf-".

Dans ce cas, la balise div pour les sélecteurs mf sont des parties de plus gros objets de la page. Seulement quelqu’un habitué à manipuler la présentation de la page d’accueil doit comprendre ça en détails.

Maintenant allez sur : https://de.m.wikipedia.org/ La page en affichage mobile est visible. Les sections de contenus correspondant aux sélecteurs mf sont affichés dans la version mobile.

Deprecation steps for wikis using MFSpecialCaseMainPage

MobileFrontend is in the process of deprecating the code relating to main page special casing. If you have a wiki using it you'll want to stop using it immediately. If you have any questions please don't hesitate to use the talk page!

How can I tell if I'm using it?

If your main page contains "mf-" or "mp-" in the HTML markup, you are using it. You can check this by inspecting the HTML for your main page. If this is too technical, you can also check this by copying and pasting the wiki markup into your user namespace and visiting the page in mobile. If there is a visual difference between your main page and the page in your user namespace you are using main page special casing.

E.g. compare https://en.m.wikipedia.org/wiki/User:Jdlrobson/Main_page_formatting_test with the actual main page for English Wikipedia.

What can I do to fix this?

Assuming you do not want to do a big redesign and just want to retain the existing main page design, you can follow this guide.

Copy the main page markup into a sandbox e.g. a sub page of the user namespace. Now switch to mobile mode. Note, the mobile site can be viewed in your desktop browser, so if you can you may want to consider using the wikitext editor of the mobile site.

You'll need the TemplateStyles extension deployed on your wiki. You can see if it's installed on your wiki by visiting Special:Version. If it's not for whatever reason please request it.

Known problems are listed below:

1. Stop using tables

If your main page uses table's in any way, please remove them. There are many tutorials on the web for doing column layouts. Please put "responsive column layout" into your favorite search engine. If this is confusing, you'll probably want to seek help from a CSS expert!

2. Review any inline styles

Search for any instances of styles which make use of the css properties "width", "float", "padding" or "margin"

For example:

<div style="float: left; width: 200px;"

Move these into a TemplateStyle. Use a class and move the css declaration to css.

<div class="main-page-box"

Example CSS:

/* Scope your styles inside a media query. This means they will only apply on tablet or desktop.  */
@media all and ( min-width: 720px ) {
    .main-page-box {
        float: left;
        width: 200px;
    }
}

e.g. Example - note the pre tag is only included for example purposes - this should be put into a TemplateStyle.

3. Reskin for mobile

With the above steps applied your page should look no different on a desktop browser, but as you shrink the screen (horizontal width) to under 720px - the threshold you introduced in step 2 the styles should disappear. You'll want to add new styles (outside the media query you introduced in step 3). These styles will apply to mobile devices and will be overridden.

If there is any content in the page that you do not want to render in the mobile skin you should add the class "nomobile". e.g.

<div class="nomobile">This content should not show on the mobile site but it will show on the desktop site.</div>

4. Apply the new template

Copy and paste the sandbox page into your Main page. Refresh the browser and verify that it works as expected on both mobile and desktop.

5. Make a site request to turn off main page special casing

If your site is now no longer using the special page casing and your site appears in this config:

https://github.com/wikimedia/operations-mediawiki-config/blob/master/dblists/mobilemainpagelegacy.dblist

You'll want to let a Wikimedia site admin know that you are ready for main page special casing to be turned off. File a Phabricator ticket using this link that links to this web page and lists your wiki.

You'll be able to tell when this has been successful if you've been using the mp- prefixes as suddenly other content will display on your mobile site!

6. Remove any mobile specific ids.

i.e. any instance of the following:

id="mp-

These are not necessary any more. Previously these would choose which content to show on mobile, but now you have a new mobile first responsive design and have disabled main they will be ignored.

e.g. This example