Оформляем гиперссылку, советы по оформлению ссылок

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

Но, вначале немного справочной информации:

Базовые «состояния» гиперссылки

Элемент <a> может принимать несколько «состояний», определяемых псевдо-классами CSS:

• a:link — нормальное состояние ссылки;
• a:visited — ссылка была посещена ранее;
• a:hover — на ссылку наведен курсор (есть статья про CSS hover эффекты);
• a:active — активная ссылка (при нажатии на нее);
• a:focus — пользователь использует клавишу TAB для навигации.

Один из классических примеров:

Распространенные свойства CSS для оформления ссылок

• color – цвет гиперссылки;
• text-decoration – применяемый к тексту оформительский прием (в блоге есть детальная статья как сделать подчеркивание ссылок в CSS);
• background-color – цвет фона (может, например, меняться если на ссылку наведен курсор (a:hover);
• font-weight – хороший способ подчеркнуть ссылку, сделав ее жирным шрифтом Bold.
• border – рамка;

Возможно, вам также будет интересно почитать как в HTML сделать ссылку на почту mailto чтобы сразу создавать письма при клике.

Общие рекомендации по оформлению ссылок

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

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

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

В обязательном порядке следует определять все псевдо-классы, хотя ссылки вполне будут работать если стили псевдо-классов не определены, поэтому веб-мастера часто их игнорируют.  Не стоит забывать так же что, большое количество людей не используют мышь, поэтому даже о таком “ерундовом” состоянии как a:focus, забывать нельзя. В идеале желательно определить стиль для каждого из состояний. К тому же следует помнить, что по умолчанию разные браузеры имеют разное оформление для псевдо-клссов. Так, например, в Firefox :active и :focus выделяются с помощью серой рамки, в то время как в Google Chrome ссылки с :active идут без стиля, а :focus имеет рамку желтого цвета.

Ну и напоследок, несколько хороших примеров для подражания:

G4Tv

Как вы видите цветовая гамма далека от классической (оранжевые ссылки и заголовки на черном фоне) но очень контрастна. При наведении мыши (a:hover) появляется оранжевый фон. На внутренних страницах сайта стили меняются (сине-голубые ссылки), но это мало мешает навигации по сайту.

Made My Day

Демонстрирует массу «ссылочных» эффектов, гулять по сайту просто интересно!

Сarsonified

Очень четкие состояния a:hover. Пример для подражания!

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

P.S. Постовой. Вот, например, как раз по теме — интернет магазин парфюмерии Vanilla имеет очень красивый дизайн и продуманное оформление ссылок.
Чтобы сайт радовал посетителей дизайном и стабильно работал закажите хостинг у надежной хостинговой компании с хорошими ценами.