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

Казалось бы, внедрение пагинации - дело пустяковое, занимающее не более минуты, и на этом все. Или же он может вообще отсутствовать, потому что, например, тема wordpress оснащена им по умолчанию.

Ничто не может быть дальше от истины. Пагинацию очень легко "отбить".

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

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

Пагинация на веб-сайтах - 9 советов по ее использованию

1. Выделите текущий сайт.

Начнем с клише.

Страница, на которой находится пользователь, должна быть выделена.

Это можно сделать, применяя цвет непосредственно к числу или придавая цвет фону этого числа.

Такой цвет должен быть уникальным для пагинации. И все это для того, чтобы у пользователя не возникло ни малейшего сомнения в том, для чего нужно такое цветовое различие.

2. Сделайте ссылки достаточно большими.

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

Поэтому они стараются полностью маргинализировать его присутствие, в частности, используя небольшой размер для отдельных элементов.

Это ошибка. Почему?

Причина проста: каждый элемент должен быть достаточно большим. Тем более, если мы рассматриваем интерактивный элемент, т.е. такой, который выполняет действие при выборе.

Ситуация становится еще более сложной, когда таких элементов не только много, но и когда они встречаются совсем рядом друг с другом. В этом случае легко ошибиться, например, нажать не на ту кнопку. Это еще сложнее на мобильных устройствах, где легче нажать пальцем не на ту страницу.

В общем, сделайте ссылки достаточно большими. Проще говоря.

3. Использовать цветовую схему, соответствующую веб-сайту.

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

Если внешний вид такого сайта "вырезан" с нуля, то вряд ли стоит беспокоиться об этом.

Однако многие люди используют некоторые готовые плагины (в случае с WordPress) или другие дополнения, которые навязывают заранее определенный стиль.

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

4. Создайте достаточно большой интервал между ссылками на отдельные страницы.

Этот пункт является некоторым продолжением мысли, изложенной во втором пункте.

Взгляните на изображение ниже:

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

В таких случаях очень легко выбрать другую страницу, чем предполагалось. Пользователи мобильных устройств особенно подвержены этому, поскольку наш палец является менее точным указателем по сравнению с курсором мыши.

К сожалению, нет четкого ответа на вопрос, насколько большим должен быть отступ между элементами. Полагайтесь на свою интуицию, когда пытаетесь найти золотую середину.

5. Ограничить количество доступных страниц.

Иногда в различных блогах можно встретить "чудовищ".

Хотя визуально отдельные "плитки" все еще выглядят достаточно хорошо, в целом все выглядит плохо.

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

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

6. Добавить ссылки, такие как "следующий", "предыдущий", "первый", "последний".

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

Гораздо чаще нас интересует предыдущая или следующая страница, а возможно, первая или последняя. Именно эти четыре функциональных типа страниц среди пагинации мы используем чаще всего.

Вопрос: лучше ли использовать словесные обозначения, или лучше ограничиться только цифрами?

Слова в принципе всегда будут максимально интуитивными. Однако недостатком является то, что они занимают значительно больше места по сравнению с цифрами.

Поэтому все дело в том, чтобы правильно оформить пагинацию, используя только цифры. Если отдельные ссылки понятны и однозначны для использования, то можно смело заменять ими слова.

7. Отшлифовать так называемый slug в URL-адресах.

Пагинация на веб-сайтах обязательно создает дополнительные ссылки в виде:

• page.com/blog/page/2/
• page.com/blog/page/3/
• 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( 'init', 'flush_rewrite_rules', 11 );

}

}

Благодаря этому среди ссылок на вашем сайте не только "страница" по умолчанию WordPress, но и "автор" приобретут свои польские эквиваленты.

8 Если вы используете WordPress, обратите внимание на плагин WP-PageNavi.

Оставаясь с вышеупомянутой CMS, о пагинации полностью позаботится плагин, упомянутый в заголовке этого раздела, а именно WP-PageNavi.

С его помощью вы можете легко установить метки для всех функциональных страниц ("первая", "последняя", "следующая", "предыдущая" и многие другие), а также настроить несколько других очень полезных опций.

Вы также можете использовать CSS, подготовленный авторами, хотя, конечно, вы можете остаться и со своим собственным.

Реализация заключается в том, чтобы просто вставить соответствующую строку в шаблон вашей темы.

9. Как насчет так называемой бесконечной прокрутки?

Это решение, с которым вы сталкиваетесь каждый день, например, в Facebook.

Когда вы прокручиваете страницу в самом низу просмотра среди новостей, у вас нет кнопки "следующая страница", но содержимое загружается динамически под ней.

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

Поэтому подумайте, будет ли функция бесконечной прокрутки полезна на вашем сайте. Если вы считаете, что да, то свяжитесь с человеком, ответственным за технические аспекты вашего сайта, чтобы реализовать это решение.

Является ли пагинация на веб-сайтах обязательным условием?

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

Если он содержит много повторяющихся типов контента (например, посты в блоге), то, вероятно, у него также есть страницы, которые объединяют их в единое целое (например, главная страница блога). Именно здесь должна происходить пагинация или бесконечная прокрутка, упомянутая в девятом пункте.

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