Это сайт — моя персональная записная книжка. Интересна мне, по большей части, история, своя жизнь и немного программирование.

Текстовые ссылки в графике

Графическая ссылка (115.73КиБ)

Читая последнюю, на настоящий момент, статью в Ководстве Лебедева «Правила оформления ссылок» обратил внимание, что Студия в этом месте, вроде как, не всегда следует своим же советам.

В правом верхнем углу располагается логотип Студии, являющийся ссылкой, где текстом написано «Студия Артемия Лебедева». Я понимаю, что это картинка, но простой пользователь этого не поймёт, да и какая разница — текст есть текст, прорендерен ли он заранее в графике или это сделала операционная система позже.

Написал письмо Артемию, посмотрим что ответит.

Технических трудностей, между тем, в подчёркивании таких ссылок никаких — прочертил линию в графике и всё, ссылка подчёркнута. Другое дело в подствечивании при наведении, кажется что это невозможно. Но это только на первый взгляд. Я уже демонстировал (неоднократно), что это делается очень просто.

Такие опыты я производил четыре года назад, так даже постоянные читатели вряд ли помнят. В GIF или PNG под ссылкой «прорезается» (прочерчивается прозрачным) полоска, которая будет имитировать наше подчёркивание. Картинке в CSS ставится фон ссылки (например, синий), при наведении фон меняется, схематически:

img {
    background: blue;
}

img:hover, img:visited {
    background: red;
}
12 комментариев
ichik 2011

Проверка дизайна на правильность проста: если зритель, не притрагиваясь к мыши, может угадать, где ссылка, а где нет, — перед нами хороший сайт. Это правило перевешивает все остальные.

Евгений Степанищев (bolknote.ru) 2011

Комментарий для ichik:

Согласен, это важное правило. Но может ли он угадать, вот в чём вопрос. Кто-то этого зрителя спрашивал? Я этого не знаю. Современный «зритель», кажется мне, тыкает во всё подряд, именно из-за обилия не хороших сайтов. Заморачивается ли он тем, что пытается понять где ссылка, ещё до того, как тыкнуть куда-нибудь?

Не ломает ли опыт пользователя то, что у Студии логотип находится справа, а не слева? (я-то думаю, что не ломает, но кто знает как на самом деле?)

Куреломы и кумомы (zencd.livejournal.com) 2011

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

doctor-lg (doctor-lg.ru) 2011

Это же логотип, а не ссылка в тексте. У логотипа свои правила. У большинства сайтов лого — это ссылка на главную, но никто (или почти никто) не подчеркивает. У яндекса/гугла не подчеркнуто и при ховере не подчеркивается — просто курсор становится «лапкой». Так что на мой взгляд вы излишне придирчивы.

Евгений Степанищев (bolknote.ru) 2011

Комментарий для zencd.livejournal.com:

Данный текст — часть графического оформления сайта.

С чего бы это? Меню тоже часть графического оформления сайта?

Штрих-код, тоже ссылка, и её подчеркнуть?

Нет. Это не текст.

Евгений Степанищев (bolknote.ru) 2011

Комментарий для doctor-lg.ru:

Это же логотип, а не ссылка в тексте.

Статья про ссылки, а не про ссылки в тексте.

У яндекса/гугла не подчеркнуто и при ховере не подчеркивается, просто курсор становится «лапкой». Так что на мой взгляд вы излишне придирчивы.

Но «Яндекс» с «Гуглом» не писали статьи, где утверждается, что ссылки должны быть подчёркнуты.

Dead Emotion (deadem.livejournal.com) 2011

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

Куреломы и кумомы (zencd.livejournal.com) 2011

Комментарий для Евгения Степанищева:

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

То есть сам параграф имеет очевидные неточности и, стало быть, следовать ему на 100% бесмысленно.

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

Евгений Степанищев (bolknote.ru) 2011

Комментарий для deadem.livejournal.com:

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

Спасибо! Я торопился.

Евгений Степанищев (bolknote.ru) 2011

Комментарий для zencd.livejournal.com:

Графическим оформлением я считаю шапку, подвал сайта и бока

Я не очень понимаю почему значимая текстовая информация (адрес e-mail, например) в шапке или в подвале должна считаться графическим оформлением. На мой взгляд, к оформлению (декоративному элементу) это отношения иметь не может.

Michael (mixa.livejournal.com) 2011

тестом написано

На итальянском, кстати, так и будет: текст -​-​ testo :)

Евгений Степанищев (bolknote.ru) 2011

Комментарий для mixa.livejournal.com:

Точно! Я по-итальянски писал! :-D