Recommendations for mobile friendly articles on Wikimedia wikis/ru

This page is a translated version of the page Recommendations for mobile friendly articles on Wikimedia wikis and the translation is 57% complete.

Recommendations were made and are maintained by the Web team. They are based on data, technology trends, and our capabilities. As such, they evolve and may change.

В этом основанном на опыте руководстве даны рекомендации редактору проекта MediaWiki о том, как сделать проекты удобнее для мобильных пользователей. Оно составлено разработчиками мобильных приложений и мобильных сайтов с 10 летним опытом работы с контентом MediaWiki. Это практическое руководство базируется на ряде положений, содержащихся в Reading/Mobile Friendly Content.

Более 50% трафика в проектах WikiMedia приходится на мобильный веб-сайт, который во многих регионах является основным средством доступа к нашему контенту. Несмотря на это, многие наши статьи не так удобны для мобильных пользователей, как могли бы быть.

Рекомендуется использовать специальную служебную категорию w:Category:Templates that are not mobile friendly для систематизации шаблонов, которые вызывают проблемы на мобильных устройствах, чтобы координировать работу по их улучшению.

Лучшие практики

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>

Используйте стандартизированные имена классов в HTML-разметке для компонентов в шаблонах

Вывод cs:Šablona:Cedule похож на en:Template:Ambox, тем не менее HTML-разметка совершенно другая.

Мобильные приложения основаны на описании контента тем же языком. Важно использовать семантически схожий язык для того, чтобы мобильное приложение выглядело на разных языках одинаково.

Многие wiki-проекты копируют шаблоны из английской Википедии, поэтому стандартные имена англоцентричны, но мы открыты к изменениям, которые могли бы отразиться в наиболее используемых классах. Особенно важно улучшить язык имён шаблонов на основе ambox.

.infobox - компоненты, которые резюмируют факты (как, например, dob = 25th December 2018; name = Santa Claus Junior или en:Template:Infobox).
.dablink - disambiguation notice that appears at the top of the page.
.hatnote - наверху страницы появляются элементы, означающие редиректы или страницы с похожими названиями, например, ru:Шаблон:Другое значение
.ambox - описывают недостатки страницы.
- .ambox .mbox-image - подставляют иконку для недостатка.
- .ambox .mbox-text-span - описывают дефект (но не способ его устранения).
- .ambox .hide-when-compact - описывают способ устранения дефекта.
.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.

Плохой пример

Template:Infobox

<div class="my-infobox-like-component"></div>

Хороший пример

<!-- semantic infobox class added per [[:mw:Recommendations_for_mobile_friendly_articles]] for mobile compatibility -->
<div class="my-infobox-like-component infobox"></div>
{{Infobox}}

По возможности не размещайте инфобоксы или изображения в верхней части викитекста

Расположение инфобокса в самом начале статьи будет влиять на производительность и удобочитаемость на мобильных устройствах. В настоящее время мобильное программное обеспечение (Расширение:MobileFrontend ) берёт на себя разрешение этой проблемы, но иногда это ему не удаётся, поэтому по возможности всегда следуйте этой договорённости, в противном же случае не забудьте проверить, что в мобильной версии всё в порядке, путём просмотра ваших правок на настоящем мобильном устройстве.

С точки зрения удобочитаемости, размещение инфобокса в самом начале приводит к тому, что читатели сталкиваются с подробностями прежде контекста или введения в предмет, что часто может сбивать с толку. Эта проблема была особенно острой для тем, малознакомых пользователям, где им пришлось бы прокрутить содержимое инфобокса, чтобы выяснить, ту ли статью они читают. Мы внедрили это изменение, чтобы добиться согласованности между мобильной и полноразмерной версиями веб-сайта (в полноразмерной версии первый абзац также размещается в начале) и, кроме того, чтобы предмет статьи предъявлялся пользователям до того, как им потребуется прокрутить инфобокс.

С точки зрения производительности, смещение инфобоксов вниз повышает производительность сайта за счёт значительного снижения среднего времени загрузки страницы, позволяя пользователям видеть содержимое страницы быстрее, чем раньше.

Дополнительная информация: Reading/Web/Projects/Lead_Paragraph_Move

Плохой пример

{{Infobox}}
Первый абзац моей статьи

Хороший пример

Первый абзац моей статьи
{{Infobox}}

Метаданные (в том числе координаты) следует размещать внизу статьи

В полноразмерной версии сайта координаты появляются в верхнем правом углу, но в мобильной версии с её недостатком места в верхней части страницы такое расположение непрактично. Расположение шаблона с координатами в другом месте статьи, например, внизу, предоставит мобильной версии больше доступных возможностей вёрстки.

Среди других благоприятных последствий перемещения метаданных вниз — содействие алгоритмам, которые генерируют превью страницы и мобильную версию, правильно определить первый параграф, что важно для резюмирования статьи.

Плохой пример

{{Coord|35|N|136|E|type:country_region:JP|display=title}}
Первый абзац моей статьи

Хороший пример

Первый абзац моей статьи

....
....
....
{{Coord|35|N|136|E|type:country_region:JP|display=title}}

Используйте повсеместно один и тот же порядок для шаблонов шапки, ambox и infobox

В мобильной версии контент может быть перелицован, но не может быть перемещён. Группировка элементов статьи по типам помогает мобильной версии и алгоритмам, на которых она основана.

В мобильной версии мы полагаем, что за всеми компонентами шапки следуют шаблоны, сообщающие о недостатках страницы, и всё это расположено в самой верхней части статьи, а инфобокс — ниже.

