FANDOM


Czy wiecie, że ponad połowa odwiedzających FANDOM używa urządzeń mobilnych? To pokazuje jak ważne jest dostosowanie stron tak, aby poprawnie wyświetlały się na tabletach i telefonach. Bez tego ponad połowa czytelników nie będzie w stanie ich przeczytać.

Dotyczy to również stron głównych. To, że wyświetla się poprawnie na komputerach to nie znaczy, że będzie czytelna na urządzeniach mobilnych. W taki wypadku ponad połowa czytelników zastanie zepsutą stronę główną co może zakończyć ich przygodę.

Sprawdzanie kompatybilności z urządzeniami mobilnymi

Aby sprawdzić jak strona prezentuje się w wersji mobilnej, wystarczy w czasie edycji w edytorze klasycznym wybrać podgląd mobilny.

Pozwoli Ci to zobaczyć jak strona wygląda na przeciętnym urządzeniu mobilnym oraz pozwoli na określenie, które aspekty strony głównej nie działają poprawnie w wersji mobilnej. Zwróć uwagę, że ta funkcja nie jest dostępna w VisualEditorze, jako, że ten w dużym stopniu eliminuje potrzebę generowania podglądu artykułu.

Jeśli wolisz używać VisualEditora, albo chcesz sprawdzić jak strona główna wygląda w różnych rozdzielczościach, wiele współczesnych przeglądarek udostępnia funkcję emulacji przeglądarki mobilnej. W Google Chrome można ją włączyć w konsoli deweloperskiej (więcej informacji tutaj – ang.). Użytkownicy Safari mogą włączyć podobną funkcję w preferencjach przeglądarki poprzez zaznaczenie opcji „Pokaż menu Programowanie w pasku menu” w zakładce „Zaawansowane”. Po tym, aby wybrać przeglądarkę do emulacji (w tym wydania Safari na iOS) wybierz z menu „Programowanie” opcję „Klient użytkownika”.

Częste problemy z mobilnymi stronami głównymi

Istnieje kilka często spotykanych problemów ze stronami głównymi w wersji mobilnej, które mają wpływ na jej użyteczność. Poniżej znajdziesz kilka z nich oraz sposoby na ich rozwiązanie.

Obrazy nagłówkowe

Nagłówki w formie obrazów dodanych przez CSS nie wyświetlą się w skórce mobilnej. Chociaż jest możliwość wstawienia ich za pomocą [[Plik:]] to często nie ma to zamierzonego efektu przez ich rozmiar. Najprostszym rozwiązaniem jest dodanie ukrytych mobilnych nagłówków zaraz pod obrazem z nagłówkiem, które będą widoczne w wersji mobilnej, ale pozostaną ukryte w pełnej wersji strony. Powiedzmy, że chcemy nagłówek zawierający „Welcome”, który jest dodany przez CSS:

Przykładowy nagłówek z obrazkiem dodanym za pomocą CSS


HTML

<h2 title="Welcome" class="mainpage-header-welcome"></h2>

CSS

.mainpage-header-welcome {
    background: url("http://static.wikia.com/middleearthshadowofmordor7723/images/6/66/Mainpage-Header-Welcome.png") no-repeat scroll 0 0 transparent;
    border-bottom: medium none !important;
    height: 28px;
    margin: 21px auto 8px 12px !important;
    padding-bottom: 0px !important;
    width: 99%;
}

Nagłówek na komputerze

Shadow of Mordor image header

Dodając ukryty nagłówek poniżej tego z obrazem spowoduje pojawienie się go w wersji mobilnej.

Przykładowy obraz nagłówkowy wraz z nagłówkiem mobilnym


HTML

<h2 title="Welcome" class="mainpage-header-welcome"></h2>
<h2 style="display:none;">Welcome</h2>

Nagłówek w skórce mobilnej

Shadow of Mordor image header mobile

Zwróć uwagę na tag h2 ze stylem display:none, który mówi przeglądarce, aby ukryć ten element. Skórka mobilna usuwa wszystkie style z tagów dzięki czemu ten element będzie widoczny na urządzeniach mobilnych. Jest to prosty sposób chowania elementów w wersji desktopowej, które pozostaną widoczne w skórce mobilnej.

