От автора: главной целью веб-дизайна и разработки является создание «прилипающих» веб-страниц, чтобы максимизировать среднее время пребывания на них. Привлечение пользователя убедительным контентом повышает лояльность к бренду, а также повышает вероятность того, что пользователь продолжит работу с сайтом и его рекламодателями.
Существует множество способов создать затягивающий контент и сервис, но возможно самый надежный – это ссылки на сопутствующие страницы. В случае с сайтом такие ссылки размещаются в трех местах: панель в верхней части страницы, релевантные ссылки по основному тексту страницы, а также меню «предыдущая – следующая статья» в нижней части страницы, которое направляет пользователя по логическому продолжению после прочтения текущей статьи. На сайте The New Code шаблон предыдущей и следующей статьи реализован через flexbox.
Механизм
Не у всех статей на The New Code есть логические связи со следующей и предыдущей статьей: к примеру, у первой статьи из списка для чтения будет следующая, но не будет предыдущей, а у последней будет предыдущая, но не будет следующей. Модуль навигации должен адаптироваться под такие условия, сохраняя пространственную связь с пользователем: следующая статья всегда находится справа, а предыдущая – слева.
Стоит заметить, что по-настоящему международный сайт будет менять позиции стрелок в некоторых случаях. В языках, которые читаются справа налево, как например, в арабском и иврите заложено, что будущее располагается левее, а прошлое или то, что идет до будущих событий располагается правее.
Начну с простейшего примера предыдущей и следующей статьи. Каждая ссылка содержит по два тега span: первый span служит оберткой для превью изображения статьи, во второй span заворачивается название статьи. Обратите внимание на то, что элементы расположены в противоположном порядке, сначала идет ссылка на следующую статью.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div id="prevnext" class="flex apart"> <a class="prev-one flex" href="/.." rel="prev" accesskey=","> <span class="thumb"> <img src="card-shuffle.jpg" alt" srcset="card-shuffle-2x.jpg 2x"> </span> <span class="articlename"> Shuffling and Sorting JavaScript Arrays </span> </a> <a class="next-one flex" href="/.." rel="next" accesskey="."> <span class="articlename"> JavaScript Fundamentals: Object Literals and Nested Arrays </span> <span class="thumb"> <img src="jet-nest.jpg" alt srcset="jet-nest-2x.jpg 2x"> </span> </a> </div> |
Разметка использует множество техник, о которых я рассказывал в предыдущих статьях:
атрибуты rel и сокращение accesskey для доступности и SEO;
атрибут srcset для графики на ретина дисплеях;
ряд классов, которые будут направлять элементы в CSS.
Модуль навигации очищается, чтобы ему ничего не мешало:
|
1 2 3 4 |
#prevnext { margin-top: 1rem; clear: both; } |
После того, как я начал использовать flexbox по всему сайту, я создал два общих класса-помощника, которые задавали элементам свойство display: flex и отталкивали контент двух блоков друг от друга. Для достижения обратной поддержки вам потребуется прописать вендорные префиксы.
|
1 2 3 4 5 6 |
.flex { display: flex; } .apart { justify-content: space-between; } |
У ссылок также прописан класс flex, то есть ссылкам задается свойство display: flexbox. Код ниже делает так, чтобы ссылки занимали одинаковое горизонтальное пространство и были выровнены по центру:
|
1 2 3 4 5 6 7 8 9 10 11 |
#prevnext a { font-size: smaller; align-items: center; } a.prev-one { flex: 1; } a.next-one { flex: 1; justify-content: flex-end; } |
Свойство justify-content: flex-end означает, что ссылка «следующая статья» всегда будет появляться в конце доступного пространства. У ссылок общие стили, которые также относятся и к основному тексту:
|
1 2 3 4 5 |
a { text-decoration: none; color: rgba(0,0,0,0.8); border-bottom: 1px solid #edd; } |
Размер тегов span задан, а изображения внутри них переделаны в кружки при помощи свойства border-radius:
|
1 2 3 4 5 6 7 8 |
#prevnext a span.thumb img { border-radius: 50%; overflow: hidden; width: 125px; min-width: 125px; height: 100%; border: 1px solid #ccc; } |
Названия статей отделены от изображений с помощью margin’а с соответствующей стороны. Текст правой ссылки по умолчанию выравнивается по левому краю, нам нужно поменять выравнивание на противоположное:
|
1 2 3 4 5 6 7 |
a.prev-one span.articlename { margin-left: 1rem; } a.next-one span.articlename { margin-right: 1rem; text-align: right; } |
Стрелки в обе стороны генерируются при помощи псевдоклассов:
|
1 2 3 4 5 6 |
a.prev-one span.articlename:before { content: "\2190 "; } a.next-one span.articlename:after { content: " \2192"; } |
Если нет ссылки на следующую статью, появится ссылка на предыдущую. Если нет предыдущей, справа появится ссылка на следующую статью.
Остается небольшая проблема. Если текст одной ссылки перепрыгивает на вторую или больше строк, теряется вертикально выравнивание текста у другой ссылки. Flexbox’ом такую проблему не решить: он хорошо справляется с выравниванием элемента по центру, но он не может заглядывать в будущее и подвигать второй элемент вверх, если текст первого занимает две строки. Однако данную проблему можно решить с помощью JavaScript, о чем я расскажу уже в следующей статье.
Источник: //thenewcode.com/
Редакция: Команда webformyself.
