• Регистриция
Этап применения умений и навыков.
Плохой специалист винит не себя, а инструменты, которыми он пользуется. Поэтому убедитесь в том, что ваше прог...
Этап финальной доводки.
Именно внимание к деталям отличает хорошую работу от великолепной. Вот несколько советов как «добавить изюм...
Фиксированный размер шрифта на Ваших веб-страничках
Вы когда нибудь задумывались о том, как выглядят ваши веб-странички на других компьютерах? Наверняка задумыв...
Этап финальной доводки.
Именно внимание к деталям отличает хорошую работу от великолепной. Вот несколько советов как «добавить изюм...
Секреты индексации сайта. Сайт может и должен работать. Пример №2
Звонит скептически настроенный знакомый и рассказывает "ужасную" историю. Сфера деятельности - бытовая элект...
При создании дизайна для Сети вам нужно принять к сведению, что контент будет меняться. О том, чтобы тратить в...
Плохой специалист винит не себя, а инструменты, которыми он пользуется. Поэтому убедитесь в том, что ваше прог...
Посещенные ссылки. Visited links

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

Известно достаточно много методов для того, чтобы дать пользователю знать о том, что он уже посещал конкретную страницу в интернете. Какой из этих методов самый подходящий? Цветовое определение ссылок? Подчеркивание? Картинка? При ответе на этот вопрос не стоит забывать о дальтониках, о карманных компьютерах, и, конечно же, не стоит забывать о браузерах, вернее браузере - всеми любимый ослик - Internet Explorer. Появившуюся седьмую версию этого браузера можно называть уже посолидней – осел. Но эта тема для отдельной статьи.

Итак, начнем с Якоба Нильсена – эксперта по удобству и простоте использования. Краткое изложение его статьи по визуализации ссылок (Guidelines for Visualizing Links):
Текстовые ссылки должны быть цветными и подчеркнутыми для того, чтобы достигнуть необходимой воспринимаемости этих ссылок, хотя существуют несколько исключений.

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

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

Примерно 74% всех сайтов используют цветовое определение для распознавания уже посещенных ссылок от еще не посещенных ссылок. Это хорошая дизайнерская традиция, к которой привыкли пользователи.

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

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

ul {
list-style-type:none;
padding:3px;
}
li a {
display:block;
line-height:150%;
width:239px;
background:URL(ticks_grey.gif);
text-decoration:none;
}

li a:link, a:active {
color:#666;
}

li a:hover {
color:#F33;
background-position: 0 -20px;
}

li a:visited {
background-position: 0 -40px;
}

При этом XHTML код страницы выглядит очень просто:


  • адрес ссылки

  • еще один адрес ссылки и т.д.



Internet Explorer тормозит широкое использование уже давно появившихся псевдо-элементов :before и :after, которые могут идеально выполнять необходимую функцию определения уже посещенных ссылок. Почти все современные браузеры поддерживают эти элементы.

Для псевдо-элементов :before и :after Майк Дэйвидсон (и несколько людей до него) предложил вместо текста использовать знак корня (радикал) – своеобразная галочка. Но эта галочка является не картинкой, а unicode символом ( \221A ), который появляется после ссылки, по адресу которой уже был определенный посетитель. Весь код также находиться в CSS и выглядит следующим образом:

a:visited:after {
content: "\00A0\221A";
font-size: 75%;
}

\00A0 означает непрерывающиеся пустое место (вместо пробела).

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

Если вы хотите более подробно изучить тему посещенных ссылок, то возможно эти ресурсы (на английском языке) помогут:
Change the Color of Visited Links
Question Time: Visited Links
The ways to style visited links
Visited Links -- Your Take
Visited links revisited

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

 

Популярное

  • PHP. Пишем счетчик просмотров для каждой страницы сайта на php
    На некоторых сайтах часто можно увидеть следующую надпись внизу страницы или под статьями: "Всего просмотров xxx. Сегодня xx". На первый взгляд ничего примечательного...
    Пишем 'гостевую книгу' с нуля на php
    Почти на каждом более-менее популярном сайте есть форум или гостевая книга, эти элементы нужны для постоянного общения автора сайта с его пользователями. Но многие...
    Окна сообщений
    Хотя всплывающие окна это и очень эффективный метод получения новых подписчиков, есть один еще более успешный. Сочетая его с хорошим стимулом, вы в буквальном смыс...
    Собственная статистика поисковых слов (Яндекс, Рамблер, Google,...) на PHP
    В этой статья я бы хотел поделиться с вами своей новой разработкой – анализатором поисковых запросов с популярных поисковых систем, посмотреть, что это такое, и ка...
    Гостевая книга на PHP.
    В этой статье рассказывается о том, как создать гостевую книгу, описывается её структура и реализация. За пределами статьи остаются дизайн, вёрстка, оформление и т....
  • Организация CSS-файлов: Совет 1 - Флаги
    CSS Organization Tip 1: FlagsВам приходилось писать и работать с большими CSS-файлами? Мучались с бесконечным скроллингом вверх-вниз в поисках нужной части кода? CSS-файлы, с котор...
    Частые ошибки в веб-дизайне.
    Разметка текста – одна из самых важных характеристик дизайна. В большей части проектов текст доминирует, так что хорошо подобранные шрифты могут стать ключом к ра...
    Компот и мухи веб-разработки
    Русский интернет (уже наконец) вовсю осваивает “дизайн через CSS”, но многие все равно не понимают, почему именно надо дизайнить так, а не по-старому, через таблицы. Р...
    Создаем веб-дизайн на тему комиксов, Photoshop и HTML+CSS
    Давайте начнем! Для быстроты изложения я опущу объяснение основ (вроде того, как создать слой-маску или отредактировать обработчики или векторную фигуру). Вам нужн...
    HTML 4 не является языком оформления веб-страниц.
    Он является языком логической разметки страниц. Раньше, создавая HTML-документ, вы думали о том, что этот заголовок будет сделан жирной верданой золотистого цвета и о...
  • Немного о PHP.
    Интернет уже давно прочно вошел в нашу жизнь. Это смелое утверждение можно доказывать или опровергать много раз, но так или иначе все меняется, а с этим спорить никт...
    Основы написания PHP программ
    Как и в любом языке программирования в PHP есть свои правила, константы, зарезервированные слова и операторы, с помощью которых выполняются различные манипуляции с ...
    История РНР
    Начинать нужно всегда с самого простого, и сейчас я попробую познакомить Вас с программированием на скриптовом языке РНР. РНР (читается как пи-эйч-пи) появился на св...
    Особенности РНР
    Как и у всякого языка программирования, у РНР есть свой синтаксис. Он очень похож на синтаксис языка С или Perl. Программисты, пишущие на этих языках, смогут освоить РН...
    Введение в PHP
    PHP - это скриптовый язык программирования, который исполняет весь свой код на стороне сервера, а клиенту выдается только результат работы скрипта. Изначально PHP рас...

Теги

Календарь

< Ноябрь 2011 >
П В С Ч П С В
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 30        

Наши фото

Укажите свое мастерство









 

Обрати внимание

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

На заметку

Твой сайт
Изготовление сайта - штука тяжёлая и занимает кучу времени. Так что длительность прогулок под Луной с любимой девушкой, а для кого и с любимым бойфрендом, придется с...
JavaScript: очистка формы
Для очистки формы существует специальная кнопка Reset, при нажатии на которую данные формы возвращаются в исходное значение. Если ввести свои данные в форму, а затем ...