Блог almlex’a

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

Не в то окно

На самом деле, самая правильная фраза на эту тему — «Дайте пользователю решать!». И да, конечно юзер должен иметь право сам выбирать в каком окне открыть ссылку, если хочет в новом пусть жмёт на колёсико, хочет в текущем — на левую кнопку.

Но к моему великому сожалению в рунете по прежнему много тех кто вводит адрес сайта в «Яндекс», а уж о кликанье на колёсико мыши и слыхом не слыхивал. Поэтому моя позиция на эту тему: Внутренние ссылки — в текущем окне, внешние — в новом.

UPD Важным пунктом на эту тему является аудитория, и если это не девочки-школьницы из 5«А» соседней школы, а люди, которые в интернетах не год и не два то можно со спокойно душой не трогать поведение ссылок.

Все цвета радуги

В оформлении ссылок не стоит делать их близкими по оформлении к тексту. Лично моё мнение: Делайте ссылку небесно-голубого цвета и изменением цвета на чуть более тёмный при наведении. Это справедливо для очень светлых фонов: Белых, светло-серых, светло-голубых и так далее. Естественно, что стоит нарушать это правило для не обычных ссылок, таких как ссылки в информации поста, заголовках-ссылках, ну в общем вы поняли. Голубые ссылки это стандарт, и не стоит без особой нужды нарушать его.

Для тёмных же фонов стоит подбирать другие контрастные цвета, тот же белый.

Не будь как все!

Выделять ссылки стоит подчёркиванием, которое не будет пропадать при наведении. И не слушайте Мишу, выделять ссылки стоит при помощи text-decoration, а не border. Border создаёт подстрочную линию, а не подчёркивание.

Но для выделения ссылки можно использовать и другие приёмы. К примеру font-variant: small-caps;, выглядит забавно, А вОт ТаК еЩё КрУчЕ! Но этим не стоит злоупотреблять. Ещё следует помнить, что при наведении на ссылку должна реагировать только ссылка, а не вся строка. Например, если у вас ссылка выделена жирным, то если делать её нормальной при наведении ваша строка начнёт прыгать, или изменение размера шрифта при наведении, вы, наверное, и сами понимаете, что будет.

Жабаскрипт, не жабаскрипт

Со ссылками, которые не ведут на другую страницу вы вольны делать, что хотите. Я всё же советую убирать у них обводку при помощи outline:none !important; и делать пунктирное подчёркивание. Но это всё не критично для юзабилити.

Кнопки, кнопочки, кнопуськи

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

А если уж понадобилось их изменить то не забудьте сделать для них разные состояния: неактивное состояние, состояние покоя, состояние при наведении, активное состояние. Неактивное состояние можно пропустить если вы уверены, что ваша кнопка в таком состоянии не будет. А активное состояние можно сделать одинаковым с состоянием при наведении. Так же при наведении в таком случае стоит сделать курсор-пальчик.

И в заключении хочу вам сказать, что этот пост призван подсказать вам как делать. Не стоит делать всё точь-в-точь как я написал, ведь это моё виденье