Recommendations for mobile friendly articles on Wikimedia wikis/ja

本文書では、経験上、MediaWiki の編集者として、どうすればモバイル端末利用者に最も役立つかについてのアドバイスを行います. 6年までの経歴で MediaWiki のコンテンツを担当してきた、モバイル用アプリとモバイル用ウェブの開発者によって編集されています. モバイルに適したコンテンツの文書内のいくつかの点を基にした実用的なガイドです.

ウィキメディアのウィキでは、訪問者の過半数がモバイル版サイトにアクセスしており、多くの地域でコンテンツにアクセスするための主な経路となっています.

私たちは、wikipedia:Category:Templates that are not mobile friendly（Category:モバイルに適していないテンプレート）のような、テンプレート管理用のカテゴリの使用を推奨します. こうして、モバイル版で問題のあるテンプレートを分類し、修正にかかる負担をみんなで分散してください.

プロジェクト横断的なテンプレートの構成要素には共通的なクラス名の用語を使う
cs:Šablona:Cedule の出力された見栄えは en:Template:Ambox に似ていますが、マークアップにおいて完全に異なります.

The output of cs:Šablona:Cedule is similar to en:Template:Ambox however the markup is completely different.

モバイル版サイトは、同じ用語で書かれたコンテンツに依拠しています. 異なる言語を通して一貫したモバイル版の使用感を作るには、類似した意味論的な用語を使うことが重要です.

多くのプロジェクトで英語版ウィキペディアからテンプレートをコピー&amp;ペーストすると、多くの「標準的」な名前が英語中心的です. しかし、最も広く使われているクラスを反映するために、こうした名称を変更することは非常に自由なことです. とりわけ、ambox の名称にはよりよい定義が必要です.


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

悪い例

（訳注：おそらく、非常にあいまいな意味にとれるクラス名を使っている）

Template:Infobox

良い例

Don't put infoboxes or images at the top of the wikitext if possible
Putting an infobox first in an article, will impact the performance and readability of the article on mobile. Currently, the mobile software (Extension:MobileFrontend) takes care of this problem, but in some cases it fails, so if possible, always use this arrangement or if not, please check the ordering has been corrected on mobile by testing your edits on a real mobile device.

In terms of readability, the placement of an infobox first, exposes readers to details on a subject prior to gathering context or and introduction to the subject, which can often be confusing. 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.

More information: Reading/Web/Projects/Lead_Paragraph_Move

悪い例

良い例

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 Page previews and the mobile web site to identify the first paragraph which is important for summarizing articles.

悪い例

良い例

ハットノート、ambox、infoboxテンプレートを一貫した順序で使用する
モバイルでコンテンツは異なった見栄えになることがありますが、移動できません. 要素が種類別にグループになっているかを判別している、モバイル版サイトとアルゴリズムに適合します.

モバイルでは、私たちは構成要素は、ハットノート (Template:Hatnoteなど)に続いて、ambox (Template:Amboxなどページの問題点)、がページの最上部に表示されると想定しています. Infobox や他の要素はこれらの下です.

この順序が守られていなければ、モバイル版サイトはコンテンツをモバイル用に最適化できません.

悪い例

良い例

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 Extension:TemplateStyles and media queries to provide 2 different treatments for mobile and desktop.

悪い例

良い例

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.

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.

悪い例

良い例

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.

悪い例

良い例

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.



悪い例

良い例

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.

悪い例

良い例

モバイルに適した「ページの問題点」（amboxテンプレート）の作り方
「ページの問題点」のテンプレートをモバイルに適合させるには、いくつかのルールがあります.

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

ambox クラスを使う
クラスが「ページの問題点」の最上位の要素に必要です. このクラスが存在すれば、モバイル版サイトはそのページに問題点があることを認識し、表示のための適切な処理を行います.

Make sure the  class is present on the top level element of the page issue. When this class is present, the mobile site will recognise it as a problem with the page and deal with it appropriately.

悪い例

良い例

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 

良い例

If present (and editors adopt this), Minerva can use this to choose 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.

悪い例

良い例

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

Bad example

Good example