Школа
Вёрстка

О ссылках в вёрстке

20 июля 2014
👁 5167   🗩2
Вёрстка

О ссылках в вёрстке

20 июля 2014
👁 5167   🗩2
А. Г.
Арт‑директор и автор учебных программ бюро
Полезно
 4
4
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

Гиперссылка — базовый элемент экранной вёрстки.

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

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

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

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

Что плохого в нарушении этих правил, объясняется тут, там и здесь.

Ссылка — это вид текстового выделения, а в бюро применяется принцип «выделение склоняется». Предлоги, союзы и другие слова, которые обычно приклеиваются неразрывными пробелами, включаются в ссылку (и выделяются) вместе со словами, к которым они относятся. Например, ссылка будет стоять на всём словосочетании «в совете», а не только со слова «совет», как диктует логика программиста.

Ссылка с трудом терпит переносы. Многострочные ссылки плохо выглядят, как любые выделенные надписи и заголовки:

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

Как свёрстано
Как воспринимается

Поэтому желательно сокращать длинные заголовки новостей, а при выделении частей текста не давать словам внутри ссылок переноситься на разные строки:

Как ко всем другим элементам, в отношении ссылок действует рекомендация «смешать комки»:

Плохо
Хорошо

Хорошо организованная вёрстка состоит из однородных блоков подобных элементов:

Ссылки могут быть сгруппированы в строку — горизонтальное меню:

Или в вертикальный список:

Минимально допустимое расстояние между соседними ссылками, как между элементами управления — примерно два пробела:

См. также: Альфа Бета Гамма

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

См. также

Типографика в вебеСсылки надо подчёркиватьВыделение склоняетсяСмешать комки
Полезно
 4
4
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

Гиперссылка может находиться в одном из четырёх состояний: 
неактивная (состояние по умолчанию),
предактивная (состояние при наведении курсора),
активная (текущее состояние), 
посещённая (состояние, демонстрирующее предыдущую активность).

Предактивное и активное состояния часто имеют одинаковое визуальное обозначение.

В современных интерфейсах, как буква «ё», исчезает четвёртое состояние. Жаль.

Артём, подскажите пожалуйста, в примере Тёмы вот так правильно?
И как следует в таких случаях выбирать якорь для ссылки. В данном примере я выбирал между:
— мы писали на прошлой неделе
— мы писали
— на прошлой неделе
— прошлой неделе

Чувствую, что вернее всего первый вариант по смыслу, но слишком длинный.

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы