Анализ “хлебных крошек” на российских сайтах. | by Yana Delyukina | Дизайн-кабак

Что это такое и как их используют.

“Хлебные крошки” (“breadcrumbs”) — это элемент интерфейса в навигации сайта/программы, который показывает путь от главного элемента до того, на котором находится пользователь. Помогает пользователю помнить, на какой странице он находится, и вернуться на предыдущие, не заблудившись в разделах сайта.

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

Пример “хлебных крошек”, с которым мы часто взаимодействуем — файловая система в компьютерах.

Вы видите весь путь, по которому прошли, пока не попали в нужную папку.

Я сделала небольшой анализ, как используют “хлебные крошки”на российских сайтах.

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

Утконос. Десктопная версия

В мобильной версии весь путь “хлебных крошек” выстроен в одну строку, без переносов, поэтому есть горизонтальный скролл.

Утконос. Мобильная версия

Перекресток

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

Перекресток. Десктопная версия

В мобильной версии “хлебные крошки” не используются, появляется кнопка Назад, которая ведет себя как браузерная кнопка Назад (возвращает на предыдущую страницу), но не на уровень выше, как ожидается.

Перекресток. Мобильная версия

Вкусвилл

В десктопной версии представлены “хлебные крошки”, разделитель — косая черта.

Вкусвилл. Десктопная версия

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

При этом на страницах категорий “хлебные крошки” появляются.

Вкусвилл. Мобильная версия

В десктопной версии представлены “хлебные крошки”, и, как у Вкусвилла, в качестве разделителя — косая черта. Но в “хлебные крошки”не попала страница товара, на которой мы находимся.

lamoda. Десктопная версия

В мобильной версии нет “хлебных крошек”, вместо них используется кнопка, которая возвращает в категорию этого товара и сообщает как она называется.

lamoda. Мобильная версия

Сима-ленд

Используется выпадающее меню в “хлебных крошках”, т.е. мы можем переключаться между категориями/подкатегориями, находясь в интерфейсе “крошек”.

Сима-ленд. Десктопная версия

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

Сима-ленд. Мобильная версия

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

booking. com. Десктопная версия

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

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

booking.com. Мобильная версия

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

Газпром. Десктопная версия

И по большому счету, мобильная версия сайта мало чем отличается от десктопной.

Газпром. Мобильная версия

Камаз

На сайте Камаза приходит осознание, насколько давно используются “хлебные крошки”. У этого сайта даже нет мобильной версии, а вот “хлебные крошки” — есть.

Nielsen Norman Group рекомендовали использовать “хлебные крошки” еще в 1995 году.

Камаз. Десктопная версия

Альфа-Банк

У этого сайта очень сложная и непонятная структура, “хлебные крошки” то появляются, то исчезают.

Например, на скриншоте ниже “хлебные крошки” указывают, что Ипотека — это подкатегория Кредитов, но в навигационном меню выше видно, что Ипотека и Кредиты находятся на одном уровне.

Альфа-Банк. Десктопная версия.

Другой пример: Средний и крупный бизнес (1 уровень) > Размещение средств (2 уровень)> Процентные ставки (3 уровень). И вместо “хлебных крошек” видим только ссылку на первый уровень.

Альфа-Банк. Десктопная версия.

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

Джефф Джимерсон, главный креативный директор компании Madison Ave. Collective, в своей статье “We’ve All Been Doing Breadcrumbs Wrong” (ноябрь, 2019 год) предлагает свой вариант использования “хлебных крошек”. Выглядит он вот так:

Десктопная версия. Картинки из статьи Джеффа Джимерсона

Вот в чем заключается его подход:

• для декстопной версии сайта используйте стрелки влево, таким образом показываете, что можно вернуться назад
• при использовании стрелок влево — не нужно включать текущую страницу в цепочку “хлебных крошек”
• в идеале, разделяйте “хлебные крошки” тремя или четырьмя символами, чтобы каждая стрелка и текстовая ссылка рассматривались как одно целое

Update: в 2020 году на этом сайте уже используются самые обычные “хлебные крошки”.

Linn-Benton Community College. Десктопная версия.

Вывод

Для e-commerce использование “хлебных крошек” оправдано, так как обычно у них сложная структура каталога из-за разнообразия категорий, подкатегорий товаров, и пользователю действительно нужно в них ориентироваться.

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

У корпоративных сайтов со структурой все в порядке: строго и линейно.

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

Bbreadcrumbs в web-дизайне: применение и примеры

