Як оформити Пагінація на сайтах

Здавалося б, впровадження пагінації - справа дрібниця, що займає не більше хвилини, і на цьому все. Або ж він може взагалі бути відсутнім, тому що, наприклад, тема wordpress оснащена ним за замовчуванням.

Ніщо не може бути далі від істини. Пагінацію дуже легко "відбити".

Пагінацію на сайтах можна розглядати з трьох точок зору: зручність використання, візуальне сприйняття та SEO. У цій статті будуть розглянуті лише перші два аспекти - третій залишений в резерві, тому що йому можна було б присвятити окремий і навіть досить великий текст.

Давайте перейдемо до конкретики.

Пагінація на веб-сайтах - 9 порад щодо її використання

1. Виділіть поточний сайт.

Почнемо з кліше.

Сторінка, на якій знаходиться користувач, має бути виділена.

Це можна зробити, застосовуючи колір безпосередньо до числа або надаючи колір фону цього числа.

Такий колір має бути унікальним для пагінації. І все це для того, щоб у користувача не виникло жодного сумніву в тому, для чого потрібна така різниця кольорів.

2. Зробіть посилання досить великими.

Я знаю, що для багатьох дизайнерів пагінація здається необхідним злом. Те, що, в принципі, не має права виглядати красиво, проте має бути присутнім на сторінці.

Тому вони намагаються повністю маргіналізувати його присутність, зокрема, використовуючи невеликий розмір для окремих елементів.

Це помилка. Чому?

Причина проста: кожен елемент має бути досить великим. Тим більше, якщо розглядаємо інтерактивний елемент, тобто. такий, що виконує дію при виборі.

Ситуація стає ще складнішою, коли таких елементів не тільки багато, а й коли вони зустрічаються зовсім поруч один з одним. І тут легко помилитися, наприклад, натиснути не таку кнопку. Це ще складніше на мобільних пристроях, де легше натиснути пальцем на ту сторінку.

Загалом, зробіть посилання досить великими. Простіше кажучи.

3. Використовувати колірну схему, що відповідає веб-сайту.

Я нічого не відкриваю, стверджуючи, що пагінація на веб-сайтах повинна відповідати за кольором зовнішнім виглядом окремих сайтів.

Якщо зовнішній вигляд такого сайту "вирізаний" з нуля, то навряд чи варто турбуватися про це.

Однак багато людей використовують деякі готові плагіни (у випадку з WordPress) або інші доповнення, які нав'язують заздалегідь певний стиль.

Однак у таких випадках не забудьте змінити стиль так, щоб він гармонійно поєднувався з рештою вашого сайту.

4. Створіть великий інтервал між посиланнями на окремі сторінки.

Цей пункт є деяким продовженням думки, викладеної у другому пункті.

Погляньте на зображення нижче:

Окремі посилання здаються правильного розміру, але відстань між ними, проте, занадто мала.

У таких випадках дуже легко вибрати іншу сторінку, ніж передбачалося. Користувачі мобільних пристроїв особливо схильні до цього, оскільки наш палець є менш точним покажчиком у порівнянні з курсором миші.

На жаль, немає чіткої відповіді на питання, наскільки більшим має бути відступ між елементами. Покладайтеся на свою інтуїцію, коли намагаєтесь знайти золоту середину.

5. Обмежити кількість доступних сторінок.

Іноді в різних блогах можна зустріти "потвори".

Хоча візуально окремі "плитки" все ще виглядають досить добре, загалом все виглядає погано.

Більше того, уявіть собі цей вид на мобільних пристроях, де в одному ряду поміститься, наприклад, лише 8 штук. Тоді вся пагінація матиме воістину колосальний розмір, оскільки шість рядів елементів майже зливатиметься один з одним.

Деякі читачі націлені на конкретну, дуже точну сторінку. Якщо ви дійсно хочете відобразити всі сторінки відразу, найкраще подавати їх у вигляді, наприклад, будь-якого меню. У будь-якій іншій ситуації обслуговування сторінок для користувачів з фіксованим інтервалом, наприклад, кожні десять сторінок буде працювати добре.

6. Додати посилання, такі як "наступний", "попередній", "перший", "останній".

