Довгий час ФЕНДОМ знаходився в ар'єргарді тренда всього інтернету щодо активності користувачів мобільних пристроїв, тоді як в цілому в інтернеті таких користувачів ставало все більше, в вікі-спільноті, як і раніше, домінували користувачі персональних комп'ютерів та ноутбуків, але в 2017 році стався перелом, і тепер половина всіх читачів вікі-проектів використовують смартфони або планшети.
Більше адміністратори не можуть ігнорувати цю частину своєї аудиторії, яка хоче отримати доступ до вмісту вікі й бажає, щоб він коректно відображався на невеликому екрані, а якщо ви створюєте нову вікі, то тим більше маєте бути впевнені, що сторінки вікі відповідають сучасному вікі-дизайну.
Шаблони навігації[]
На початку історії існування самостійних вікі-проектів їхні користувачі намагалися копіювати з Вікіпедії (правила, шаблони, головну сторінку тощо). Одним з таких раритетів, який часто зустрічається на вікі-проектах, є шаблони навігації. Головна особливість цих шаблонів — відсутність однаковості. Деякі навігаційні шаблони розростаються до гігантських розмірів, які просто неможливо відобразити на мобільному пристрої.
Якщо ви створюєте на своїй вікі навігаційні шаблони, пам'ятайте, що їх не буде видно на мобільних пристроях, тому краще відмовитися від них або не робити з них ключа до навігації по вікі. Ось декілька порад:
- Якщо стаття є частиною групи статей, перевірте ще раз систему категорій вікі. Категорії відмінно видно користувачам мобільних пристроїв і вони можуть служити в якості навігації по вікі.
- Можливо, слід розширити вступну частину статті. Опис предмета статті набагато більш важливо для читачів і пошукових ботів за упорядкований список посилань внизу статті.
- Додайте навігацію в інфобокс. Наприклад, рядок попередня/наступна (гра або серія серіалу), посилання на галерею або групу статей, узагальнюючу категорію.
Вкладки й табуляції[]
Одним з елементів дизайну, який дуже складно адекватно відобразити на мобільному пристрої, є вкладки у верхній частині сторінки, що ведуть на підсторінки або сторінки, пов'язані з основною сторінкою. Через те, що їх часто оформляють з допомогою CSS, вони можуть некоректно відображатися на мобільному пристрої, зникати зовсім або навіть вести на порожню сторінку замість шуканої.
На відміну від вкладок, табуляція з використанням теґа Tabber може бути досить ефективним способом подання матеріалу на сторінці, але тільки при правильному використанні. Пам'ятайте, що не потрібно створювати безліч рядів вкладок. Це ускладнює використання сторінки. Читач елементарно може забути, на яких вкладках він вже побував, і пропустити важливу для себе інформацію. Також ніколи не вкладайте один теґ Tabber всередину іншого теґа Tabber. Від цього плутанина на сторінці стане ще більше. Якщо на вашій вікі є власний скрипт, який створює вкладки, аналогічні теґу Tabber, переконайтеся, що він коректно працює на невеликих екранах.
У мобільному скіні табуляція з теґом Tabber не відображається, і вміст кожної вкладки йде один за іншим на сторінці. Тому перш, ніж створювати табуляцію у статті, запитайте себе: чи так це необхідно? У переважній більшості випадків контент можна організувати з допомогою заголовків, що більш розумно та наочно.
На відміну від теґа Tabber, теґ Tabview в мобільному скіні видає набір посилань на статті, тому може служити хорошим варіантом для подання пов'язаних сторінок на одній сторінці, але краще всередині Tabview використовувати підсторінки до основної статті. Явна навігація в заголовку сторінки дозволить користувачам і пошуковим ботам легко повернутися на основну сторінку.
Інфобокси з новою розміткою[]
Про простоту та зручність інфобоксів з новою розміткою ми не раз розповідали раніше. В цьому блозі хотілося б відзначити, що інфобокси з новою розміткою мають суттєвий виграш у продуктивності, що важливо для не завжди швидкого мобільного інтернету. Шаблони призначені для того, аби виконати одну дію й виконати її добре. Якщо ви в інфобоксі на вікі-тексті (окрім самого інфобоксу) використовуєте вбудовані шаблони, то навантаження на сервер зростає ще більше.
Досить рідко зустрічаємий елемент — це кілька інфобоксів на одній сторінці. Це не рекомендується робити тому, що мобільному скіну важко визначити пріоритетний інфобокс. Інша крайність — це відсутність інфобокса на сторінці, однак система налаштована таким чином, що заголовок статті, якийсь опис і зображення фактично сприймається як інфобокс, незалежно від того, що насправді інфобокса немає. Тому краще використовувати інфобокси на сторінках вікі, аби полегшити їхню обробку програмою.
Галереї зображень[]
Омана, яка дуже часто зустрічається серед користувачів, це те, що чим більше зображень на сторінці, тим краще. Таким чином, на сторінці з'являється величезна галерея, яка просто кидає в читача купу зображень без організації, навігації та логіки. Навіть адекватні назви зображень не зможуть допомогти галереї в 50-100 зображень. Яке рішення цієї проблеми вибрати? Робіть галерею якомога компактніше. Можна зробити кілька невеликих галерей і розмістити їх по тексту статті. У результаті читачі не витрачатимуть час на прокрутку нескінченної кількості зображень не екрані смартфона, а переглядатимуть зображення як доповнення до тексту статті.
Пам'ятайте, що інфобокси не мають перетворюватися на галереї. Це безглуздо. Два-три зображення в інфобоксі для ілюстрації віку персонажа або того, як він виглядає в аніме та манзі, буде цілком достатньо. Не треба поміщати в інфобокс всілякі образи персонажа або предмета.
Непоганим варіантом для галерей з безліччю зображень є окремі сторінки галереї. У цьому випадку читач буде чітко та ясно розуміти, що він перейшов на цю сторінку, аби побачити зображення, але знову задумайтеся про навігацію. Краще розбити одну велику галерею на кілька маленьких і зробити сторінку-галерею як підсторінку до основної статті.
Таблиці[]
При правильному використанні таблиці дозволяють ефектно та ефективно представити дані на сторінці. Тим не менш, цей елемент дизайну, мабуть, найскладніший з точки зору невеликих екранів мобільних пристроїв.
Ось декілька порад щодо використання таблиць на вікі:
- Завжди перевіряйте те, як виглядають ваші таблиці на мобільному пристрої.
- Не робіть в таблиці більше 4 стовпців або стежте за тим, аби її загальна ширина не перевищувала 600рх. Якщо доводиться займатися прокруткою таблиці по горизонталі на екрані монітора, то на мобільному пристрої читач може просто загубитися у вашій таблиці.
- Не використовуйте вкладених таблиць.
- Намагайтеся рідше використовувати colspan та rowspan.
- Не включайте в таблицю зображення, якщо в цьому немає особливої необхідності або в таблиці більше 2-3 стовпців. В якості зображень в таблиці краще використовувати піктограми або невеликі зображення розміром до 25рх. У цьому випадку вони будуть правильно відображатися на екрані мобільного пристрою й не відсунуть таблицю за край екрану.
- Намагайтеся не використовувати шаблони всередині таблиць. Це ускладнює серверу обробку й так складного елемента.
Зверніть увагу, що будь-який елемент сторінки, а не тільки таблиці, матиме суттєві проблеми на екранах мобільних пристроїв, якщо його ширина перевищує 600рх. Навіть інфобокси з новою розміткою, якщо їм задати динамічну ширину за допомогою CSS, можуть працювати некоректно на невеликих екранах.
JavaScript[]
JavaScript дозволяє створювати цікаві елементи дизайну. Однак ці елементи не відображатимуться в мобільному скіні, тож якщо ви використовуєте JavaScript на сторінках своєї вікі, у вас має бути якийсь запасний план. Тобто, сторінка та контент на ній мають адекватно поводитися як з JavaScript, так і без нього. Не зловживайте JavaScript, інакше ваша сторінка перетворитися зі сторінки на функцію, до якої немає справи половині вашої аудиторії. Якщо ви за допомогою JavaScript створили якийсь калькулятор предметів або статистики, краще помістіть його на сторінці поза основного простору імен.
Сучасний дизайн будь-якого сайту зобов'язаний якісно та адекватно працювати на будь-яких пристроях, і вікі-сайт не має бути винятком із цього правила. Втілюючи наші рекомендації на практиці, ви зможете зробити вашу вікі привабливою для більш широкої аудиторії інтернет-користувачів.
У вас є питання або коментарі? Залиште їх нижче.