คำแนะนำสำหรับบทความที่เหมาะกับมือถือในวิกิวิกิมีเดีย

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 34% complete.
Other languages:
English • ‎dansk • ‎português do Brasil • ‎русский • ‎ไทย • ‎中文 • ‎日本語

เอกสารนี้ให้คำแนะนำจากประสบการณ์เกี่ยวกับวิธีที่ดีที่สุดในการให้บริการผู้ใช้อุปกรณ์พกพาในฐานะผู้แก้ไขวิกิมีเดียวิกิ มันถูกรวบรวมโดยแอพมือถือและนักพัฒนาเว็บมือถือที่มีประสบการณ์มากถึง 6 ปีในการทำงานกับเนื้อหามีเดียวิกิ มันเป็นการสร้างคู่มือที่ใช้งานได้จริงในบางจุดภายในการอ่าน/เนื้อหาที่เหมาะกับมือถือ

ในมีเดียวิกิมีมากกว่า 50 เปอร์เซ็นต์ของปริมาณการใช้งานเข้าชมเว็บไซต์ทางมือถือ และในหลายภูมิภาคเป็นสื่อหลักในการเข้าถึงเนื้อหาของเรา อย่างไรก็ตามในเรื่องนี้ หลายบทความของเราไม่เหมาะกับมือถือเท่าที่ควร

เราขอแนะนำให้ใช้หมวดหมู่การบำรุงรักษาแม่แบบ เช่น wikipedia:Category:Templates that are not mobile friendly เพื่อช่วยตั้งค่าสถานะแม่แบบที่มีปัญหาบนมือถือและแบ่งปันภาระในการแก้ไข

ใช้ชื่อชั้นมาตรฐานในมาร์กอัปเอชทีเอ็มแอลสำหรับส่วนประกอบในแม่แบบข้ามโครงการ

ผลลัพธ์ของ cs:Šablona:Cedule นั้นคล้ายกับ แม่แบบ:Ambox อย่างไรก็ตามมาร์กอัปเอชทีเอ็มแอลแตกต่างอย่างสิ้นเชิง

เว็บไซต์บนมือถืออาศัยการอธิบายเนื้อหาด้วยภาษาเดียวกัน เพื่อให้ประสบการณ์ใช้งานมือถือสอดคล้องกันในหลายภาษาสิ่งสำคัญคือการใช้ภาษาความหมายที่คล้ายกัน

ให้หลาย ๆ โครงการคัดลอกและวางแม่แบบจากวิกิพีเดียภาษาอังกฤษ "มาตรฐาน" ชื่อส่วนใหญ่เป็นภาษาอังกฤษ แต่เราเปิดกว้างมากในการเปลี่ยนแปลงสิ่งนี้เพื่อสะท้อนชั้นที่ใช้กันอย่างแพร่หลายมากที่สุด โดยเฉพาะอย่างยิ่ง ชื่อ ambox ต้องการภาษาที่กำหนดดีกว่า

  • .infobox - องค์ประกอบที่สรุปข้อเท็จจริง (เช่น วันเกิด = 25 ธันวาคม ค.ศ. 2018; ชื่อ = ซานตาคลอสจูเนียร์) เช่น แม่แบบ:กล่องข้อมูล
  • .hatnote - ปรากฏที่ด้านบนของหน้าอธิบายการเปลี่ยนเส้นทางที่เป็นไปได้หรือบทความที่มีชื่อคล้ายกัน เช่น แม่แบบ:Hatnote
  • .ambox - อธิบายถึงปัญหากับหน้า เช่น แม่แบบ:Ambox
    • .ambox .mbox-image - เชื่อมโยงไอคอนกับปัญหา เช่น แม่แบบ:Ambox
    • .ambox .mbox-text-span - อธิบายปัญหา (แต่ไม่ใช่การแก้ไข)
    • .ambox .hide-when-compact - อธิบายการแก้ไขสำหรับปัญหา

ตัวอย่างที่ไม่ดี

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

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.

ข้อมูลเพิ่มเติม: Reading/Web/Projects/Lead_Paragraph_Move

ตัวอย่างที่ไม่ดี

{{Infobox}}
ย่อหน้าแรกของบทความฉัน

ตัวอย่างที่ดี

ย่อหน้าแรกของบทความฉัน
{{Infobox}}

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.

ตัวอย่างที่ไม่ดี

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

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.

ตัวอย่างที่ไม่ดี

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

ตัวอย่างที่ดี

{{disambiguation}}  <!-- .hatnote -->
{{page issue}}  <!-- .ambox -->
{{page issue}}  <!-- .ambox -->
{{infobox}} <!-- 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.

ตัวอย่างที่ไม่ดี

<div style="width: 700px; float: left; padding: 5px; border: solid 1px black;">Some text</div>

ตัวอย่างที่ดี

<templatestyles src="..." />
<div class="mybox">Some text</div>
.mybox { width: 100%; padding: 5px; border: solid 1px black; }

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

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 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 = Clear plagiarism
    |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 = Clear plagiarism
    |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.

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>

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:

$( '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

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 ambox 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 .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 or mobile-issue-pov
MOVE/MERGE ambox-move or mobile-issue-move
Medium severity issue ambox-content or mobile-issue-severity-medium
High severity issue ambox-serious or mobile-issue-severity-high
Low severity issue ambox-style or 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="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>

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