—»     —»   Подробное пособие о том, как сделать и оформить гиперссылки
  Раздел: Руководства   Комментариев: 1  

Подробное пособие о том, как сделать и оформить гиперссылки

Гиперссылки (или просто ссылки) служат связующим звеном между веб-страницами. Благодаря им, веб-среда функционирует, а мы можем переходить с одной страницы на другую с помощью, всего лишь, нажатия на кнопку. Как говорят ярые сторонники веб-стандартов, "без гипертекстовых ссылок не было бы веб-среды, а была бы просто бессвязная подборка отдельных страниц". Так что, без ссылок мы бы пропали. Мы ищем их на странице, желая заглянуть дальше. Мы, конечно, задерживаемся там и сям, чтобы что-то прочесть, но в итоге всегда переходим по какой-нибудь ссылке.

Оформление ссылок

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

Давайте, для начала рассмотрим CSS-селекторы и псевдоклассы:

Новая ссылка
* a:link { }

Пройденные ссылки
* a:visited { }

Пользователь наводит курсор на ссылку
* a:hover { }

Пользователь щёлкает по ссылке
* a:focus { }

Пользователь щёлкнул по ссылке
* a:active { }

Подробное пособие о том, как сделать и оформить гиперссылки

На сайте TLC использованы не просто текстовые ссылки, но также иконки, обозначающие соответствующие типы файлов.

Придайте ссылкам контрастность

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

Подчёркивание
* text-decoration: underline;

Жирный шрифт
* font-weight: bold;

Размер шрифта
* font-size: 1.4em;

Цвет шрифта
* color: #ed490a;

Фон
* background-color: #c0c0c0;

Рамка
* border-bottom: 2px solid #a959c3;

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

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

Подробное пособие о том, как сделать и оформить гиперссылки

Подробное пособие о том, как сделать и оформить гиперссылки

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

Не забывайте о пройденных ссылках

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

Сделайте пройденные ссылки темнее, чтобы они тоже выделялись, но не так ярко, как новые.

Подробное пособие о том, как сделать и оформить гиперссылки

Подробное пособие о том, как сделать и оформить гиперссылки

Применяйте атрибут "Title"

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

<a href="example.com" title="This is an example link">Example</a>

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

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

Подробное пособие о том, как сделать и оформить гиперссылки

Подробное пособие о том, как сделать и оформить гиперссылки

Подробности вы найдёте в публикациях "Создаем кнопки посредством CSS3" и "Call to Action Buttons" ("Кнопки запуска выполнения команд").

Наведение курсора на ссылку

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

a:hover { text-decoration:none;
text-shadow: 0 0 2px #999;
}

Подробное пособие о том, как сделать и оформить гиперссылки

Подробное пособие о том, как сделать и оформить гиперссылки

При наведении курсора на ссылку, стрелка, как правило, меняется на кисть руки с вытянутым указательным пальцем. Хотя, иногда эта функция не срабатывает; например, в браузере IE, когда ссылка содержит элемент "span", или для кнопок "Submit". Исправьте это, задав вид курсора средствами CSS.

a:hover span { cursor: pointer }

Активированные ссылки

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

a:active { padding-top: 2px; }

Подробное пособие о том, как сделать и оформить гиперссылки

Подробное пособие о том, как сделать и оформить гиперссылки

Использование плашек

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

a { padding: 5px; }

Подробное пособие о том, как сделать и оформить гиперссылки

Применяйте иконки для обозначения типов файлов

Если ваши ссылки открывают файлы различного формата, проиллюстрируйте это для пользователя через добавление в них иконок. Так вы подготовите его к работе с файлом определённого типа, например, PDF или JPEG.

Подробное пособие о том, как сделать и оформить гиперссылки

Чтобы добавить сайту "изюминку", не пропустите "Fam Fam Fam Silk Icons" ("Комплект шёлковых иконок от Fam Fam Fam") и "Social Media Mini Icon Pack" ("Комплект мини-иконок для социальных сетей").

Используйте иконки для наглядности

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

Подробное пособие о том, как сделать и оформить гиперссылки

Подробное пособие о том, как сделать и оформить гиперссылки

Поясняйте содержание ссылок через их текст

Составляйте текст ссылок продуманно, не ограничивайтесь "Click here" ("Нажмите здесь"). Данный вариант плох тем, что вынуждает пользователя читать сопутствующий текст, чтобы понять, зачем ему "Click here". Текст ссылки, подобный "See Britney on a beach" ("Смотреть Бритни на пляже") раскрывает суть. Он пригоднее и для SEO-оптимизации.

Подробное пособие о том, как сделать и оформить гиперссылки

Привяжите логотип ссылкой

Всегда связывайте свой логотип ссылкой с домашней страницей. Большинство пользователей приучены к этому общепринятой в сети практикой. Тем не менее, они это, вряд ли, осознают. Завзятые интернетчики уже привыкли, но многие пользователи, всё же, ищут ссылку "Home" ("Домой").

<h1><a href="/" title="Homepage">Site name</a></h1>

h1 a {
background: url(images/logo.gif) no-repeat top left;
display: block;
text-indent: -9999px;
width: 200px;
height: 60px;
}

Не открывайте ссылки в новых окнах

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

Микроформаты

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

<a href="http://myfriend.example.com" rel="friend met">My Friend</a>

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

Подборка образцов оформления ссылок веб-дизайнерами

01. Komodo Media

Подробное пособие о том, как сделать и оформить гиперссылки

02. Hicks Design

Подробное пособие о том, как сделать и оформить гиперссылки

03. Notable App

Подробное пособие о том, как сделать и оформить гиперссылки

04. UX Booth

Подробное пособие о том, как сделать и оформить гиперссылки

05. Max Voltar

Подробное пособие о том, как сделать и оформить гиперссылки

06. Elliot Jay Stocks

Подробное пособие о том, как сделать и оформить гиперссылки

07. The TLC

Подробное пособие о том, как сделать и оформить гиперссылки

08. Sam Brown

Подробное пособие о том, как сделать и оформить гиперссылки

09. Adii Rockstar

Подробное пособие о том, как сделать и оформить гиперссылки

10. Forty Seven Media

Подробное пособие о том, как сделать и оформить гиперссылки

11. Stefan Persson

Подробное пособие о том, как сделать и оформить гиперссылки

12. Huge

Подробное пособие о том, как сделать и оформить гиперссылки

13. AWP

Подробное пособие о том, как сделать и оформить гиперссылки

14. Simple Bits

Подробное пособие о том, как сделать и оформить гиперссылки

15. Andy Rutledge

Подробное пособие о том, как сделать и оформить гиперссылки

16. Brian Hoff

Подробное пособие о том, как сделать и оформить гиперссылки

17. Simon Collison

Подробное пособие о том, как сделать и оформить гиперссылки
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: ссылки
Опубликовал Mysterious Master   Прочитано (раз): 6597   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 12 марта 2010 @ 09:02
Написал: opencolour.ru — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Спасибо. Полезная статья для тех, кто делает сайты для людей =)
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июнь 2020    »
ПнВтСрЧтПтСбВс
1234567
891011121314
15161718192021
22232425262728
2930