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.
We recommend the usage of a template maintenance category e.g., w:Category:Templates that are not mobile friendly to help flag problematic templates on mobile and share the burden of fixing them.
Meilleures pratiques
Wrap wide images and tables
If an image or table is larger than 500px consider how it will display on mobile or smaller monitors.
If the image should scale down, consider the use of TemplateStyles to define that behaviour.
If the image should become horizontally scrollable you will need to use a noresize class on the image to disable Minerva optimisations as well as provide a containing element with overflow scrolling set.
See w:Template:Wide image as an example.
Bad example
[[Image:Panorama.jpg|1800px]]
Good example
<div style="margin:0 auto;overflow:scroll;width:auto;max-width:100%">[[File:Brooklyn_Skyline_(9910358874).jpg|1800px|class=noresize]]</div>
Utiliser dans les modèles le nom standardisé des classes dans le balisage HTML pour les composants dans les projets
La sortie de cs:Šablona:Cedule 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.
The mobile website relies on describing content with the same language. To make the mobile experience consistent across different languages it's important to use a similar semantic language.
Given many projects copy and paste templates from English Wikipedia most "standard" names are English-centric, but we're very much open to change this to reflect the most widely used classes. En particulier les noms de bannière doivent avoir une meilleure langue définie.
- .infobox - a component that summarises facts (e.g. date of birth = 25th December 2018; name = Santa Claus Junior) e.g. en:Template:Infobox
- .dablink - disambiguation notice that appears at the top of the page.
- .hatnote - appears at top of the page describing possible redirects or similarly named articles e.g. 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 - describes a box that contains various navigation links. For example sister site links. Note, the former is removed from mobile, so use the navigation-box class where possible for content that you know to be mobile friendly.
- .side-box for boxes that appear at the sides of articles e.g. quote boxes.
- .metadata for boxes that appear in the article that do not fit the criteria above.
Mauvais exemple
Template:Infobox
<div class="my-infobox-like-component"></div>
Exemple correct
<!-- semantic infobox class added per [[:mw:Recommendations_for_mobile_friendly_articles]] for mobile compatibility -->
<div class="my-infobox-like-component infobox"></div>
{{Infobox}}
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. This issue was particularly heightened for topics unfamiliar to users, where they would be required to scroll through the content of the infobox to confirm whether they are reading the correct article. We implemented the change to create consistency between the mobile and desktop websites (on desktop, the first paragraph also has primary placement), as well as to expose users to the subject of the article prior to requiring them to scroll through the infobox.
From a performance perspective, shifting infoboxes to a secondary position, improves the performance of the site by significantly decreasing the average page load time, allowing users to see the content on the page faster than before.
Information supplémentaire : Reading/Web/Projects/Lead_Paragraph_Move
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
On desktop, coordinate templates (Coord template) tend to appear in the top right corner of the article, on mobile where space is not available and the top of the article is limited, this is not practical. Positioning them elsewhere in the article body e.g. bottom would allow more options for mobile while still allowing the position on mobile.
There are other benefits for positioning meta data at the bottom - it helps algorithms that power Page previews and the mobile web site to identify the first paragraph which is important for summarizing 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
In mobile, content can be styled differently but it cannot be moved. It helps the mobile site and algorithms that it depends on if elements are grouped together by type.
In mobile we expect any components that are described as hatnotes (e.g. Template:Hatnote) to be followed by ambox (e.g. Template:Ambox page issues) and to appear at the very top of the page. Infoboxes and other content should appear below these.
If this order is not respected, the mobile site cannot optimise content and content cannot be optimised for 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
CSS properties including width, float, height are problematic on mobile.
Padding, border and margin can also be problematic if larger values are used.
As a general rule, if your CSS uses a property with a value in pixels that is 100px or above, you should be testing your design on mobile.
Ideally anything that touches these properties should be using classes and Extension:TemplateStyles and media queries to provide 2 different treatments for mobile and desktop.
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
If you are using tables to create a presentational element, please don't. Optimising tables for mobile is extremely challenging and these presentational elements are usually broken by the optimisations we make for mobile. Instead, you should look to convert your table based layouts to div based layouts.
Usually, in lieu of a better solution, we have to regretfully hide these elements on mobile. Navboxes being the most notable example.
Tables imbriquées
If you do need to use tables, note they are designed in responsive design/flex in Mobile version.
Assurez-vous que votre page d'accueil est compatible avec les mobiles
There's so much to talk about here, this gets its own article.
Les modèles doivent utiliser un élément racine unique avec une classe ensible CSS
Wikipedia content is largely unstructured. One means of providing presentation hints for optimal parsing and display is to ensure that templates have only one outermost HTML element and that that element has a unique CSS class name shared across wiki languages. This can dramatically help software such as the mobile website, the Content Service, and the native Android and iOS apps to identify content properly.
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
When an article has more than one issue use a single issues template to collapse them. Issues can take up value space on mobile and when collapsed more options to mobile friendly skins can take place.
In particular this is a problem when articles are nominated for deletion.
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
Be careful when making assumptions about the presentation of an article. While two images may be floated and positioned in a certain way on desktop, it won't necessary display the same on a mobile device. Thus avoid sentences such as "the table on the right shows" or "the image on the left shows".
It's important to think of the article as being fluid and subject to change.
If referring to the image is essential, consider vertical stacking which is a safer alternative.
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 (left) is to the left or Sergey Sirotkin (right)</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 (top) is to the bottom of Sergey Sirotkin (bottom)</div>
</div>
Limiter le nombre d'images sur une page
Because the mobile site lazy loads images, articles with large numbers of images will timeout on mobile.
You can determine the number of images in a page by using a JavaScript developer console and running:
$( 'img' ).length
Ideally, a page should have no more than 100 images (regardless of how small). Note if you have more than 10,000 images in your page, the page will be inaccessible on mobile.
In the case of tables you might want to consider using emojis or unicode characters.
Mauvais exemple
| Rank | Article | Views | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | A | 
|
|
|
|
|
|
|
3 895 581 597 | |||
| 2 | B |
|
|
|
|
|
|
|
62 210 344 |
Exemple correct
| Rank | Article | Views | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | A | 🅱️ | 🅱️ | 🅱️ | 🅱️ | 🅱️ | 🅱️ | 🅱️ | 3 895 581 597 | |||
| 2 | B | 🅱️ | 🅱️ | 🅱️ | 🅱️ | 🅱️ | 🅱️ | 🅱️ | 62 210 344 |
Rendre les problèmes de page (modèles ambox) adaptaples aux mobiles
There are several rules to follow to make page issues mobile friendly.
Utiliser les classes ambox et mbox-text à la place d'un tableau
Make sure the ambox class is present on the top level element of the page issue.
Preferably, the element should be a div, in which case the text portion of the element should have the mbox-text class.
Utiliser les classes ambox prises en charge pour clarifier la sévérité
For compatibility with the Minerva skin, which will screen scrape these templates to understand the meta data implied by these classes, ensure images have the class .mbox-image (or are wrapped in an element with the mbox-image class).
You can add additional classes (per below) to ensure the issue is scraped with the correct severity level.
| But | Classe à utiliser |
|---|---|
| POINT_OF_VIEW | ambox-POV ou mobile-issue-pov
|
| MOVE/MERGE | 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>
If present (and editors adopt this), Minerva can use this to choose the appropriate icon.
Limiter la sortie de page à deux lignes de texte
Text beyond 2 lines should be wrapped in an element with the hide-when-compact class.
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
Given page issues can contain multiple elements, images, and meta data, it's really important to help our clients identify which part of the template explains the issue.
For this task, most projects use one of the mbox-text-div or mbox-text-span classes (message box text). This helps us reduce clutter on mobile resolutions and pull out the key parts of the 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
In mobile, section headings links are used to collapse/expand sections. Use of links inside the section headings are thus discouraged. Where these links are essential, it is advised that editors disable section collapsing on the page by wrapping the entire content in a DIV element.
Mauvais exemple
== Link without heading ==
Text.
== [[Agriculture]] == <!-- link inside heading -->
Text about agriculture.
Exemple correct
<div><!-- this page uses links inside headings so a wrapper element is used to disable section collapsing on mobile -->
== Link without heading ==
Text.
== [[Agriculture]] == <!-- link inside heading -->
Text about agriculture.
</div>
Boîtes d'information
Ne repliez pas les boîtes d'information
A common pattern/mistake is to wrap an infobox either by incorrectly using wikitext or intentionally via HTML tags. The problem with this is it makes it difficult for mobile optimisations to apply as the infobox cannot be properly identified. If you must wrap them use the infobox-container class.
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
While infoboxes appear on many articles, they do not appear on all of them. In consequence, it is better to ship any styles for styling infoboxes using Extension:TemplateStyles.
Using MediaWiki:Mobile.css is highly discouraged as this can result in a cumulative layout shift. This is because Mobile.css unlike desktop loads via JavaScript and is not render blocking.
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; }