Jeśli dodajesz obrazy z nagłówkami za pomocą składni, rozważ użycie do tego celu CSS wraz z ukrytymi nagłówkami mobilnymi, aby działały poprawnie zarówno na komputerach jak i urządzeniach mobilnych.

Ankiety

Ankiety obecnie nie są kompatybilne ze skórką mobilną. Są one poprawnie wyświetlane, lecz na razie nie można w nich głosować. Obecnie trwają prace nad rozwiązaniem.

Lista blogów

Chociaż są one dobrze zorganizowane na komputerach, obecne listy blogów nie wyświetlają się poprawnie na urządzeniach mobilnych i trudno rozróżnić jednego bloga od drugiego. Listy blogów mają tendencje do zajmowania bardzo dużo miejsca na ekranie.

Na szczęście optymalizacja list jest dość prosta. Wystarczy zmniejszyć limit blogów do trzech oraz upewnić się, że funkcja podglądu treści jest wyłączona. Nagłówek bloga będzie linkiem do pełnej wersji, a autor dalej pozostanie widoczny. Dzięki temu lista będzie przystępna dla wszystkich czytelników, niezależnie od platformy, z której korzystają.

Przykład listy blogów zoptymalizowanej dla urządzeń mobilnych


HTML

<bloglist type=plain timestamp=true order=date category=News count=3>

Porównanie


Slidery

Mobile Slider

Jak slider wygląda w skórce mobilnej

Na urządzeniach mobilnych, obrazy w sliderze zostaną przycięte do kwadratów, wyśrodkowane i zgrupowane.

Przez ograniczoną ilość miejsca, podpisy zostaną skrócone, aby były widoczne, co ograniczy ich długość do 2-3 słów. Zauważ, że tekst na obrazie w sliderze może zostać zostać przycięty.

Jest to kolejna funkcja nad którą pracujemy i mamy nadzieje, że wkrótce pojawi się wersja bardziej przyjazna dla urządzeń mobilnych.

Porady, triki i sprawy techniczne

Elementy używające JavaScript i CSS

Niektóre wiki używają JavaScript i CSS w celu dodania własnych funkcji na stronach głównych lub do zmiany wyglądu istniejących. Takie zmiany prezentują się świetnie na komputerach, ale nie działa to dobrze na urządzeniach mobilnych, jak widać poniżej.

Przykład zaawansowanej, dostosowanej funkcji na komputerze i telefonie

Chociaż istnieją sposoby obejścia poprzez dodawanie elementów widocznych tylko w odpowiednich środowiskach, prosimy użytkowników Fandomu o zaniechanie implementowania funkcji JS/CSS i zamiast tego modyfikowanie obecnych elementów, które są bardziej uniwersalne.

Większe bloki tekstu

Przenieś większe elementy zawierające duże ilości tekstu na dół strony. Ogólną zasadą jest to, że im dalej użytkownicy muszą przewijać tym większa szansa, że przestaną zanim dostaną się do treści.

Prawa kontra lewa kolumna

Przeglądając wiki w wersji mobilnej, treść zawarta w prawej kolumnie zostanie wyświetlona poniżej tego co znajduje się w lewej/głównej kolumnie. Upewnij się, że najważniejsza treść, nawigacja itp. znajduje się w lewej kolumnie dzięki czemu użytkownicy mobilni uzyskają do niej szybki dostęp be potrzeby przewijania za daleko.

Przykłady

Zobacz poniższe porównanie przed i po strony głównej na Monster Hunter Wiki widocznej na komputerach i skórce mobilnej, aby zobaczyć jak wygląda optymalizacja w akcji.

Monster Hunter Wiki - na komputerze (przed i po)

Monster Hunter Wiki - na telefonie (przed i po)

Podsumowanie

Najważniejszą rzeczą, na którą warto zwrócić uwagę przy optymalizacji to elastyczność. Istnieje wiele sposobów na wyświetlanie treści. Jeśli znajdziesz taki, który działa na komputerach i urządzeniach mobilnych, to znaczy, że poprawiasz doznania drugiej połowy czytelników. W międzyczasie, FANDOM pracuje nad dostarczeniem naszym społecznościom najlepszych doznań mobilnych.

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