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 Wikię na tabletach i telefonach?[1]
Poniższy poradnik pozwoli Ci na budowanie i formatowanie treści taka 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?
Wikia, 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 Wikii, 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ą Wikii 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ę one poprawnie na urządzeniach mobilnych, dodaj class="infobox"[2] do głównej tabeli struktury infoboksa.
- Przykład
Zobacz szablon Aktor infoboks na The Walking Dead Wiki, aby zobaczyć jak jest skonstruowany
{| class="infobox"
|-
[...]
- Podgląd
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.
- Zbudować szablon z divów, nie tabeli oraz użycie
class="quote"lubclass="blockquote"w odpowiednim elemencie. - 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 to 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 Wikię to: spoiler, disambig (ujednoznacznienie), stub (zalążek), maintenance (zarządzanie), and informational (informacje).
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.
- ↑ Wikia Network — Quantcast.com
- ↑ Wspierane są również klasy
wikia-infoboxorazinfobox-table. Można również zbudować infoboks za pomocą InfoboxBuildera