FANDOM


Na temat Mercury'ego (skórki mobilnej FANDOMU) krąży wiele opinii, niestety większość niecenzuralnych. Szkoda, bo prawie zawsze powodem są nie najlepsze pierwsze wrażenia lub brzydko wyglądającą wiki, ale z winy edytora, a nie skórki.

Mercury Blog 1

Według quantcast.com 62% ruchu na wikia.com pochodzi z urządzeń mobilnych.

Niestety, czy tego chcemy, czy nie urządzenia mobilne stanowią większość ruchu na wikia.com, a niewątpliwa większość użytkowników urządzeń mobilnych skorzysta właśnie z Mercury'ego. Obecnie aż 62% globalnego ruchu na FANDOMIE pochodzi z urządzeń mobilnych.


Dobry, zły i brzydki Edytuj

Niezależnie od tego z jakiej skórki korzystamy może ona wyglądać źle lub dobrze. Mercury nie jest tu wyjątkiem. Jeżeli tworzymy szablon/artykuł sprawdzamy, czy wygląda dobrze na skórce z której korzystamy. Niestety często tylko na niej. W drugiej kolejności zazwyczaj zaglądamy na Monobooka i o ile dbanie o tę skórkę nie jest czymś złym, nie można zaprzeczyć, że Monobook umiera. Mniej niż 0.01% ruchu pochodzi z Monobooka, czyli około 6200 razy mniej niż z Mercury'ego.

Właśnie dlatego nasze szablony i artykuły powinniśmy tworzyć z myślą o naszej ukochanej skórce mobilnej. Poniżej zamieszczam kilka zrzutów ekranu artykułów sprzed optymalizacji pod względem urządzeń mobilnych i po niej:

Mercury Blog 2

Artykuł Geralt na Gwint Wiki przed optymalizacją. Linki przerywają tekst, a cytat nie jest wyróżniony.

Mercury Blog 3

Ten sam artykuł po optymalizacji. Linki nie zaburzają układu tekstu, a cytat jest wyróżniony. Całość wygląda znacznie schludniej.


Mercury Blog 4

Szablon:Umiejętność z LoL Wiki sprzed ulepszeń Nanakiego. Tekst w dwóch kolumnach wygląda brzydko, obraz umiejętności w ogóle się nie wyświetla.

Mercury Blog 5

Szablon:Umiejętność2, wersja zoptymalizowana pod mobilne urządzenia przez Nanakiego.


Mercury Blog 6

Przykład z Portability Hub, nieprzenośny infoboks na urządzeniu mobilnym. Puste pola niepotrzebnie się wyświetlają, szablon nie wygląda schlunie.

Mercury Blog 7

Dla porównania przenośny infoboks na urządzeniu mobilnym.


Podgląd skórki mobilnej Edytuj

Jest kilka sposobów na podejrzenie skórki mobilnej, zacznę od – moim zdaniem – gorszych:

Teraz pora na dwa najlepsze – moim zdaniem – sposoby podglądu skórki mobilnej:

  • Zobaczenie strony na urządzeniu mobilnym.
    • Jest to jeden z prostszych sposobów, ale działa świetnie. W końcu z myślą o tym został stworzony Mercury.
  • Symulacja urządzenia mobilnego za pomocą narzędzi deweloperskich.
    • Moim zdaniem najlepszy sposób na sprawdzenie artykułu na Mercurym, jest w stanie symulować różne smartfony, automatycznie włącza skórkę mobilną, stronę przeglądamy swipe'ując myszką, niczym palcem na urządzeniu mobilnym. Pozwala na łatwe wykonywanie zrzutów ekranu danej części strony, oraz całej strony.
    • Ta funkcja znajduje się na pewno w Chrome'ie oraz Firefoxie, przy czym testowałem tylko na tym pierwszym.

Porady Edytuj

Ok, to był dość długi wstęp, teraz pora na główną część:

  • Przenośne infoboksy – nie spotkałem się jeszcze z przypadkiem infoboksu, którego skonwertowanie nie byłoby wskazane. Przenośne infoboksy są przenośne (tak, wiem, zadziwiające), co znaczy, że wyglądają i działają dobrze na wszystkich skórkach. Wprowadzają kilka funkcji ciężkich do zaimplementowania w starych infoboksach (np. zwijanie grup, galerie obrazów, motywy). Po prostu są świetne. Praktycznie wszystkie infoboksy powinny zostać zamienione na przenośne infoboksy, można poszukać na swoją rękę informacji o migracji (chociażby pod wstawionym wyżej linkiem lub w źródłach na dole) i zająć się tym lub poprosić o pomoc kogoś doświadczonego. A może najlepszym rozwiązaniem dla Ciebie będzie skorzystanie z Infobox Buildera?
    Mercury Blog 8

    Kreatywne zastosowanie infoboksów.

    • Czasami przenośne infoboksy mogą być użyte... nie tylko do robienia infoboksów, przykładem jest przenośna nawigacja lub nagłówek.
  • Rodzaje szablonów – na Oasisie rodzaje szablonów nie zmieniają niczego oprócz klasyfikacji (z wyjątkiem infoboksu, który pozwala używać Infobox Buildera). Natomiast na Mercurym sprawa wygląda lekko inaczej: klasyfikacja szablonu zmienia sposób jego wyświetlania na stronie. Wymienię tylko najważniejsze zmiany:
    Mercury Blog 9

    Navboksy na Mercurym wyglądają... nie najlepiej.

    • Komunikat, Navboks i Nawigacja – celowo schowane na skórce mobilnej.
    • Link kontekstowy – wyświetla się z paddingiem i kursywą.
      Mercury Blog 10

      blockquote wygląda strasznie ładnie na Mercurym, div nie.

    • Cytat – wyświetla jako blockquote.
    • Infoboks – patrz na sekcję Przenośne infoboksy.
  • Tabele – tabele są dobre... jeżeli są wykorzystywane tak jak powinny, czyli do wyświetlania informacji, a nie pozycjonowania elementów na stronie.
    • Do pozycjonowania elementów/tworzenia układu strony możesz zamiast tabeli skorzystać z float, columns lub flexbox.
    • Unikaj zagnieżdżonych tabeli (tzn. tabeli w tabelach), sprawiają wiele problemów.
    • Staraj się nie zmieniać niczego oprócz wyglądu tabeli za pomocą niestandardowych klas lub atrybutu style. Natomiast możesz bezpiecznie korzystać z standardowych klas, takich jak article-table.
  • Mobilna strona główna – edytor strony głównej jest na tyle łatwy w obsłudze, że nie ma się nad czym rozpisywać, zaprojektowanie strony głównej nie wymaga dużego wysiłku, a przynosi sporo korzyści.
    Mercury Blog 11

    Porównanie różnych sposobów utworzenia kursywy, na Oasisie i Mercurym; od góry: semantyczne elementy, atrybut style, klasy, wikitekst.

  • Używaj wikitekstu i semantycznych elementów zamiast stylu – wikitekst i semantyczne elementy (w szczególności blockquote i cite) są zrozumiane przez Mercury'ego, CSS – niekoniecznie.


Podsumowanie Edytuj

Nie taki Mercury straszny, jak go malują. Śpieszmy się kochać skórki, bo tak szybko odchodzą.

Podziękowania Edytuj

Specjalne podziękowania dla:

  • Luqgrega za pomoc z Mercury'owymi zagwozdkami (polecam tego Vanguarda użytkownika).
  • Nanakiego za genialne przykłady optymalizacji szablonów pod urządzenia mobilne na LoL Wiki.

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.