Mobile Gateway/Mobile homepage formatting/fr

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 "" et recherchez les éléments que vous voulez inclure dans la version mobile.

Chacun des éléments que vous souhaitez exclure de la page doit être identifié par la classe nomobile ou inclus dans un élément où cette classe est présente.



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).

Mise à jour des styles
Certains styles ne sont pas adaptés aux mobiles. Par exemple une règle CSS quelconque utilisant une taille fixe en pixels par exemple width, height, padding. Si vous avez besoin de traiter différents styles, veuillez utiliser l'extension TemplateStyles ou porter ces styles dans MediaWiki:Common.css ou MediaWiki:Mobile.css.

Certains conseils pour les problèmes communs sont adressés à Rendre Mediwiki Mobile plus attrayant.

Cliquez sur "".

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 $wgMFSpecialCaseMainPage 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, is a maintenance burden and should only be used as a stop-gap measure when transitioning your MediaWiki site to a mobile experience. Sera supprimé en 2020.

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, les balises &lt;div> pour les sélecteurs mf sont des parties d'objets plus gros dans la page. Seulement quelqu’un de familier avec la présentation de la page d’accueil du projet comprendra ceci dans les 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.

Etapes d'obsolescence des wikis utilisant MFSpecialCaseMainPage
MobileFrontend est en train de rendre obsolète le code relatif à la casse spéciale de la page principale. Si vous avez un wiki qui l'utilise, vous voudrez cesser de l'utiliser immédiatement. Si vous avez des questions, n'hésitez pas à utiliser la page de discussion !

Comment savoir si je l'utilise ?
Pour les projets dont vous êtes utilisateur, veuillez appliquer la chaîne de requête sur votre page d'accueil pour mobile, et la comparer à la page d'accueil mais sans cette requête. Par exemple les utilisateurs de la Wikipedia anglaise peuvent comparer https://en.m.wikipedia.org/?mfnolegacytransform=1&debug=1 avec https://en.m.wikipedia.org/. Si les deux pages sont différentes, vous devez migrer le plus tôt possible.

Comment corriger cela ?
En supposant que vous ne souhaitiez pas effectuer une refonte complète et que vous souhaitiez simplement conserver la conception de la page principale existante, vous pouvez suivre ce guide.

Copiez le balisage de la page principale dans le bac à sable, par exemple dans une sous-page de l'espace de noms utilisateur. Passez maintenant en mode mobile. Remarquez que le site mobile peut être consulté dans votre navigateur de bureau, donc si vous le pouvez, vous pouvez envisager d'utiliser l'éditeur wikitext du site mobile.

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.

Pour ajouter des styles de modèles à une page, ajoutez la ligne suivante en haut du brouillon de votre nouvelle page :

You can now add CSS @media queries to your page by adding CSS inside Template:Main Page/styles.css to display different content to different device resolutions.

Vous pouvez appliquer la classe nomobile à tout élément que vous désirez encore voir masqué sur les mobiles. Dans certains cas, l'utilisation de cette classe est le moyen le plus simple de mettre à jour votre page.

Les problèmes connus sont listés ci-dessous :

1. Arrêtez d'utiliser les 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!

DivTable converter provides a way for you to convert a table HTML to divs. You should aim to put the associated CSS in MediaWiki:Common.css. This act alone should improve your rendering in mobile greatly.

2. Vérifiez tous les styles inline

Search for any instances of styles which make use of the css properties " ", " ", " " or " "

Par exemple :

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

Exemple de CSS :

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.

4. Appliquer le nouveau modèle

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:

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  prefixes as suddenly other content will display on your mobile site!

6. Supprimer tous les ID spécifiques de mobiles.

par exemple une instance parmi :

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.

par exemple Cet exemple

I don't have time! (Quick fix)
The quickest possible fix for your wiki might be to fix the design for Minerva only by forcing horizontally stacking at the trade off of impacting the small amount of desktop Minerva users. To see if the quick fix works for you add the following to your Main Page: and then inside Template:Main_Page/styles.css copy paste the following CSS: Please be aware that this is a quick and dirty fix, which may break more complex main pages (e.g. ones that use tables within tables), and it also doesn’t improve the current situation where the main page breaks on smaller desktop screens and wastes much space on larger mobile ones. If you really don’t have time, you can use this temporarily, but you should plan to really fix the mobile (and small-screen desktop) experience using the above size-dependent methods (or completely redesign the main page, of course). If you decide to go this way, you should make sure to test the resulting main page using mobile view.