Formattage de la page d'accueil pour mobile

From MediaWiki.org
Jump to navigation Jump to search
This page is a translated version of the page Mobile Gateway/Mobile homepage formatting and the translation is 100% complete.
Other languages:
Bahasa Indonesia • ‎Deutsch • ‎English • ‎Lëtzebuergesch • ‎Tiếng Việt • ‎dansk • ‎español • ‎français • ‎interlingua • ‎italiano • ‎kurdî • ‎lietuvių • ‎magyar • ‎polski • ‎suomi • ‎svenska • ‎български • ‎македонски • ‎олык марий • ‎русский • ‎удмурт • ‎العربية • ‎روچ کپتین بلوچی • ‎سنڌي • ‎فارسی • ‎پښتو • ‎বাংলা • ‎မြန်မာဘာသာ • ‎中文 • ‎日本語 • ‎粵語 • ‎한국어

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.

En général vous devez avoir les droits d'administrateur pour pouvoir modifier 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 suivantes :

  • 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 le choix des éléments à garder, poursuivez à l'étape 2.

Étape 2

Vous devez être connecté 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 exclure de la page doit être identifié par la classe nomobile ou inclus dans un élément où cette classe est présente.

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

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 telle que 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 donnés à la page Rendre MediaWiki pour mobile plus convivial .

Cliquez sur Enregistrer .

C’est presque fini.

Étape 3

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

Lorsque $wgMFSpecialCaseMainPage est activé (ce qui n'est pas le cas par défaut), il est possible de servir différents contenus aux utilisateurs de mobiles et de bureaux. L'utilisation de cette méthode n'est pas recommandée et elle est obsolète car elle ne fonctionne que sur la page d'accueil; elle devient un fardeau pour la maintenance et ne doit être utilisée que comme une mesure provisoire lors du passage à la version mobile de votre site MediaWiki. Elle sera supprimée 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 un exemple 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 <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 ?mfnolegacytransform=1&debug=1 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.

Il faudra que l'extension TemplateStyles soit déployée sur votre wiki. Vous pouvez vérifier si elle est installée sur votre wiki en ouvrant Special:Version. Si ce n'est pas le cas et quelle qu'en soit la raison, demandez-la.

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

<templatestyles src="Template:Main Page/styles.css" />

Vous pouvez maintenant ajouter CSS @media queries à votre page en ajoutant le CSS dans Template:Main Page/styles.css pour afficher différents contenus à différentes résolutions d'écran.

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

Si votre page principale utilise des tableaux de quelque manière que ce soit, veuillez les supprimer. Il existe de nombreux didacticiels sur le Web pour la mise en page des colonnes. Entrez responsive column layout dans votre moteur de recherche préféré. Si cela reste flou pour vous, vous voudrez probablement demander l'aide à un expert CSS !

Le convertisseur DivTable vous donne une manière de convertir une table HTML en éléments <div>. Vous devez mettre le CSS associé dans MediaWiki:Common.css. Cette seule action doit améliorer de beaucoup, votre affichage sur mobile.

2. Vérifiez tous les styles inline

Recherche toutes les instances de styles qui utilisent les propriétés CSS width, float, padding ou margin

Par exemple :

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

Déplacer ceci vers un TemplateStyle. Utilisez une classe et insérez les déclarations CSS dans le fichier.

<div class="main-page-box"

Exemple de CSS :

/* Appliquez vos styles dans une requête multimédia. Cela signifie qu'ils ne s'appliqueront que sur tablette ou un ordinateur de bureau.  */
@media all and ( min-width: 720px ) {
    .main-page-box {
        float: left;
        width: 200px;
    }
}

par exemple Exemple - notez que la balise <pre> n'est inclue que pour l'exemple - ceci doit être mis dans un TemplateStyle.

3. Reconfigurez l'habillage pour les mobiles

Avec les étapes ci-dessus appliquées, votre page ne devrait pas être différente sur un navigateur de bureau, mais lorsque vous réduisez l'écran (largeur horizontale) à moins de 720 pixels - le seuil que vous avez introduit à l'étape 2, les styles devraient disparaître. Vous souhaiterez ajouter de nouveaux styles (en dehors de la requête multimédia que vous avez introduite à l'étape 3). Ces styles s'appliqueront aux appareils mobiles et seront réécrasés.

S'il y a du contenu sur la page que vous ne voulez pas voir dans l'habillage mobile, vous devez ajouter la classe nomobile par exemple :

<div class="nomobile">Le contenu suivant ne sera pas affiché sur le site pour mobile mais sera affiché sur le site pour bureau.</div>

4. Appliquer le nouveau modèle

Copiez-collez la page du bac à sable dans votre page d'accueil. Rafraichisser le navigateur et vérifiez qu'il fonctionne comme vous le voulez, à la fois sur le mobile et sur l'ordinateur de bureau.

5. Faites une requête de site pour annuler la casse spéciale de la page d'accueil

Maintenant si votre site n'utilise plus la casse spéciale de page et qu'il apparaît dans cette configuration :

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

Si vous souhaitez informer un administrateur de site Wikimedia que vous êtes prêt à désactiver la casse spéciale, faites un ticket Phabricator en utilisant ce lien qui renvoie à cette page web et répertorie votre wiki.

Vous pourrez dire que cela aura réussi quand vous aurez utilisé les préfixes mp- en même temps que d'autres contenus se seront affichés sur votre site mobile !

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

par exemple une instance parmi :

id="mp-

Cela n'est plus nécessaire. Auparavant, ceux-ci choisissaient le contenu à afficher sur mobile, mais maintenant vous avez une nouvelle architecture réactive pour mobile et vous avez désactivé l' accueil, ils seront ignorés.

par exemple Cet exemple

Correctif rapide (et sommaire)

Avertissement Avertissement : inutile de vous rappeler de tester ceci d'abord dans un endroit sûr tel qu'un bac à sable avant de l'appliquer partout. Bien que ceci puisse fonctionner comme solution à court terme, il n'est pas conseillé de l'adopter pour le long terme.

La solution la plus rapide possible pour votre wiki pourrait être de corriger la conception de Minerva uniquement en forçant l'alignement horizontal au compromis d'avoir un impact sur la petite quantité d'utilisateurs de Minerva de bureau.

Pour voir si la solution rapide fonctionne pour vous, ajoutez ce qui suit à votre page d'accueil :

<templatestyles src="Template:Main Page/styles.css" />

ensuite dans Template:Main_Page/styles.css copiez-collez le CSS suivant :

body.skin-minerva table,
body.skin-minerva tr,
body.skin-minerva td,
body.skin-minerva tbody {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box;
}

Veuillez noter qu'il s'agit d'un correctif rapide et sale, qui peut casser des pages d'accueil plus complexes (par exemple celles qui utilisent des tableaux dans des tableaux), et cela n'améliore pas la situation actuelle où la page principale ne fonctionne plus sur les écrans de bureau plus petits et gaspille beaucoup d'espace sur les écrans plus grands des mobiles. Si vous n'avez vraiment pas le temps, vous pouvez l'utiliser temporairement, mais vous devez prévoir de vraiment de réparer l'expérience sur mobile (et les petits écrans de bureau) en utilisant les méthodes ci-dessus en fonction de la taille (ou repenser complètement la page principale, bien sûr). Si vous décidez d'adopter ce choix, vous devez vous assurer d'avoir testé le résultat de la page d'accueil en utilisant l'affichage pour mobiles.