У попередньому пункті я згадав, що деякі читачі націлюються на конкретну, дуже точну сторінку.

Набагато частіше за нас цікавить попередня або наступна сторінка, а можливо, перша чи остання. Саме ці чотири функціональні типи сторінок серед пагінації ми використовуємо найчастіше.

Питання: чи краще використовувати словесні позначення, чи краще обмежитися лише цифрами?

Слова завжди будуть максимально інтуїтивними. Однак недоліком є ​​те, що вони займають значно більше місця, ніж цифри.

Тому вся справа в тому, щоб правильно оформити пагінацію, використовуючи лише цифри. Якщо окремі посилання зрозумілі і однозначні для використання, можна сміливо замінювати ними слова.

7. Відшліфувати так званий slug в URL-адресах.

Пагінація на веб-сайтах обов'язково створює додаткові посилання у вигляді:

• page.com/blog/page/2/
• page.com/ page .com/blog/page/4/
• і т.д.

Я знаю, що багато людей не заперечують проти англійських вставок слова "page", які найчастіше генеруються різними CMS та доповненнями.

Однак давайте подумаємо ось про що: якщо на заміну "сторінки" на "сайт" піде буквально дві хвилини, можливо, це все-таки варто зробити? Зрештою, найчастіше ми маємо лише сторінки польською мовою, тому використання слова "сторінка" у таких випадках просто недбало.

Якщо ви використовуєте WordPress, то ви можете помістити наступний код у файл functions.php:

if ( ! function_exists( 'page_strona' ) ) register_activation_hook( __FILE__ , 'flush_rewrite_init ');

register_deactivation_hook( __FILE__ , 'flush_rewrite_init' );

add_action( 'init', 'page_strona' );

function page_strona()

{

global $wp_rewrite;

$wp_rewrite->pagination_base = 'strona';

$wp_rewrite->author_base = 'autor';

}

function flush_rewrite_init()

{

add_action('te ;

}

}

Завдяки цьому серед посилань на вашому сайті не тільки "сторінка" за замовчуванням WordPress, а й "автор" придбають свої польські.

8 Якщо ви використовуєте WordPress, зверніть увагу на плагін WP-PageNavi.

Залишаючись вищезгаданою CMS, про пагінацію повністю подбає плагін, згаданий у заголовку цього розділу, а саме WP-PageNavi.

З його допомогою ви можете легко встановити мітки для всіх функціональних сторінок ("перша", "остання", "наступна", "попередня" та багато інших), а також налаштувати кілька інших дуже корисних опцій.

Ви також можете використовувати CSS, підготовлений авторами, хоча, звичайно, ви можете залишитися і зі своїм власним.

Реалізація полягає в тому, щоб просто вставити відповідний рядок у шаблон вашої теми.

9. Як щодо так званої нескінченної прокрутки?

Це рішення, з яким ви стикаєтеся кожен день, наприклад, у Facebook.

Коли ви прокручуєте сторінку в самому низу перегляду серед новин, у вас немає кнопки "наступна сторінка", але вміст завантажується динамічно під нею.

Для деяких сайтів це неймовірно корисно, тому що позбавляє необхідності вручну завантажувати сторінку за сторінкою. Перегляд контенту стає просто безшовним.

Тому подумайте, чи буде функція нескінченного прокручування корисна на вашому сайті. Якщо ви вважаєте, що так, то зв'яжіться з людиною, яка відповідає за технічні аспекти вашого сайту, щоб реалізувати це рішення.

Чи є пагінація на веб-сайтах обов'язковою умовою?

Головною метою має стати максимально плавне, швидке та інтуїтивно зрозуміле вивчення користувачами вмісту вашого сайту.

Якщо він містить багато типів контенту, що повторюються (наприклад, пости в блозі), то, ймовірно, у нього також є сторінки, які об'єднують їх в єдине ціле (наприклад, головна сторінка блогу). Саме тут має відбуватися пагінація чи нескінченна прокрутка, згадана у дев'ятому пункті.

Сподіваюся, завдяки цій статті в блозі, пагінація на веб-сайтах не буде для вас занадто великою загадкою.