Recommandations pour afficher facilement les articles des wikis Wikimedia sur les appareils mobiles
 | Les recommendations ont été faites et sont maintenues par l'Equipe web. Elles sont basées sur des données, des tendances technologiques et nos capacités. En conséquence elles évoluent et peuvent changer. |
Ce document fournit des conseils basés sur l'expérience, sur la meilleure façon de servir les utilisateurs mobiles en tant qu'éditeurs de wiki MediaWiki. Il est compilé par les développeurs d'applications mobiles et de sites web pour mobiles qui ont jusqu'à 10 ans d'expérience de travail avec le contenu MediaWiki. C'est un guide pratique sur certains points du Contenu adapté aux mobiles de l'expérience de lecture.
Sur les wikis Wikimedia, plus de 50% du trafic utilise le site web pour mobiles et dans plusieurs régions c'est le moyen d'accès principal pour accéder à notre contenu. Malgré cela, beaucoup de nos articles n'ont pas le format adapté aux mobiles comme ils pourraient l'avoir.
Nous recommandons l'utilisation d'une catégorie de maintenance de modèle telle que Modèles non adaptés aux mobiles pour aider à marquer les modèmes qui posent problème sur mobile et pour partager la charge des corrections.
Meilleures pratiques
Inclure les images et les tableaux de grande taille
Si une image ou un tableau dépassent 500px vous devez en vérifier l'affichage sur mobile ou les écrans plus petits.
Si l'image doit être réduite, essayez d'utiliser le modèle TemplateStyles pour définir ce comportement.
Si l'image est à déplacer horizontalement vous devrez utiliser la classe noresize pour l'image pour désactiver les optimisations Minerva ainsi que pour fournir un élément conteneur avec un ensemble de défilement du débordement.
Voir Image panoramique en tant qu'exemple.
Oui
<div style="margin:0 auto; overflow:scroll; width:auto; max-width:100%">[[File:Brooklyn_Skyline_(9910358874).jpg|1800px|class=noresize]]</div>
Non
[[Image:Panorama.jpg|1800px]]
Utiliser dans les modèles le nom standardisé des classes dans le balisage HTML pour les composants dans les projets
La sortie de en:Template:Mbox est similaire à en:Template:Ambox (https://fr.wiktionary.org/wiki/Modèle:ambox bannière pour page d’articles de l'espace de nom principal) néanmoins les balisage HTML est totalement différent.
Le site web mobile s'appuie sur la description du contenu dans la même langue. Pour rendre l'expérience mobile cohérente dans différentes langues, il est important d'utiliser un langage sémantique similaire.
Etant donné que beaucoup de projets font un copier/coller des modèles à partir de la Wikipedia anglophone, la plupart des noms standard sont basés sur l'anglais, mais nous sommes ouverts à toute proposition pour changer cela et refléter les classes les plus largement utilisées. En particulier les noms de bannière doivent avoir une meilleure langue définie.
- .infobox - composant qui résume des faits (comme date d'anniversaire = 25 décembre 2018; nom = Père Noël Junior) par exemple en:Template:Infobox
- .dablink - notice d'homonymie apparaissant au début de la page.
- .hatnote - apparaît en haut de la page pour décrire les redirections possibles ou les articles dont le nom est similaire par exemple en:Template:Hatnote
- .ambox - décrit un problème avec la page; par exemple en:Template:Ambox
- .ambox .mbox-image - associe une icône au problème; par exemple en:Template:Ambox
- .ambox .mbox-text-span - décrit le problème (et non la correction)
- .ambox .hide-when-compact - décrit la correction du problème.
- .navigation-box or .navbox - décrit une boîte qui contient différents liens de navigation. Par exemple, des liens vers des sites frères. Notez que le premier est supprimé sur mobile, donc utilisez la classe de la boîte de navigation là où c'est possible pour que le contenu soit compatible avec les mobiles.
- .side-box pour les boîtes qui apparaisent à côté des articles par exemple les boîtes de citation.
- .metadata pour les boîtes figurant dans l'article qui ne correspondent pas aux critères ci-dessus.
Exemple correct
<!-- classe de la boîte d'information sémantique ajoutée par les [[:mw:Recommendations_for_mobile_friendly_articles|recommandations]] pour la compatibilité des articles avec les mobiles -->
<div class="my-infobox-like-component infobox"></div>
{{Infobox}}
Mauvais exemple
<div class="my-infobox-like-component"></div>
Ne placez pas les boîtes d'information ni les images au début du wikicode si possible
Le fait d'ajouter une boîte d'information en premier dans un article aura un impact sur les performances et la lisibilité de l'article sur mobile. Actuellement, le logiciel pour mobile (Extension:MobileFrontend) gère ce problème, mais dans certains cas, il échoue, alors si possible, utilisez toujours cette disposition ou sinon, veuillez vérifier que l'ordre a été corrigé sur mobile en testant vos modifications sur un appareil mobile réel.
En termes de lisibilité, la mise en place d'une infobox en premier expose d'abord les lecteurs à des détails sur un sujet avant de rassembler le contexte ou à introduire ce sujet, ce qui peut être souvent perturbant. Ce problème était particulièrement flagrant avec les sujets pour lesquels les utilisateurs ne sont pas familiers et où ils doivent parcourir toute la boîte d'information pour confirmer qu'ils lisent l'article correct. Nous avons mis en œuvre les modifications pour créer une cohérence entre les sites web pour mobiles et ceux pour bureau (pour ces derniers, le premier paragraphe a également un placement primaire), ainsi que pour exposer les utilisateurs au sujet de l'article avant de leur demander de parcourir la boîte d'information.
Du point de vue des performances, le fait de déplacer les boîtes d'information vers une position secondaire, améliore les performances du site en réduisant de manière significative le temps moyen de chargement des pages, ce qui permet aux utilisateurs de voir le contenu sur la page plus rapidement qu'avant.
Information supplémentaire : Lecture/Web/Projets/Déplacement du paragraphe d'entête
Mauvais exemple
{{Infobox}}
Premier paragraphe de mon article
Exemple correct
Premier paragraphe de mon article
{{Infobox}}
Métadonnées (coordonnées comprises) doivent être positionnées en bas de l'article
Avec la version pour bureau, les modèles de coordonnées (modèle Coord) apparaissent dans le coin supérieur droit de l'article, sur mobile où l'espace n'est pas disponible et le haut de l'article est limité, cela n'est pas pratique. En les positionnant ailleurs dans le corps de l'article par exemple tout en bas, cela permet d'avoir davantage d'options sur mobile tout en permettant encore le positionnement sur mobile.
Il y a d'autres avantages à positionner les métadonnées à la fin - cela aide les algorithmes qui utilisent les Aperçus de page et le site web mobile pour identifier le premier paragraphe ce qui est important pour résumer les articles.
Mauvais exemple
{{Coord|35|N|136|E|type:country_region:JP|display=title}}
Premier paragraphe de mon article
Exemple correct
Le premier paragraphe de mon article
....
....
....
{{Coord|35|N|136|E|type:country_region:JP|display=title}}
Utiliser un ordre cohérent pour les notes chapeau, les ambox et les modèles des boîtes d'information
Dans la version pour mobiles, le contenu peut être mis en forme de manière différente mais il ne peut être déplacé. En regroupant les éléments par type, vous aidez le site mobile et les algorithmes desquels il dépend.
Sur mobile, nous nous attendons à ce que tout composant décrit comme étant des notes chapeau (c'est à dire avec Template:Hatnote) soit suivi de ambox (c'est à dire des problèmes de page Template:Ambox) et qu'il apparaisse tout au début de la page. Les boîtes d'information et autres contenus doivent apparaître après eux.
Si cet ordre n'est pas respecté, le site mobile ne peut pas optimiser le contenu et le contenu ne peut pas être optimisé pour le mobile.
Mauvais exemple
{{infobox}} <!-- .infobox -->
{{page issue}} <!-- .ambox -->
{{disambiguation}} <!-- .hatnote -->
{{page issue}} <!-- .ambox -->
Exemple correct
{{disambiguation}} <!-- .hatnote -->
{{page issue}} <!-- .ambox -->
{{page issue}} <!-- .ambox -->
{{infobox}} <!-- .infobox (table or div) -->
Les styles en ligne ne doivent pas utiliser les propriétés qui modifient la taille et la position
Les propriétés CSS incluant la largeur, le flottement et la hauteur posent problème sur les mobiles.
Le padding, la bordure et la marge peuvent poser problème si vous utilisez des grandes valeurs.
En règle générale, si votre CSS utilise une propriété avec une valeur en pixels de 100px ou supérieure, vous devez tester votre travail sur mobile.
Idéalement tout ce qui a rapport à ces propriétés doit utiliser des classes et Extension:TemplateStyles et les requêtes de média, et fournir deux traitements différents, pour mobile et pour ordinateur de bureau.
Mauvais exemple
<div style="width: 700px; float: left; padding: 5px; border: solid 1px black;">votre texte...</div>
Exemple correct
<templatestyles src="..." />
<div class="mybox">votre texte...</div>
.mybox { width: 100%; padding: 5px; border: solid 1px black; }
@media all and ( min-width: 720px ) {
.mybox { width: 700px; float: left; }
}
Evitez les tableaux sauf pour les données
Si vous utilisez les tables pour créer un élément de présentation, ne le faites plus. L'optimisation des tableaux sur mobile est un grand défi et ces éléments de présentation sont généralement contredits suite aux optimisations que nous avons faites pour les mobiles. A la place, essayez de convertir vos affichages basés sur des tableaux en affichages basés sur des div.
Généralement, à mois d'avoir trouvé une meilleure solution, nous sommes au regret de masquer ces éléments sur mobile. Les boîtes de navigation étant l'exemple par excellence.
Tables imbriquées
Si vous avez réellement besoin d'utiliser les tables, notez qu'elles sont réalisée en architecture dynamique ou flex dans la version mobile.
Assurez-vous que votre page d'accueil est compatible avec les mobiles
Il y en a tant à dire ici sur le sujet qu'un article entier lui est consacré.
Les modèles doivent utiliser un élément racine unique avec une classe ensible CSS
Le contenu de Wikipedia est largement destructuré. Un moyen de fournir des conseils de présentation pour une analyse et un affichage optimal est de s'assurer que les modèles ne disposent que d'un seul élément HTML le plus extérieur et que cet élément dispose d'un nom de classe CSS unique partagé entre les langues du wiki. Cela peut aider considérablement des logiciels tels que le site web mobile, le Service de contenu et les applications natives Android et iOS pour identifier correctement le contenu.
Mauvais exemple
<div>foo</div>
<div>bar</div>
Exemple correct
<div class=FoobarTemplate>
<div>foo</div>
<div>bar</div>
</div>
Fusionner les sorties multiples dans un même modèle
Lorsque qu'un article contient plusieurs versions, utilisez un seul modèle de version pour les réduire. Les versions peuvent occuper une place importante sur mobile et lorsque qu'elles sont réduites, vous pouvez utiliser davantage d'options avec les habillages adaptés aux mobiles.
En particulier c'est un problème lorsque les articles sont proposés à la suppression.
Mauvais exemple
{{fringe|date=June 2018}}
{{rewrite|date=April 2018}}
{{Proposed deletion/dated
|concern = Plagiat évident
|timestamp = 20180829061154
|help =
}}
{{Unreferenced|date=December 2009}}
Exemple correct
{{multiple issues|
{{fringe|date=June 2018}}
{{rewrite|date=April 2018}}
}}
{{Deletion notice with multiple_issues|
{{Proposed deletion/dated
|concern = Plagiat évident
|timestamp = 20180829061154
|help =
}}
|
{{Unreferenced|date=December 2009}}
}}
Ne préjugez pas de la position des images, des boîtes d'information et des tables dans le texte
Faites attention dans vos suppositions concernant la présentation d'un article. Alors que deux images peuvent être flottantes et positionnées d'une certaine manière sur un ordinateur de bureau, cela ne signifie pas nécessairement qu'il en sera de même avec un appareil mobile. Donc évitez les phrases telles que « le tableau de droite montre... » ou « l'image de gauche montre que... ».
Il est important de penser que l'article doit être fluide et qu'il pourra être modifié.
Si la référence à une image est essentielle, considérez un empilement vertical qui est l'alternative la plus sûre.
Mauvais exemple
<div>
<div class="tsingle" style="float:left;margin:1px;width:102px;max-width:102px">
[[File:Felipe Massa]]
</div>
<div class="tsingle" style="float:left;margin:1px;width:102px;max-width:102px"><
[[File:Sergey Sirotkin]]
</div>
<div class="thumb-caption">Felipe Massa (à gauche) est à gauche de Sergey Sirotkin (à droite)</div>
</div>
Exemple correct
<div>
<div class="tsingle" style="float:left;margin:1px;width:102px;max-width:102px">
[[File:Felipe Massa]]
</div>
<div class="tsingle" style="float:left;margin:1px;width:102px;max-width:102px"><
[[File:Sergey Sirotkin]]
</div>
<div class="thumb-caption">Felipe Massa (en haut) est au dessus de Sergey Sirotkin (en bas)</div>
</div>
Limiter le nombre d'images sur une page
Parce que le site mobile charge lentement les images, les articles contenant un grand nombre d'images dépasseront le délai de chargement de la page sur mobile.
Vous pouvez déterminer le nombre d'images dans une page en utilisant une console de développement JavaScript et en exécutant :
$( 'img' ).length
Idéalement, une page ne doit pas contenir plus de 100 images (quelque soit leur petite taille). Notez que si vous avez plus de 10 000 images sur votre page, elle ne sera pas accessible sur mobile.
Dans le cas de tableaux vous seriez tenté d'utiliser les émojis ou les caractères Unicode.
Mauvais exemple
| Rang | Article | Vues | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | A | 
|
|
|
|
|
|
|
3 895 581 597 | |||
| 2 | B |
|
|
|
|
|
|
|
62 210 344 |
Exemple correct
| Rang | Article | Vues | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | A | 🅱️ | 🅱️ | 🅱️ | 🅱️ | 🅱️ | 🅱️ | 🅱️ | 3 895 581 597 | |||
| 2 | B | 🅱️ | 🅱️ | 🅱️ | 🅱️ | 🅱️ | 🅱️ | 🅱️ | 62 210 344 |
Rendre les problèmes de page (modèles ambox) adaptaples aux mobiles
Plusieurs règles sont à suivre afin de rendre agréable l'affichage des pages sur mobile.
Utiliser les classes ambox et mbox-text à la place d'un tableau
Assurez-vous que la classe ambox est présente sur l'élément de plus haut niveau du problème de la page.
De préférence l'élément doit être un div, auquel cas la partie texte de l'élément doit avoir la classe mbox-text .
Utiliser les classes ambox prises en charge pour clarifier la sévérité
Pour la compatibilité avec l'habillage Minerva, qui va écrire ces modèles pour comprendre les méta-données impliquées par ces classes, assurez-vous que les images ont la classe .mbox-image (ou sont incluses dans un élément avec la classe mbox-image).
Vous pouvez ajouter des classes supplémentaires (en dessous) pour vous assurer que la version est attachée au niveau de sévérité correct.
| But | Classe à utiliser |
|---|---|
| Point de vue | ambox-POV ou mobile-issue-pov
|
| Renommage / fusion | ambox-move ou mobile-issue-move
|
| Problème de sévérité moyenne | ambox-content ou mobile-issue-severity-medium
|
| Problème de forte sévérité | ambox-serious ou mobile-issue-severity-high
|
| Problème de faible sévérité | ambox-style ou mobile-issue-severity-low
|
Mauvais exemple
<div class="ambox custom-class-issue-icon-POV">
<div class="ambox-image">[[File:Commons-emblem-issue.svg]]</div>
</div>
Exemple correct
<div class="ambox custom-class-issue-icon-POV ambox-POV">
<div class="ambox-image mbox-image">[[File:Commons-emblem-issue.svg]]</div>
</div>
S'il est présent (et les éditeurs le croient), Minerva peut utiliser cela pour choisir l'icône appropriée.
Limiter la sortie de page à deux lignes de texte
Un texte de plus de deux lignes doit être inclus dans un élément avec la classe hide-when-compact.
Mauvais exemple
<table class="ambox">
<tr>
<td class="mbox-text">
<b>Questa voce sull'argomento guerra è <a href="/wiki/Aiuto:Voci_da_aiutare" title="Aiuto:Voci da aiutare">da aiutare</a>.</b>
<div style="font-size:90%;">
<b>Motivo</b>: <i>manca la contestualizzazione dell'argomento, non si riesce a capire cosa sia. Mancano fonti e bisogna verificare l'enciclopedicità.</i>
</div>
</td>
</tr>
</table>
Exemple correct (table version)
<table class="ambox">
<tr>
<td class="mbox-text">
<b>Questa voce sull'argomento guerra è <a href="/wiki/Aiuto:Voci_da_aiutare" title="Aiuto:Voci da aiutare">da aiutare</a>.</b>
<div style="font-size:90%;" class="hide-when-compact">
<b>Motivo</b>: <i>manca la contestualizzazione dell'argomento, non si riesce a capire cosa sia. Mancano fonti e bisogna verificare l'enciclopedicità.</i>
</div>
</td>
</tr>
</table>
Good example (div version)
<div class="ambox">
<div class="mbox-text">
<b>Questa voce sull'argomento guerra è <a href="/wiki/Aiuto:Voci_da_aiutare" title="Aiuto:Voci da aiutare">da aiutare</a>.</b>
<div style="font-size:90%;" class="hide-when-compact">
<b>Motivo</b>: <i>manca la contestualizzazione dell'argomento, non si riesce a capire cosa sia. Mancano fonti e bisogna verificare l'enciclopedicità.</i>
</div>
</div>
</div>
Marquer la portion de texte d'un problème
Étant donné que les problèmes de page peuvent contenir plusieurs éléments, images et méta-données, il est vraiment important d'aider nos clients à identifier quelle partie du modèle explique le problème.
Pour cette tâche, la plupart des projets utilisent une des classes mbox-text-div ou mbox-text-span (qui sont des boîtes de texte). Cela aide à réduire le désordre avec les résolutions des mobiles et à mettre en valeur les parties clé du message.
Mauvais exemple
<div class="ambox">
<div class="mbox-text">
<div class="mbox-text-span">
This page has an issue.
<div class="hide-when-compact">This is how you fix the issue if you didn't know how.</div>
</div>
</div>
<div>
Did you know that this is a wiki that anyone can edit? For general advice on editing take a look at the
<a>guidelines page</a>!
</div>
</div>
Exemple correct
<div class="ambox">
<div class="mbox-text-div"><div class="mbox-text-span">
This page has an issue.
<div class="hide-when-compact">This is how you fix the issue if you didn't know how.</div>
</div></div>
<div>
Did you know that this is a wiki that anyone can edit? For general advice on editing take a look at the
<a>guidelines page</a>!
</div>
</div>
Ne placez aucun lien dans le titre des sections
Sur mobile, les liens vers les titres de section sont utilisés pour décomposer / étendre les sections. L'utilisation de liens dans le titre des sections est donc déconseillé. Lorsque ces liens sont essentiels, il est conseillé aux éditeurs de désactiver le repli de section sur la page en plaçant le contenu entier dans un élément DIV.
Mauvais exemple
== Link without heading ==
Text.
== [[Agriculture]] == <!-- lien dans le titre -->
Text about agriculture.
Exemple correct
<div><!-- cette page utilise des liens dans les titres, donc un élément conteneur est utilisé pour désactiver le repli de la section sur mobile -->
== Link without heading ==
Text.
== [[Agriculture]] == <!-- lien dans le titre -->
Text about agriculture.
</div>
Boîtes d'information
Ne repliez pas les boîtes d'information
Un modèle ou une erreur commune est d'inclure la boîte d'information soit en utilisant incorrectement du wikicode ou intentionnellement des balises HTML. Le problème avec ceci est que cela rend difficile d'appliquer les optimisations pour mobile puisque les boîtes d'information ne peuvent pas être identifiées correctement. Si vous devez les inclure, utilisez la classe infobox-container .
Mauvais exemple
:{{Infobox record label}}list item
''{{Infobox record label}} be bold!''
[[File:Photo_of_person|thumb|
{{Infobox person
| name = Person
}}
]]
<div style="float: right">{{Infobox}}</div>
Exemple correct
{{Infobox record label}}
:list item
{{Infobox record label}} ''be bold!''
{{Infobox person
| name = Person
| image = File:Photo_of_person
}}
<div style="float: right" class="infobox-container">{{Infobox}}</div>
Ne remettez pas en forme les boîtes d'information dans MediaWiki:Mobile.css
Alors que les boîtes d'information apparaissent sur beaucoup d'articles, elles ne se trouvent pas partout. En conséquence il vaut mieux inclure les styles pour la mise en forme des boîtes d'information en utilisant Extension:TemplateStyles.
Utiliser MediaWiki:Mobile.css n'est pas du tout recommandé car cela peut résulter en un décalage cumulatif de l'affichage. Cela est dû à Mobile.css qui charge via JavaScript, à la différence des versions de bureau et ne bloque pas le rendu.
Mauvais exemple
Template:InfoboxExample:
<div class="infobox">
<h1>Infobox heading</h1>
</div>
MediaWiki:Mobile.css:
.infobox h1 { font-size: 24px; }
Exemple correct
Template:InfoboxExample:
<div class="infobox">
<h1 style="font-size: 24px;">Infobox heading</h1>
</div>
OU Template:InfoboxExample:
<templatestyles src="InfoboxExample/styles.css" />
<div class="infobox">
<h1>Infobox heading</h1>
</div>
Template:InfoboxExample/styles.css
.infobox h1 { font-size: 24px; }