Zalecenia co do tworzenia artykułów przyjaznych dla wersji mobilnej na wiki Wikimedia
| Rekomendacje zostały opracowane i są aktualizowane przez zespół Web. Bazują na danych, trendach technologicznych oraz naszych własnych możliwościach technicznych. W związku z tym ewoluują i mogą się zmienić. |
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. Wprowadziliśmy tę zmianę, aby zapewnić spójność między wersją mobilną i wersją na komputery stacjonarne (w wersji na komputery stacjonarne pierwszy akapit również ma pierwszeństwo), a także aby zapoznać użytkowników z tematem artykułu, zanim będą musieli przewijać infoboks.
Przeniesienie infoboksów na drugorzędne miejsce znacznie skraca średni czas ładowania strony, dzięki czemu użytkownicy mogą szybciej niż dotychczas przeglądać zawartość strony.
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. Umieszczenie ich w innym miejscu w treści artykułu, np. na dole, zapewniłoby więcej opcji dla urządzeń mobilnych, jednocześnie umożliwiając ich umiejscowienie na urządzeniach mobilnych.
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.
Optymalizacja tabel pod kątem urządzeń mobilnych jest niezwykle trudna, a elementy prezentacyjne zwykle ulegają uszkodzeniu w wyniku innych optymalizacji dla urządzeń mobilnych.
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
Jeśli musisz używać tabel, zwróć uwagę, że w wersji mobilnej są one zaprojektowane w wersji responsywnej/elastycznej.
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. Jednym ze sposobów zapewnienia wskazówek dotyczących prezentacji, umożliwiających najlepsze parsowanie i wyświetlanie, jest zadbanie o to, aby szablony zawierały tylko jeden najbardziej zewnętrzny element HTML i aby element ten miał unikalną nazwę klasy CSS, wspólną dla wszystkich języków wiki. 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.
Jest to szczególnie problematyczne w przypadku artykułów nominowanych do usunięcia.
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 (po lewej) i Siergiej Sirotkin (po prawej)</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 (na górze) i Siergiej Sirotkin (na dole)</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
Aby zapewnić zgodność ze skórką Minerva, która będzie przeszukiwać te szablony w celu zrozumienia metadanych zawartych w tych klasach, upewnij się, że obrazy mają klasę .mbox-image (lub są zawinięte w element z klasą mbox-image).
Możesz dodać dodatkowe klasy (zgodnie z opisem poniżej), aby mieć pewność, że problem zostanie rozpoznany z odpowiednim poziomem ważności.
| 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>
Jeżeli jest dostępna (i edytorzy ją zaakceptują), Minerva może jej użyć do wybrania odpowiedniej ikony.
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.
Używanie MediaWiki:Mobile.css jest mocno niezalecane, ponieważ może to skutkować skumulowanym przesunięciem układu https://web.dev/cls/]. Dzieje się tak, ponieważ Mobile.css, w przeciwieństwie do komputerów stacjonarnych, ładuje się przez JavaScript i nie blokuje renderowania.
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; }