x
 
Артём
21 июля 2014

Расскажите о ссылках в вёрстке.



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

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

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

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

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

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

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

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


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

Как свёрстано

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

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


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

Плохо

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

Хорошо

Графомания, на первый взгляд, отражает мелодический полифонический роман, но не рифмами. Нарративная семиотика откровенна.

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


Ссылки могут быть сгруппированы в строку — горизонтальное меню:
Альфа   Бета   Гамма   Дельта   Эпсилон


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

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

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

P. S.

Это был понедельничный совет о вёрстке и типографике в вебе. Хотите знать всё об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? Присылайте вопросы.

Типографика и вёрстка — дисциплина Школы дизайнеров. Набор открыт до 13 августа или пока есть свободные места.
 

Поделиться
Отправить

Комментарии

Николай Яковенко
22 июля 2014

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

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

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

Иван Пришвин
3 марта 2015

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

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


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

3 2 Делаю визитку для хозяина автомастерской. Вторая часть 6 4




Недавно всплыло

1 1 Как раскладывать ХТМЛ-элементы на странице? (Часть вторая: флексбоксы) 1 6