На сайтах с множеством страниц навигационная цепочка (breadcrumb navigation) может значительно помочь посетителям ориентироваться в иерархической структуре документов и указать текущее местоположение пользователей на сайте.  С точки зрения юзабилити, «хлебные крошки» могут сократить число действий посетителя, чтобы найти путь на верхний уровень страницы. 

Что такое breadcrumb?

Навигационная цепочка (Навигационное меню, «Хлебные крошки», англ. Breadcrumbs) — элемент навигации по веб-сайту, представляющий собой путь по сайту от его «корня» до текущей страницы, на которой находится пользователь.

Название «Хлебные крошки» является иронической отсылкой к немецкой сказке «Гензель и Гретель», в которой дети, когда их завели в лес во второй раз, не смогли найти обратную дорогу, так как на этот раз вместо маленьких камешков они оставляли за собой хлебные крошки, впоследствии склёванные лесными птицами.

Обычно вы можете просмотреть «хлебные крошки»  на сайтах с большим количеством контента, который размещен в иерархическом порядке.  Самая простая форма, когда навигационная цепочка представлена в виде горизонтально расположенных текстовых ссылок  и разделенных символов (> -«больше»), который указывает на уровень этой страницы относительно остальных страниц.

Когда нужно использовать Breadcrumbs?

Используйте навигационную цепочку для крупных веб-сайтов и веб-сайтов с  иерархической организацией страниц. 

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

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

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

Виды Breadcrumbs

Существуют три основных вида «хлебных крошек». 

На основе местоположения 

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

На основе свойств

«Хлебные крошки» на  основе свойств отражают атрибуты конкретной страницы.

На основе пути

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

Преимущества использования Breadcrumbs

Они могут помочь пользователю 

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

Снижает  количество кликов или действий для возвращения на страницы более высокого уровня

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

Как правило, не  засоряют экран

Они, как правило, имеют горизонтальную ориентацию и поэтому не занимают на странице много места. 

Снижают показатель отказов

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

Ошибки при использовании Breadcrumbs

Использовать «хлебные крошки»  достаточно просто. Но прежде, чем реализовывать их на сайте , нужно рассмотреть некоторые ошибки, которых следует избегать. 

Использование навигационных цепочек, когда в этом нету необходимости

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

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

Использование «хлебных крошек» в качестве основной навигации

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

Использование «хлебных крошек», когда страницы имеют несколько категорий

Навигационные цепочкм имеют линейную структуру, поэтому их будет трудно использовать, если ваши страницы не могут быть разделены на четкие категории. Решение о том, использовать ли «хлебные крошки» во многом зависит от того, как вы создали свой ​​сайт иерархии. При низком уровне страницы использование  «хлебных крошек» является неэффективным, неточным и запутанным для пользователя.

Не делайте на странице ссылку на эту же страницу (последний шаг в «хлебных крошках» должен быть без ссылки)

Дизайн «хлебных крошек»

При разработке цепочек навигации, могут возникнуть некоторые вопросы. Например:

Какой символ нужно использовать для отделения ссылок?

Общепринятым и наиболее узнаваемым символ для разделения гиперссылок в «хлебных крошках» является символ «больше, чем»  — (>).

Также можно использовать кавычки, указывающие на правый угол (») и косую черту (/).

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

Какими они должны быть?

Вы ведь не хотите, чтобы ваши «хлебные крошки» доминировали на странице. Их следует использовать в качестве дополнительной помощи для пользователей (для удобства), поэтому их размер тоже должен соответствовать этому и правильно донести до пользователей эту функцию — они должны быть меньше или менее заметными, чем первичная навигация по меню.

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

Где должны быть расположены «хлебные крошки»?

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

Статистика

Ниже представлены собранные в мае 2002 года статистические данные о 75 сайтах-лидерах, занимающихся электронной коммерцией.

Ориентация цепочек

95% — горизонтальная

5% Вертикальная

Разделитель между элементами (для горизонтальных цепочек)

Примеры использования breadcrumbs в web-дизайне

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

Классическое использование «хлебных крошек»

NASA

Nestle

Marchand de Trucs

Bridge 55 

Overstock.com

TechRadar UK

Apple Store

Использование других символов

BP

Martique

PSDTUTS

Mouse to Minx

Boden

Другие альтернативы 

Coolspotters

Cranfield

Lonelyplanet

Booreiland

По материалам — Jacob Gube

Также примеры «хлебных крошек» можно посмотреть здесь:

• Breadcrumbs Web Design Examples and Best Practices
• Breadcrumbs (44 examples)

Перевод — Дежурка

9 цепочек навигации по сайту [+ примеры]

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

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

Что такое навигационная цепочка?

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

