Перейти к навигации · Перейти к содержимому

Правильные ссылки

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

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

Выделение ссылок

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

  • изменение цвета
  • подчеркивание
  • полужирное начертание
  • изменение цвета фона

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

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

Цветные ссылки

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

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

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

Посещенные и непосещенные

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

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

И не забудьте о правильном порядке описания типов ссылок:
a:link › a:visited › a:hover › a:activeLoVe HAte.

Новые окна

Если ваша цель показать пользователю, что вы «знаете лучше», то поступайте как Яндекс, а если уважаете мнение пользователей — поступайте как Google.

Хорошая ссылка ведет себя «ожидаемо», то есть каждое действие пользователя должно приводить к тому результату, который он ожидает. Открытие нового окна при клике по ссылке почти всегда является неожиданностью. Каждый при желании может открыть ссылку в новом окне (например, кликнув по ссылке с зажатой клавишей shift или кликнув средней клавишей мыши), но никто не сможет открыть ссылку в том же окне если у нее прописан соответствующий аттрибут target.

Кроме того, в документах типа Strict использование атрибута target запрещено. Это приводит к различным ухищрениям, чтобы не провалить валидацию.

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

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

Самым правильным способом является четкое информирование посетителя о том, куда указанная ссылка ведет. Таким образом, посетитель сам решит открывать ли ему новое окно или нет. Примером может служить вариант с маркировкой ссылок на другие сайты при помощи CSS (примерно как на этом сайте).

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

a.ext {
  background: url(/i/out-link.gif) no-repeat 100% 6px;
  padding-right: 12px;
}

Этот код добавляет специальную картинку к ссылке класса ext. Недостаток в том, что приходится дописывать к каждой внешней ссылке необходимый класс. Аналогичные правила можно применять к любой ссылке на основании значения свойства атрибута элемента — тогда класс добавлять не придется. Правда понимать такую конструкцию будут лишь «нормальные» браузеры и IE7:

a[href^="http://"] {
  background: url(/i/out-link.gif) no-repeat 100% 6px;
  padding-right: 12px;
}

Подробнее про выборку по атрибутам можно почитать у W3C: CSS3 selectors

В этом случае мы используем выборку по атрибутам из CSS3, срабатывающую для всех ссылок, атрибут href у которых начинается с абсолютного пути http://. Теперь не нужно проставлять специальные классы — достаточно все локальные ссылки указывать относительно корня сайта, а внешние будут автоматически помечены.

Ссылки на файлы

Иногда нам требуется дать ссылку не на страницу, а на файл. Это могут быть файлы PDF, Word или MP3. Такие ссылки в обязательном порядке следует помечать, показывая, что их поведение отличается от всех остальных ссылок на сайте. Пользователь сам решит, что он хочет сделать с файлом: открыть в браузере или скачать на компьютер. Не стоит открывать такие файлы в новом окне, так как всех жутко нервируют открытые пустые окна, остающиеся после скачки файлов.

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

a[href$=".pdf"] {
  background: url(/i/pdf-link.gif) no-repeat 100% 6px;
  padding-right: 12px;
}

Этот код позволит добавить иконку PDF ко всем ссылкам на соответствующие файлы (то есть если ссылка оканчивается на .pdf).

Динамические ссылки

Последний тип ссылки, который мне хотелось бы упомянуть — динамические ссылки. Эти ссылки часто можно встретить на современных динамичных сайтах, связаны они с использованием JavaScript. Клик по таким ссылкам не приводит к переходу на другую страницу — событие перехватывает скрипт и производит какое-то действие. Часто так скрываются формы для входа или выпадающие меню.

Во-первых, эти ссылки необходимо делать правильно. Если, к примеру, ссылка показывает скрытую форму для входа, то нужно учитывать, что JavaScript может быть отключен (или фильтроваться на прокси-сервере) — на этот случай необходимо сделать саму ссылку рабочей:

<a href="/login" onclick="open_form(); return false;">Вход</a>

В этом случае, клик по ссылке не будет приводить к перезагрузке страницы (из-за return false), а форма откроется. Если же у пользователя отключен JavaScript, то его без проблем перекинет на страницу с формой входа.

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

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

Комментарии

очень грамотно все раписано.

Про жк-мониторы, сводящие все к грязно-серому, это, на мой взгляд, гипербола 8)

А в общем и целом – отличная статья для начинающих в веб-дизайне.

Кстати, для некоторых ссылок я специально не выделяю стиль visited, например, для главного меню. А то пользователь может подумать, что он уже посмотрел все, что есть в этом подменю, а этого мне совсем не хочется *)

Согласен.. только,

– ЖК мониторы сейчас есть очень разные.. скорее нужно думать об аудитории и предполагать, какие именно мониторы они могут использовать.. Уже довольно много профессиональных ЖК с отличной цветопередачей и углом обзоа 178 градусов.

– менять цвет посещенных линков, кажется каким-то не очень приятным наследием из конца 90-х.. ИМХО..

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

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

Да, тоже столкнулся с этой проблемой :)
Но решил ее для себя просто:
a[href^=„http://“] {
background: url(/i/out-link.gif) no-repeat 100% 6px;
padding-right: 12px;
}
a[href^=„http­://bolzamo.or­g.ru/“], a[href^=„http­://www.bolzamo­.org.ru/“] {
background: transparent;
padding-right: 0;
 }