Zalecenia co do tworzenia artykułów przyjaznych dla wersji mobilnej na wiki Wikimedia
| 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. |
Niniejszy dokument zawiera wskazówki, oparte na doświadczeniu, jak edytorzy mogą najlepiej obsługiwać potrzeby użytkowników mobilnych. Został on stworzony przez programistów aplikacji mobilnych i mobilnych stron internetowych z niemal 10-letnim doświadczeniem w pracy z zawartością MediaWiki. Stanowi praktyczny przewodnik oparty na niektórych punktach zawartych w Reading/Mobile Friendly Content.
Na wiki Wikimedia ponad 50% ruchu to wyświetlenia strony mobilnej, a w wielu regionach jest to główne medium dostępu do naszych treści. Mimo to wiele naszych artykułów nie jest tak przyjaznych dla urządzeń mobilnych, jak mogłoby być.
Zalecamy użycie kategoryzacji szablonów, np. [[w:Kategoria:Szablony, które nie są przyjazne dla urządzeń mobilnych]], aby pomóc oznaczyć problematyczne szablony na urządzeniach mobilnych i podzielić się ciężarem ich naprawy.
Dobre praktyki
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>
Korzystaj ze standaryzowanych nazw klas w kodzie HTML komponentów w szablonach w różnych projektach
Rezultat cs:Šablona:Cedule jest podobny do en:Template:Ambox, ale ich kod HTML się całkiem różni.
Mobilna wersja strony internetowej opiera się na opisywaniu treści w tym samym języku. Aby mobilne doświadczenie było spójne w różnych językach, ważne jest użycie języka semantycznego w podobny sposób.
Z racji tego, że wiele projektów kopiuje szablony z anglojęzycznej Wikipedii, większość "standardowych" nazw jest anglocentryczna, ale jesteśmy otwarci na zmianę tego stanu rzeczy, aby dopasować się do najczęściej używanych klas. W szczególności nazwy w ambox wymagają lepiej określonego języka.
- .infobox - komponent streszczający fakty (np. dob = 25th December 2018; name = Santa Claus Junior) np. en:Template:Infobox
- .dablink - disambiguation notice that appears at the top of the page.
- .hatnote - wyświetlany na górze strony wskazujący na możliwe przekierowania lub podobnie brzmiące nazwy artykułów, przykładowy szablon: en:Template:Hatnote
- .ambox - opisuje problem ze stroną, np. en:Template:Ambox
- .ambox .mbox-image - przypisuje ikonę do problemu, np. w en:Template:Ambox
- .ambox .mbox-text-span - opisuje problem (ale nie rozwiązanie)
- .ambox .hide-when-compact - opisuje sposób naprawy.
- .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.
Zły przykład
Szablon:Infobox
<div class="my-infobox-like-component"></div>
Dobry przykład
<!-- semantic infobox class added per [[:mw:Recommendations_for_mobile_friendly_articles]] for mobile compatibility -->
<div class="my-infobox-like-component infobox"></div>
{{Infobox}}
Nie umieszczaj infoboksów i ilustracji nad wikitekstem (jeśli to możliwe)
Umieszczenie infoboksu na początku artykułu wpłynie na wydajność i czytelność artykułu w wersji mobilnej. Na razie, oprogramowanie generujące wersję mobilną (Rozszerzenie:MobileFrontend) samo rozwiązuje taki problem, ale w niektórych przypadkach może nie dać rady, więc staraj się zawsze stosować zalecaną kolejność, a jeśli nie, sprawdzaj poprawność kolejności zastosowaną automatycznie w wersji mobilnej przez przetestowanie na urządzeniu mobilnym.
W kwestii czytelności umieszczenie infoboksu na początku eksponuje szczegóły opisywanego podmiotu zanim czytelnik zapozna się z kontekstem i wprowadzeniem do przedmiotu, co może go mylić. Ten problem zauważalny jest w tematach nieznanych czytelnikom, gdzie muszą oni przewinąć infoboks, aby upewnić się, że trafili do właściwego artykułu. 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.
Więcej informacji: Reading/Web/Projects/Lead_Paragraph_Move
Zły przykład
{{Infobox}}
Pierwszy akapit artykułu
Dobry przykład
Pierwszy akapit artykułu
{{Infobox}}
Metadane (także współrzędne) powinny być umieszczane na dole artykułu
W wersji na komputery stacjonarne, szablon do wyświetlania współrzędnych umieszczany jest zazwyczaj w prawym górnym rogu artykułu. W wersji mobilnej, gdzie miejsce jest ograniczone, nie jest to praktyczne. Positioning them elsewhere in the article body e.g. bottom would allow more options for mobile while still allowing the position on mobile.
Są także inne zalety z umieszczenia metadanych na dole - pomaga algorytmom takim jak Page previews czy wersji mobilnej zidentyfikować pierwszy akapit, co jest ważne dla wyświetlania streszczeń artykułów.
Zły przykład
{{Coord|35|N|136|E|type:country_region:JP|display=title}}
Pierwszy akapit artykułu
Dobry przykład
Pierwszy akapit artykułu
....
....
....
{{Coord|35|N|136|E|type:country_region:JP|display=title}}
Stosuj spójną kolejność wskazówek na górze, amboxów i infoboksów
W wersji mobilnej, można ustawiać różne style treści, ale nie można jej przenosić. Trzymanie się tej reguły pomaga wersji mobilnej i zależnym algorytmom, dlatego że elementy są zgrupowane razem według typu.
W wersji mobilnej oczekuje się, że komponenty wskazane jako wskazówki dla czytelnika (np. Template:Hatnote) znajdą się przez amboksami (czyli Template:Ambox) i te dwa rodzaje znajdować się będa na samej górze artykułu. Infoboksy i inna treść powinny znaleźć się pod nimi.
Gdy ta kolejność nie będzie przestrzegana, wersja mobilna nie zostanie zoptymalizowana do wyświetlania.
Zły przykład
{{infobox}} <!-- infobox -->
{{page issue}} <!-- .ambox -->
{{disambiguation}} <!-- .hatnote -->
{{page issue}} <!-- .ambox -->
Dobry przykład
{{disambiguation}} <!-- .hatnote -->
{{page issue}} <!-- .ambox -->
{{page issue}} <!-- .ambox -->
{{infobox}} <!-- .infobox (table or div) -->
Style bezpośrednie (inline) nie powinny zawierać właściwości wpływających na wymiary u rozmieszczenie
Właściwości CSS takie jak width, float, height są utrudnieniem dla wersji mobilnej.
padding, border, margin mogą także być problematyczne, jeśli ustali się im duże wartości.
Przyjmuje się, że jeśli w CSS skorzystasz z właściwości o wartości w pikselach powyżej stu, powinieneś sprawdzić wyświetlanie w wersji mobilnej.
Dobra praktyką jest przy korzystaniu z tych właściwości nadać w zamian elementom klasy i skorzystać z Extension:TemplateStyles wraz z media queries do wprowadzenia różnej obsługi wersji mobilnej i stacjonarnej.
Zły przykład
<div style="width: 700px; float: left; padding: 5px; border: solid 1px black;">Jakiś tekst</div>
Dobry przykład
<templatestyles src="..." />
<div class="mybox">Jakiś tekst</div>
.mybox { width: 100%; padding: 5px; border: solid 1px black; }
@media all and ( min-width: 720px ) {
.mybox { width: 700px; float: left; }
}
Unikaj tabel do rzeczy innych niż dane
Nie używaj tabel do tworzenia elementów wizualnych.
Optimising tables for mobile is extremely challenging and these presentational elements are usually broken by the optimisations we make for mobile.
W zamian należy przekształcić układ oparty na tabelach na układ z wykorzystaniem elementów div.
Czasami, gdy nie da się osiągnąć spodziewanego rezultatu lepiej, musimy ukryć te elementy w wersji mobilnej. Znanym przykładem takiej sytuacji są navboxy.
Zagnieżdżone tabele
If you do need to use tables, note they are designed in responsive design/flex in Mobile version.
Upewnij się, że strona główna jest przyjazna dla wersji mobilnej
Nad tym się tu nie skupimy, temat ten został omówiony w osobnym artykule.
Szablony powinny korzystać z pojedynczego elementu głównego z praktyczną klasą CSS
Treść Wikipedii jest mocno pozbawiona strukturyzacji. 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. Znacznie pomoże to programom takim jak wersja mobilna, Content Service, aplikacje na Androida i iOS odpowiednio zidentyfikować treść.
Zły przykład
<div>foo</div>
<div>bar</div>
Dobry przykład
<div class=FoobarTemplate>
<div>foo</div>
<div>bar</div>
</div>
Zgrupuj szablony informujące o problemach w jednym szablonie
Gdy artykuł ma więcej niż jeden problem oznaczony szablonem, wstawiaj te pojedyncze szablony wewnątrz jednego szablonu je grupującego. Informacje o problemach mogą zabierać dużo miejsca, a gdy się je zwinie, otwiera to nowe drogi w wersji mobilnej.
In particular this is a problem when articles are nominated for deletion.
Zły przykład
{{fringe|date=June 2018}}
{{rewrite|date=April 2018}}
{{Proposed deletion/dated
|concern = Oczywisty plagiat
|timestamp = 20180829061154
|help =
}}
{{Unreferenced|date=December 2009}}
Dobry przykład
{{multiple issues|
{{fringe|date=June 2018}}
{{rewrite|date=April 2018}}
}}
{{Deletion notice with multiple_issues|
{{Proposed deletion/dated
|concern = Oczywisty plagiat
|timestamp = 20180829061154
|help =
}}
|
{{Unreferenced|date=December 2009}}
}}
Nie zakładaj konkretnego rozmieszczenia ilustracji, infoboksów, tabel w tekście
Bądź ostrożny podczas przyjmowania założeń dotyczących prezentacji artykułu. Mimo iż dwie ilustracje mogą być umieszczone w określonym miejscu w wersji stacjonarnej, niekoniecznie tak samo wyświetlą się w wersji mobilnej. W związku z tym unikaj wyrażeń typu "tabela po prawej pokazuje", albo "ilustracja po lewej pokazuje".
Należy pamiętać, że wyświetlanie artykułu będzie elastyczne i zmienne.
Jeżeli wskazanie zdjęcia jest kluczowe, rozważ ustawienie względem pionu, co jest bezpieczniejsza alternatywą.
Zły przykład
<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>
Dobry przykład
<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>
Ogranicz liczbę ilustracji na stronie
Ponieważ wersja mobilna ładuje ilustracje opóźnieniem, artykuły z dużą liczbą zdjęć nie załadują się o czasie w wersji mobilnej.
Liczbę grafik na stronie możesz sprawdzić wpisując w konsoli JavaScript.
$( 'img' ).length
Najlepiej, gdy strona nie zawiera więcej niż 100 obrazków (bez względu na to jak małych). Z kolei gdy na jednej stronie znajdzie się więcej niż 10 000 grafik, strona stanie się niedostępna na urządzeniach mobilnych.
W przypadku tabel warto rozważyć emoji lub symbole unicode.
Zły przykład
| Rank | Article | Views | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | A | 
|
|
|
|
|
|
|
3 895 581 597 | |||
| 2 | B |
|
|
|
|
|
|
|
62 210 344 |
Dobry przykład
| Rank | Article | Views | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | A | 🅱️ | 🅱️ | 🅱️ | 🅱️ | 🅱️ | 🅱️ | 🅱️ | 3 895 581 597 | |||
| 2 | B | 🅱️ | 🅱️ | 🅱️ | 🅱️ | 🅱️ | 🅱️ | 🅱️ | 62 210 344 |
Przystosowanie szablonów problemów (ambox) do wersji mobilej
Jest kilka zasad, których zastosowanie sprawi, że informacje o problemach z artykułem będą przyjazne dla wersji mobilnej.
Używaj klasy ambox class oraz mbox-text, gdy nie skorzystano z tabeli
Klasa ambox powinna być przydzielona do najbardziej nadrzędnego elementu HTML kodu odpowiadającego za prezentowanie informacji o problemie.
Najlepiej, jakby elementem tym był div, gdzie tekstowa jego część powinna mieć klasę mbox-text.
Użyj klas pomocniczych dla amboxów aby określić stopień problemu
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.
| Przeznaczenie | Klasa do użycia |
|---|---|
| POINT_OF_VIEW | ambox-POV lub mobile-issue-pov
|
| MOVE/MERGE | ambox-move lub mobile-issue-move
|
| Problem średniego stopnia | ambox-content lub mobile-issue-severity-medium
|
| Problem wysokiego stopnia | ambox-serious lub mobile-issue-severity-high
|
| Problem niskiego stopnia | ambox-style lub mobile-issue-severity-low
|
Zły przykład
<div class="ambox custom-class-issue-icon-POV">
<div class="ambox-image">[[File:Commons-emblem-issue.svg]]</div>
</div>
Dobry przykład
<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.
Ogranicz informację o problemie do dwóch linii tekstu
Tekst powyżej 2 linii powinien być otoczony elementem z klasą hide-when-compact.
Zły przykład
<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>
Dobry przykład (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>
Oznacz część tekstową informacji o problemie
Z racji tego, że szablon informacji o problemie zawiera kilka elementów, grafik i metadanych, ważne jest wsparcie aplikacji klienckich w określeniu, która część szablonu opisuje problem.
W tym celu większość projektów wykorzystuje klasy mbox-text-div oraz mbox-text-span (message box text). Pomaga to ograniczyć zapełnienie oraz wyciągnąć kluczowe części komunikatu.
Zły przykład
<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>
Dobry przykład
<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>
Nie umieszczaj linków w nagłówkach sekcji
W wersji mobilnej linki w nagłówkach służą do zwijania i rozwijania sekcji. W związku z tym używanie linków w tytułach nagłówkach jest odradzanie. Tam, gdzie konieczne jest wstawianie takich linków, należy wyłączyć mechanizm zwijania sekcji poprzez objęcie całej treści elementem DIV.
Zły przykład
== Link without heading ==
Text.
== [[Agriculture]] == <!-- link inside heading -->
Text about agriculture.
Dobry przykład
<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>
Infoboksy
Nie obejmuj infoboksów w znaczniki
Częstym wzorcem lub pomyłką jest otoczenie infoboksu zarówno przez niewłaściwe użycie wikikodu jak i za pomocą znaczników HTML. Problem polega na tym, że trudniejsza staje się optymalizacja wersji mobilnej z powodu niewykrycia infoboksu. Jeżeli konieczne jest jego objęcie, nadaj obejmującemu elementowi klasę infobox-container.
Zły przykład
:{{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>
Dobry przykład
{{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>
Nie twórz styli dla infoboksów w MediaWiki:Mobile.css
Mimo, iż infoboksy występują w wielu artykułach, nie oznacza to, że znajdują się we wszystkich. Lepsze jest więc dostarczenie stylów dla infoboksów za pomocą Extension: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.
Zły przykład
Template:InfoboxExample:
<div class="infobox">
<h1>Infobox heading</h1>
</div>
MediaWiki:Mobile.css:
.infobox h1 { font-size: 24px; }
Dobry przykład
Template:InfoboxExample:
<div class="infobox">
<h1 style="font-size: 24px;">Infobox heading</h1>
</div>
LUB Template:InfoboxExample:
<templatestyles src="InfoboxExample/styles.css" />
<div class="infobox">
<h1>Infobox heading</h1>
</div>
Template:InfoboxExample/styles.css
.infobox h1 { font-size: 24px; }