В ином случае мобильная версия не может оптимизировать вёрстку, и вёрстка не может быть оптимизирована под мобильную версию.

Плохой пример

{{infobox}} <!-- infobox -->
{{page issue}} <!-- .ambox -->
{{disambiguation}} <!-- .hatnote -->
{{page issue}} <!-- .ambox -->

Хороший пример

{{disambiguation}}  <!-- .hatnote -->
{{page issue}}  <!-- .ambox -->
{{page issue}}  <!-- .ambox -->
{{infobox}} <!-- .infobox (table or div) -->

Не включайте во внутристрочное описание стиля (inline styles) свойства размера и расположения на странице

CSS-свойства width, float, height создают проблемы в мобильной версии.

Также проблемы создают большие значения свойств padding, border и margin.

В общем случае параметры CSS, в которых используются значения 100px и более следует тестировать на мобильной версии.

В идеальном случае все эти параметры должны быть определены в классах, Расширение:TemplateStyles и медиа-запросах, чтобы в полноразмерной и мобильной версиях они обрабатывались различным образом.

Плохой пример

<div style="width: 700px; float: left; padding: 5px; border: solid 1px black;">Некий текст</div>

Хороший пример

<templatestyles src="..." />
<div class="mybox">Некий текст</div>

.mybox { width: 100%; padding: 5px; border: solid 1px black; }

@media all and ( min-width: 720px ) {
  .mybox { width: 700px; float: left; }
}

Избегайте таблиц для представления чего бы то ни было, кроме данных

Не используйте таблицы для вёрстки. Оптимизация таблиц для мобильной версии представляет собой весьма сложную задачу, а табличная вёрстка при такой оптимизации почти неизбежно развалится.

Табличную вёрстку следует заменять при помощи HTML-элементов

.

Обычно, по недостатку лучшего решения, мы вынуждены просто скрывать такие элементы в мобильной версии, что наиболее заметно в случае навигационных шаблонов.

Вложенные таблицы

If you do need to use tables, note they are designed in responsive design/flex in Mobile version.

Make sure your main page is mobile friendly

There's so much to talk about here, this gets its own article .

Templates should use a single root element with a sensible CSS class

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.

Плохой пример

<div>foo</div>
<div>bar</div>

Хороший пример

<div class=FoobarTemplate>
  <div>foo</div>
  <div>bar</div>
</div>

Collapse issues with a multiple issues template

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.

Плохой пример

{{fringe|date=June 2018}}
{{rewrite|date=April 2018}}

{{Proposed deletion/dated
    |concern = Чистый плагиат
    |timestamp = 20180829061154
    |help = 
}}
{{Unreferenced|date=December 2009}}

Хороший пример

{{multiple issues|
  {{fringe|date=June 2018}}
  {{rewrite|date=April 2018}} 
}}

{{Deletion notice with multiple_issues|
    {{Proposed deletion/dated
    |concern = Чистый плагиат
    |timestamp = 20180829061154
    |help = 
    }}
|
    {{Unreferenced|date=December 2009}}
}}

Do not assume positions of images, infoboxes, tables in text

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.

Плохой пример

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

Хороший пример

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

Limit number of images in a 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.

Плохой пример

Rank	Article											Views
1	A											3 895 581 597
2	B											62 210 344

Хороший пример

Rank	Article											Views
1	A	🅱️	🅱️	🅱️	🅱️	🅱️	🅱️				🅱️	3 895 581 597
2	B	🅱️	🅱️	🅱️	🅱️	🅱️	🅱️		🅱️			62 210 344

Making page issues (ambox templates) mobile friendly

There are several rules to follow to make page issues mobile friendly.

Use the ambox class and mbox-text if not using a table

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.

Use supported ambox classes to clarify severity

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.


Purpose	Class to use
POINT_OF_VIEW	`ambox-POV` или `mobile-issue-pov`
MOVE/MERGE	`ambox-move` или `mobile-issue-move`
Medium severity issue	`ambox-content` или `mobile-issue-severity-medium`
High severity issue	`ambox-serious` или `mobile-issue-severity-high`
Low severity issue	`ambox-style` или `mobile-issue-severity-low`

Плохой пример

<div class="ambox custom-class-issue-icon-POV">
    <div class="ambox-image">[[File:Commons-emblem-issue.svg]]</div>
</div>

Хороший пример

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

Limit page issue to two lines of text

Text beyond 2 lines should be wrapped in an element with the hide-when-compact class.

Плохой пример

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

Хороший пример (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>

Mark the text portion of an issue

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.

Плохой пример

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

Хороший пример

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

Do not put links inside section headings

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.

Bad example

== Link without heading ==
Text.

== [[Agriculture]] == <!-- link inside heading -->

Text about agriculture.

Good example

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

Infoboxes

Do not wrap infoboxes

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.

Bad example

:{{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>

Good example

{{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>

Do not style infoboxes in 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 Расширение: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.

Bad example

Template:InfoboxExample:

<div class="infobox">
<h1>Infobox heading</h1>
</div>

MediaWiki:Mobile.css:

.infobox h1 { font-size: 24px; }

Good example

Template:InfoboxExample:

<div class="infobox">
<h1 style="font-size: 24px;">Infobox heading</h1>
</div>

OR

Template:InfoboxExample:

<templatestyles src="InfoboxExample/styles.css" />
<div class="infobox">
<h1>Infobox heading</h1>
</div>

Template:InfoboxExample/styles.css

.infobox h1 { font-size: 24px; }