Хлебные крошки обычно отображаются в виде горизонтального списка страниц веб-сайтов, на которые есть гиперссылки, разделенных знаком «больше» (>). Навигация «хлебные крошки» часто располагается в верхней части страницы, где-то под основной навигацией сайта. Прежде чем мы перейдем к советам и рекомендациям, важно отметить, что панировочные сухари бывают нескольких видов.

Типы навигационных цепочек

Навигация на основе местоположения или иерархии

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

Вот пример навигационных цепочек иерархии из базы знаний HubSpot:

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

Хлебные крошки на основе пути или истории

Навигация на основе пути представляет собой уникальный путь, который прошел пользователь до перехода на текущую страницу. Хотя путь обычно не отображается полностью, хлебные крошки на основе пути часто реализуются в виде кнопки «Назад», которая возвращает пользователя на предыдущую страницу их посещения.

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

Хлебные крошки на основе атрибутов

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

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

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

Советы и примеры навигации по цепочкам

1.

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

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

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

2. Не делайте навигацию слишком большой.

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

Веб-сайт OXO является хорошим примером. Их основная навигационная панель большая и четко расположена в верхней части страницы с такими категориями, как «Кулинария и выпечка», «Напитки» и т. д. Их навигационная цепочка расположена под основной навигацией и написана более мелким и тонким шрифтом.

Источник изображения

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

3. Включите полный путь навигации в навигационную цепочку.

Вполне вероятно, что некоторые посетители будут находить страницы вашего сайта с помощью поиска, а не начинать с главной страницы и перемещаться по ней. Я погуглил «Студенты Университета Элон без степени», чтобы попасть на эту целевую страницу. Илон умен, чтобы включить полный путь навигации, включая «Домой» и «Приемы» в навигационную цепочку.

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

Источник изображения

4. Переход от самого высокого уровня к самому низкому.

Важно, чтобы ваша навигационная цепочка читалась слева направо, причем крайняя левая ссылка была вашей домашней страницей, а крайняя правая ссылка — текущей страницей пользователя. Исследование Nielsen Norman Group показало, что пользователи тратят 80% своего времени на просмотр левой половины страницы и 20% — на правую половину, что является веским аргументом в пользу дизайна слева направо. Кроме того, ближайшая слева ссылка будет отображаться как начало цепочки, поэтому вы хотите, чтобы она была вашей страницей самого высокого уровня.

5. Следите за тем, чтобы заголовки навигационных цепочек соответствовали заголовкам страниц.

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

Sony также хорошо различает ссылки и не-ссылки. Ссылки подчеркнуты, а не-ссылки, такие как текущая страница «Окружающая среда», остаются без оформления.

Источник изображения

6. Проявите творческий подход к дизайну.

Навигация по цепочкам традиционно оформлена в виде горизонтального списка ссылок, разделенных знаком «больше» (>). Однако вам не нужно следовать традиционному пути, если другой дизайн больше соответствует внешнему виду вашего сайта.

Например, Hoka использует «/» для разделения элементов в своей навигационной цепочке. В этом случае тонкие вариации дизайна имеют смысл для их сайта и эстетики бренда.

Источник изображения

7. Содержите его в чистоте и порядке.

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

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

Источник изображения

8.

Подумайте, какой тип навигации наиболее подходит для вашего сайта.

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

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

Источник изображения

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

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

9. Знай свою аудиторию.

Наилучшей практикой навигации по навигационным цепочкам является размещение навигационных цепочек в верхней части страницы, под основной навигацией. Однако Apple, одна из самых ценных компаний всех времен, бросает вызов этой логике, помещая свою навигационную цепочку в нижний колонтитул в нижней части сайта. В конечном счете, очень важно, чтобы вы знали свою аудиторию. Клиенты Apple, как правило, технически подкованы и, скорее всего, найдут навигацию, если она им понадобится. Примите во внимание потребности ваших клиентов и проведите A/B-тестирование, если вы не уверены.

Источник изображения

Хлебные крошки Навигация в HTML и CSS

Хлебные крошки не только полезны — их также легко добавить на ваш сайт с помощью кода HTML и CSS.

Начнем с HTML, который мы будем использовать для создания самих ссылок. Самый простой способ сделать это — упорядочить ссылки в элементе неупорядоченного списка (

), где каждый элемент списка (
• ) содержит ссылку в цепочке навигации до последнего элемента, обозначающего текущую страницу.

  Вот HTML-шаблон для хлебных крошек , который вы можете использовать:

  См. хлебные крошки Pen в HTML и CSS от HubSpot (@hubspot) на CodePen.

  Обратите внимание, что я также заключил неупорядоченный список в элемент HTML