維基媒體維基上對移動版條目友善的建議

From MediaWiki.org
Jump to navigation Jump to search
This page is a translated version of the page Recommendations for mobile friendly articles on Wikimedia wikis and the translation is 45% complete.
Other languages:
English • ‎dansk • ‎português do Brasil • ‎русский • ‎ไทย • ‎中文 • ‎日本語

This document provides guidance, from experience, on how best to serve mobile users as an editor of a MediaWiki wiki. It is compiled by mobile apps and mobile web developers with up to 6 years of experience working with mediawiki content. It is a practical guide building on some of the points inside Reading/Mobile_Friendly_Content.

On Wikimedia wikis over 50% of traffic visits the mobile website and in many regions is the primary medium for accessing our content. Despite this, many of our articles are not as mobile friendly as they could be.

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.

在跨維基的模板元件的HTML標記中使用標準化類別名稱

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.

不好的例子

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

如果可能,不要將資訊框或圖像放在wiki文本的頂端

Putting an infobox first in an article, will impact the performance and readability of the article on mobile. Currently, the mobile software (扩展:移动前端 ) 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.

更多資訊: Reading/Web/Projects/Lead_Paragraph_Move

不好的例子

{{Infobox}}
My article's first paragraph

好的例子

My article's first paragraph
{{Infobox}}

元數據(包括坐標)應位於條目的底部

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.

不好的例子

{{Coord|35|N|136|E|type:country_region:JP|display=title}}
My article's first paragraph

好的例子

My article's first paragraph

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

對頂註(hatnote)、維護(ambox)、資訊框模板使用一致的順序

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.

不好的例子

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

好的例子

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

行內樣式不應使用影響大小和位置的屬性

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.

不好的例子

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

除了數據之外,避免使用任何表格

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. Hence when dealing with tables, and especially with nested tables, you should carefully review them in mobile. If required, you can consider to override default CSS by reassigning the display to be table.

確保你的首面適合移動設備

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

模板應該僅有單個根元素且有合理的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.

不好的例子

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

好的例子

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

使用多個問題模板折疊問題

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

不要假定圖像、信息框、表格在文字中的位置

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.

In this example it would make sense to use a single image rather than two, or to use vertical stacking

不好的例子

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

限制頁面中的圖像數量

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:

$( '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 Symbol b class.svg Symbol b class.svg Symbol b class.svg Symbol b class.svg Symbol b class.svg Symbol b class.svg Symbol b class.svg 3,895,581,597
2 B Symbol b class.svg Symbol b class.svg Symbol b class.svg Symbol b class.svg Symbol b class.svg Symbol b class.svg Symbol b class.svg 62,210,344

好的例子

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

讓頁面問題(ambox模板)適合移動版

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

使用ambox類別

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

使用支持的ambox類別指明來嚴重性

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.

目的 要使用的類別
觀點 ambox-POV
移動/合併 ambox-move
中等嚴重性問題 ambox-content
高嚴重性的問題 ambox-serious
低嚴重性的問題 ambox-style

不好的例子

<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" data-severity="2">
    <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 appropriate icon

限制頁面問題為兩行文字

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

不好的例子

<table class="ambox">
    <tr>
    <td class="avviso-testo">
        <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 class="ambox">
    <tr>
    <td class="avviso-testo">
        <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>

標記問題的文字部分

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.

不好的例子

<div class="ambox">
    <div>
        這個頁面有個問題。
        <div class="hide-when-compact">如果您不知道如何解決問題,請參閱這裡。</div>
    </div>
    <div>
        您是否知道這是一個任何人都可以編輯的維基?有關編輯的一般建議,請查看<a>指引頁面</a></div>
</div>

好的例子

<div class="ambox">
    <div class="mbox-text-div">
        這個頁面有個問題。
        <div class="hide-when-compact">如果您不知道如何解決問題,請參閱這裡。</div>
    </div>
    <div>
        您是否知道這是一個任何人都可以編輯的維基?有關編輯的一般建議,請查看<a>指引頁面</a></div>
</div>