Recommendations for mobile friendly articles on Wikimedia wikis/ru

Здесь даётся руководство, основанное на опыте, как лучше всего обслуживать нужды мобильных пользователей, выступая в качестве редактора одного из проектов MediaWiki. Оно составлено разработчиками мобильных приложений и мобильных сайтов с опытом работы с контентом mediawiki до шести лет. Это практическое руководство, базирующееся на ряде положений, содержащихся в Reading/Mobile_Friendly_Content.

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

We recommend the usage of a template maintenance category e.g. wikipedia:Category:Templates that are not mobile friendly to help flag problematic templates on mobile and share the burden of fixing them.

Wrap wide images and tables
If an image or table is larger than 600px 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 

 Good example 

Use standardized class names in HTML markup for components in templates across projects
The output of cs:Šablona:Cedule is similar to en:Template:Ambox however the HTML markup is completely different.

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. In particular, the ambox names need a better defined language.


 * .infobox - a component that summarises facts (e.g. dob = 25th December 2018; name = Santa Claus Junior) e.g. en:Template:Infobox
 * .hatnote - appears at top of the page describing possible redirects or similarly named articles e.g. en:Template:Hatnote
 * .ambox - describes a problem with the page. e.g. en:Template:Ambox
 * .ambox .mbox-image - associates an icon with the problem e.g. en:Template:Ambox
 * .ambox .mbox-text-span - describes the issue (but not the fix)
 * .ambox .hide-when-compact - describes the fix for the issue.

 Bad example 

Template:Infobox

 Good example 

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

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

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

Дополнительная информация:

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

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

Meta data (including coordinates) should be positioned at the bottom of the 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 and the mobile web site to identify the first paragraph which is important for summarizing articles.

 Bad example 

 Good example 

Use consistent ordering for hatnotes, ambox and infobox templates
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.

 Bad example 

 Good example 

Inline styles should not use properties that impact sizing and positioning
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 and media queries to provide 2 different treatments for mobile and desktop.

 Bad example 

 Good example 

Avoid tables for anything except data
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.

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

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.

 Bad example 

 Good example 

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.

 Bad example 

 Good example 

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.



 Bad example 

 Good example 

Limit number of images in a page
Due to the fact that the mobile site lazy loads images, articles with large amounts of images will timeout on mobile.

You can determine the number of images in a page by using a JavaScript developer console and running: 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.

 Bad example 

 Good example 

Making page issues (ambox templates) mobile friendly
There are several rules to follow to make page issues mobile friendly.

Use the ambox class
Make sure the  class is present on the top level element of the page issue.

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  (or are wrapped in an element with the   class). You can add additional classes (per below) to ensure the issue is scraped with the correct severity level.

 Bad example 

 Good example 

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

 Bad example 

 Good example 

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  or   classes (message box text). This helps us reduce clutter on mobile resolutions and pull out the key parts of the message.

Bad example

Good example

Do not wrap infoboxes
A commonly observed 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 

 Good example