Детальний посібник про те, як зробити і оформити гіперпосилання

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

Оформлення посилань

Оформляючи посилання, пам'ятайте, що користувачі не читають, вони переглядають вміст сторінки. Ви чули про це раніше, і це правда. Тому обов'язково зробіть свої посилання помітними. Крім того, вони повинні вказувати, куди потрапить користувач з їх допомогою.

Давайте, для початку розглянемо 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;
}

Не відкривайте посилання в нових вікнах

Не треба так робити. Нехай користувач сам вирішує, коли і де відкрити нову вкладку або вікно. Користувачі розраховують на відкриття посилань в активному вікні. Якщо це дійсно необхідно, принаймні, позначте таку схему іконкою. У виняткових випадках це, все ж таки, припустимо; наприклад, якщо ви вважаєте за краще не переривати якийсь процес у стадії завершення.

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

Оскільки веб-середовище дедалі більше формується тепер семантично, подумайте, чи не включити вам в структуру посилань Мікроформати, щоб комп'ютер міг відстежити появу посилання на даній сторінці і її взаємозв'язок з іншими сторінками.

Про Мікроформати можна дізнатися більше.

Підбірка зразків оформлення посилань веб-дизайнерами
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

Джерело