FANDOM


Wiedzieliście, że treść, którą wszyscy tworzycie jest czytana przez ponad 100 milionów czytelników z całego świata miesięcznie? A czy wiedzieliście, że ponad połowa tych ludzi odwiedza Fandom na tabletach i telefonach?[1]

Poniższy poradnik pozwoli Ci na budowanie i formatowanie treści tak, aby prezentowała się najlepiej na wszystkich urządzeniach. Czy to na bogatych i dynamicznych komputerach osobistych, na naszej czytelnej skórce mobilnej, czy w naszych wyspecjalizowanych aplikacjach mobilnych.

Jakie są najlepsze praktyki?

Fandom, we współpracy z doświadczonymi administratorami i członkami społeczności, utworzyła zestaw porad mówiących co najlepiej robić, a czego unikać przy tworzeniu treści i szablonów. Pozwalają one na wspieranie kreatywności, która jest wszechobecna na Fandomie, jak i zachęcać do podążania za standardami i praktykami współczesnej sieci.

Poniższe porady są łatwe w zastosowaniu w obecnych szablonach i treści. Większość zmian nie będzie miała wpływu na działanie i wygląd w wersji desktopowej, ale znacznie poprawi ich wyświetlanie na telefonach i tabletach, włączając w to nasze Aplikacje Społeczności. Dodatkowo, podążanie za tymi praktykami pozwoli na podniesienie pozycji w rankingach SEO oraz zmniejszenie czasu ładowania.

Istnieje już duża doza współpracy i podobieństw między społecznościami, ale te zmiany pozwolą Fandomowi na lepsze identyfikowanie różnego rodzaju treści (infoboksów, navboksów, cytatów, itp.) oraz odpowiednie wyświetlanie ich, co pozwala dostarczene najlepszych doznań dla czytelników oraz redaktorów.

Infoboksy

Infoboksy są najbardziej popularnym elementem w artykułach na wszystkich wikiach. Żeby wyświetlały się poprawnie na urządzeniach mobilnych, stwórz szablon za pomocą składni opisanej na stronie Pomoc:Przenośne infoboksy.

Cytaty

Na wielu wiki można spotkać się z cytatami na stronach artykułów. Stanową one świetne wycinki treści, które czytelnicy lubią czytać i się nimi dzielić. Są dwa sposoby na stworzenie dobrego szablonu cytatu.

  1. Zbudować szablon z divów, nie tabeli oraz użycie class="quote" lub class="blockquote" w odpowiednim elemencie.
  2. Użycie tagu <blockquote>...</blockquote> do budowy szablonu
Przykład

Zobacz szablon Cytat na League of Legends Wiki, aby zobaczyć jak jest skonstruowany

<div class="quote">{{{Treść cytatu}}}</div>

lub

<blockquote>''{{{Treść cytatu}}}'' — <cite>{{{Autor}}}</cite></blockquote>
Podgląd

Tabele

Porady dotyczące tabel są bardziej skomplikowane, ale ich niepoprawne użycie może mieć wyjątkowo niepożądane skutki na to jak artykuły są wyświetlane na dowolnych urządzeniach – komputerach, tabletach czy telefonach.

Pierwszą praktyką jest unikanie budowania i formatowania stron tylko przy użyciu tabel. Tabele powinny być używane do wyświetlania zorganizowanych danych, takich jak statystyki broni w grze, czy listę aktorów w odcinku. Aby osiągnąć odpowiedni wygląd artykułu, użyj współczesnych praktyk HTML i CSS, takich jak te zademonstrowane na W3Schools.com.

Drugą ważną uwagą jest unikanie zagnieżdżania tabel, tj. umieszczania tabeli wewnątrz innej tabeli. Zamiast tego łącz komórki gdzie się da lub podążaj za konwencjami W3Schools.

Trzecią poradą jest dodawanie rozsądnej ilości kolumn i wierszy, aby upewnić się, że tabela jest czytelna zarówno na komputerach, jak i na urządzeniach mobilnych. W razie potrzeby można podzielić jedną tabelę na kilka mniejszych, bardziej przystępnych dla czytelnika.

Nadchodzące...

Poniższe praktyki jeszcze nie mają zastosowania w wersji mobilnej, ale zostaną wprowadzone w roku 2015. Nie zaszkodzi jednak ich stosować już teraz.

Komunikaty

Komunikaty są elementami, które pojawiają się na samej górze artykułu i zawierają informacje dla czytelników i redaktorów.

Żeby komunikaty dobrze wyświetlały się na urządzeniach mobilnych, użyj class="notice" w najwyższym elemencie komunikatu (pierwszy div lub tabela). Możesz również określić rodzaj komunikatu poprzez dodanie dodatkowej klasy (np: class="notice spoiler").

Pięć kategorii, które będą rozpoznawane przez Fandom to: spoiler, disambig (ujednoznacznienie), stub (zalążek), maintenance (zarządzanie), and informational (informacje).

Navboksy

Navboksy (szablony nawigacyjne) są używane na wielu wiki, aby pomóc czytelnikom znaleźć drogę do podobnych artykułów. W większości wypadków są umieszczane na samym dole strony.

Aby wyświetlały się poprawnie na urządzeniach mobilnych, użyj class="navbox" na najwyższym elemencie struktury szablonu.

Zwijane elementy

Wiele społeczności używa zwijanych elementów, aby zaoszczędzić miejsce, chowają informacje za przyciskiem „Pokaż”. Często są to navboksy.

Aby te funkcje poprawnie działały, użyj class="mw-collapsible" przy budowie. Użycie class="collapsible" również będzie rozpoznawane. Klasy te mogą być połączone z innymi.

Przewijane elementy

Podobnie do elementów zwijanych, wiele wiki używa pól, których treść może być przewijana, minimalizując w ten sposób zajmowane miejsce.

Żeby takie elementy działały na urządzeniach mobilnych, użyj class="scrollable" przy budowie szablonu lub elementu. Klasa ta może być połączona z innymi.

Uwagi

Pamiętaj, że zawsze możesz użyć podglądu mobilnego w edytorze klasycznym, aby szybko sprawdzić wygląd na urządzeniach mobilnych.

  1. Wikia Network — Quantcast.com
Treści społeczności są dostępne na podstawie licencji CC-BY-SA , o ile nie zaznaczono inaczej.