Fandom oferuje zoptymalizowaną mobilną wersję strony do przeglądania wiki na smartfonach i innych urządzeniach mobilnych. Około połowa odwiedzających korzysta z urządzeń mobilnych!

Gdy ktoś otwiera Fandom przez przeglądarkę w telefonie, trafia na tzw. FandomMobile – mobilną wersję strony, stworzoną z myślą o szybkim i wygodnym czytaniu artykułów. Jest ona nieco inna (ale tylko trochę!) niż wygląd wiki w aplikacji Fandom.

Strona mobilna została zoptymalizowana pod kątem systemów Android i iOS.

W praktyce te same zasady stosowane przy dostosowywaniu wiki do mobile web sprawdzają się również w aplikacji Fandom. Oto kilka wskazówek:

Dobre praktyki

Korzystaj z FandomMobile na własnej wiki

Jeśli na co dzień używasz wiki w wersji mobilnej, łatwiej zauważysz, jak poprawić jej wygląd. Pierwszy krok? Sprawdź, jak włączyć mobilną wersję!

  • Kiedy możesz, używaj prawdziwego telefonu. Symulatory nie odzwierciedlają wszystkiego — realne urządzenie daje najbardziej wiarygodny obraz.
  • Gdy nie masz telefonu pod ręką, sprawdź wygląd skórki ręcznie. Dodaj na końcu adresu URL stronę parametr ?useskin=fandommobile. Zwęż okno przeglądarki, aby symulować ekran telefonu lub użyj narzędzi deweloperskich Twojej przeglądarki. Pamiętaj jednak, że to nigdy nie odda wyglądu w 100%.
  • Większość osób na świecie nie korzysta ze szczególnie szerokich telefonów. Popularna szerokość ekranu to około 360 px (np. 360×800 lub 390×844). Jeśli wiki dobrze wygląda przy takiej szerokości, będzie wyglądać dobrze prawie wszędzie.

Organizacja strony

Jeśli strony w Twojej społeczności są proste, zrozumiałe i elastyczne — z jasną hierarchią i przejrzystym układem — wiki lepiej dostosuje się do różnych urządzeń.

Zwróć szczególną uwagę na to, co znajduje się na górze strony — na skórce mobilnej zawsze pojawia się tam infoboks. Upewnij się, że Twoje infoboksy są do niej przystosowane.

Obrazy

Umieszczaj obrazy przy tekście, który opisują. Przenoszenie obrazów do innych sekcji może poprawić wygląd na komputerze, ale na telefonie spowoduje, że grafika przestanie ilustrować odpowiedni fragment treści.

UWAGA: Obrazy o szerokości 50 px lub mniejszej są automatycznie wyświetlane jako ikony. Mogą być trudne do zobaczenia na urządzeniach mobilnych.

Nawigacja

Nawigacja jest dostępna po kliknięciu na ikonę u góry strony

Nawigacja jest dostępna po kliknięciu na ikonę u góry strony

Lokalna nawigacja jest kluczowa dla użytkowników mobilnych. Powinna być prosta, czytelna i zorganizowana. Używaj krótkich nagłówków i — jak zawsze — sprawdzaj na telefonie, jak wygląda.

Czego unikać

Komunikaty

Niektóre wiki umieszczają na górze strony szablony z ostrzeżeniami lub uwagami — tzw. "komunikaty". Zajmują one dużo miejsca na telefonie, a wielu użytkowników mobilnych nie chce się przez nie przewijać. Rozważ przeniesienie takich szablonów — zwykle skierowanych bardziej do edytorów niż czytelników — na strony dyskusji lub strony zasad.

Jeśli społeczność nie zgadza się na takie przenosiny, nadaj tym szablonom typ szablonu Komunikat — dzięki temu mobilni użytkownicy nie będą musieli ich oglądać.

Tabele

Używaj tabel ostrożnie. Sprawdzają się przy danych, ale nie nadają się do budowania układu strony. Tabele tworzą sztywny layout, który trudno dostosować do telefonów. Staraj się korzystać z alternatyw: galerii, pokazów slajdów lub znaczników div — są znacznie bardziej elastyczne.

Nawet poprawnie użyte tabele mogą być zbyt szerokie, przez co wymagają przewijania w poziomie. Zastanów się, czy naprawdę potrzebujesz tylu kolumn.

Jeśli to możliwe, rozbij duże tabele na dwie mniejsze — łatwiej dopasują się do ekranu.

Navboksy

Navboksy mają układ poziomy, typowy dla szerokich ekranów — dlatego nie mieszczą się dobrze na telefonach w orientacji pionowej. Staraj się ograniczać ich liczbę. Oceń, czy nawigacja kategorii nie spełnia tej samej funkcji. Upewnij się też, że każdy navboks typ szablonu Navboks.

Inline CSS

Modyfikacje definiowane za pomocą inline CSS nie działają w skórce mobilnej (wyjątkiem są wiki pochodzące z dawnej Gamepedii). Przykładowo, style="background-color: #ffffff" nie zmieni koloru tła na wersji mobilnej.

Zamiast tego używaj klas wraz z TemplateStyles (zalecane dla stylów pojedynczych stron) lub MediaWiki:FandomMobile.css (dla stylów globalnych).

Nawiązując do poprzedniego przykładu, aby poprawnie zmienić tło, użyj:

  • w kodzie: class="background-white"
  • w stylach: .background-white { background-color: #ffffff; }

Unikaj stylowania z użyciem inline CSSu — stosuj TemplateStyles lub stronę CSS wiki, aby zapewnić poprawne wyświetlanie na mobile.

FAQ

Czy mogę edytować treść?
Tak. Dostępny jest edytor mobilny.
Jak dużo wiki dostępnych jest w mobilnej wersji?
Wszystkie strony są dostępne za jej pośrednictwem.
Czy istnieje jakaś zawartość jakiej nie zobaczymy przy użyciu mobilnej skórki?
Większość stron wiki składających się jedynie z tekstu i obrazów wygląda bardzo dobrze w mobilnej wersji. ednak strony z bardzo skomplikowanymi układami (np. wielokolumnowymi) mogą wyglądać gorzej. Przenośne infoboksy są w pełni zoptymalizowane pod urządzenia mobilne.
Czy mogę przełączać się między wersją mobilną a komputerową?
Tak. Na samym dole na stronach mobilnych znajduje się link "Zobacz pełną wersję". Naciśnij go, aby przełączyć się na widok komputerowy. Aby wrócić, użyj „Zobacz wersję mobilną” u dołu strony.
Możesz też wymusić preferowany widok dodając parametr useskin do adresu URL — odpowiednio ?useskin=fandomdesktop dla widoku komputerowego i ?useskin=fandommobile dla widoku mobilnego.

Zobacz też

Dalsze wsparcie

Szukasz dalszego wsparcia lub masz pytanie? Sprawdź poniższe linki, aby dowiedzieć się więcej.