Может быть очень досадно, когда после щелчка на ссылке браузер не знает, что делать с тем, на что указывает эта ссылка. Однако достаточно часто можно видеть Web-сайты со ссылками на изображения, документы PDF, и видео, которые не предупреждают об этом посетителей. Видео особенно часто становится причиной для отказа браузеров. Более того, ресурс может быть большим по объему (PDF файл размером 20 Мбайтов, например), который посетитель мог бы предпочесть загрузить, а не открывать в браузере, или вообще не обращаться к этому документу.
Одним из важнейших факторов успеха Web-продукта является исключение для людей необходимости догадываться, что произойдет, когда они выполнят какое-то действие, и четко сообщить им вместо этого, какой результат будет иметь их действие. В случае ссылок для исключения разочарования достаточно сообщить посетителям, с каким ресурсом соединяется ссылка. Вот несколько примеров (linkingnonhtml.html):
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»content-type» content=»text/html; charset=utf-8″>
<title>Linking non-HTML resources</title>
<link rel=»stylesheet» href=»linkexamplestyles.css»>
</head>
<body>
<h1>Linking non-HTML resources</h1>
<ul>
<li>Find more information on the <a href=»http://developer.yahoo.com»>Yahoo Developer Network site (external)</a></li>
<li>Download the <a href=»http://www.wait-till-i.com/stuff/JavaScript-DOM-Cheatsheet.pdf»>Dom Cheatsheet (PDF, 85KB)</a></li>
<li>Pick and <a href=»ftp://get.opera.com/pub/opera/win/»>download different Opera versions from their FTP (external)</a></li>
<li>Check out a <a href=»http://farm1.static.flickr.com/56/188791635_0b8bdd808d.jpg?v=0″>Photo of my book (JPG, 200KB)</a></li>
</ul>
</body>
</html>
Предоставляя такую информацию о файле ссылки и его размере, вы оставляете принятие решения о том, что с ним делать, посетителям, а не предполагаете, что они имеют определенные настройки браузера или установленное программное обеспечение. Если соединить это с хорошим стилевым оформлением, то можно даже заставить это выглядеть симпатичным и интуитивно понятным. Если вы хотите быть совершенно безопасным, предложите также раздел справки, который поясняет, что означают различные форматы файлов, и где можно взять программное обеспечение, необходимо для их вывода.
Внешние и внутренние ссылки
Один из самых больших страхов руководителей компаний, когда речь идет о Web-сайте компании, состоит в том, что люди покидают сайт преждевременно. Это часто является причиной отсутствия ссылок на сторонние сайты (если только владельцы этих сайтов не платят деньги за право получения направленного им Web-трафика). Я вернусь к этому ошибочному решению позже; пока давайте поговорим о том, что делают люди, чтобы избежать ухода посетителей со своего сайта, и как эти меры влияют на успех сайта.
Фреймы и всплывающие окна — скажите просто нет
Страх ухода посетителей на другие сайты вместе с желанием иметь на них ссылку, породили несколько изобретений в разработке приложений Web, которые годами были помехой для создания удобных для использования сайтов: фреймы и всплывающие окна.
Использование фреймов HTML означает, что вы делите выводимую в браузере страницу на несколько различных документов. Преимущество состоит в том, что документ по внешнему виду остается таким же, даже когда части его загружаются либо с вашего собственного сервера, либо с серверов сторонних компаний. Однако именно здесь заканчивается полезность — фреймы являются ужасным опытом пользователей и фактически вредными.
- Поисковые системы никогда не смогут проиндексировать всю страницу, но вместо этого могут показывать части страницы в результатах поиска, что не имеет смысла в отрыве от контекста.
- Посетители не могут сделать на странице закладку — когда в следующий раз они открывают свою закладку, они получают начальное состояние множества фреймов, а не страницу, как они ее покинули.
- Посетители, зависящие от вспомогательных технологий, испытывают большие трудности при навигации по фреймам.
- Владельцы сторонних сайтов могут быть недовольны тем, что выводятся внутри множества фреймов, и могут использовать сценарии «разрушения фреймов», которые заменяют множество фреймов реальным URL, когда вы пытаетесь их использовать. Это делается для защиты от мошенников, соблазняющих пользователей Интернет ввести, например, информацию о кредитной карте на Web-сайте, который кажется похожим на банк (так называемый «фишинг»).
Ссылки внутри множества фреймов используют атрибут target анкера для указания правильного фрейма. Каждый фрейм в множестве фреймов получает определенное имя, и активация ссылки будет открывать документ, определенный в атрибуте href в этом фрейме. Если множество фреймов недоступно (например, когда посетитель находит документ со ссылками через поисковую систему), каждая ссылка открывается в новом экземпляре браузера.
Открытие нового экземпляра браузера является другим распространенным способом соединения со сторонними сайтами — либо с помощью сценарного всплывающего окна, либо с помощью атрибута target со значением _blank. Тот факт, что каждый современный браузер поставляется со средством блокирования всплывающих окон должен подсказать, что использование такого подхода является совершенно неоправданным.
Короче говоря: не используйте атрибут target при создании ссылок, если только вы действительно знаете, что делаете. Однако это устаревшая идея — сегодня большинство браузеров имеют интерфейсы с вкладками, поэтому пользователи могут открывать сторонние сайты в фоновом режиме для дальнейшего чтения, оставаясь на вашем сайте. При некоторых обстоятельствах может понадобиться указать различие между внешними и внутренними ссылками, но всегда оставляйте на усмотрение посетителя, что они захотят с ними сделать.
Преимущества исходящих и входящих ссылок
Существует несколько серьезных причин для создания ссылок на сторонние сайты, даже когда они являются конкурентами.
- Это создает доверие в глазах посетителей — вы настолько уверены в качестве своего контента, что не боитесь конкуренции.
- Это возможность предоставить полноценную службу — можно связаться с контентом и статьями или даже продуктами на других сайтах, которые вы не охватываете, но которые могут быть интересны для тех посетителей, кто хочет глубже погрузиться в рассматриваемую тему.
- Вы можете доказывать свою точку зрения, опираясь на старую статью стороннего сайта, и предлагая лучшее или другое решение, и ссылаясь на старую статью в качестве доказательства через ссылку.
Полезность входящих ссылок (ссылок, указывающих с внешнего сайта на ваш) менее дискуссионна. Чем более убедительные и высококачественные сайты ссылаются на ваш с помощью подходящих ключевых слов, тем выше вы будете ранжированы в поисковых системах, таких как Google. Однако, прежде чем это произойдет, необходимо доказать, что вы также не боитесь ссылаться на других.
Подходящие ключевые слова ведут нас к другой очень важной части создания хороших ссылок: как их формулировать.
Формулировка ссылок
Частично этот вопрос уже рассматривался в разделе о ссылках на ресурсы, отличные от HTML, но можно лишний раз напомнить себе, что ссылки являются не только частью основного текста, но являются также интерактивными элементами в документе.
Некоторые вспомогательные технологии предлагают список ссылок вместо целого документа, чтобы позволить посетителям быстро по ним перемещаться, что означает, что необходимо сделать так, чтобы текст ссылок имел смысл вне контекста, в котором они находятся. Можно легко проверить это в браузере Opera, открывая Web—сайт и выбирая в меню Tools > Links или нажимая Ctrl + Alt + L. Будет создана новая вкладка, которая показывает все ссылки в документе, и куда они указывают.
Это означает, что необходимо гарантировать не только что тексты ссылок имеют смысл, но также что нет ссылок, которые имеют одинаковое выражение, но указывают на различные ресурсы. Классической ошибкой здесь являются ссылки «щелкните здесь», представленные например как «Для загрузки последней версии нашего инструмента щелкните здесь». Значительно лучше использовать текстовую ссылку, которая поясняет, на что она указывает — в данном случае «Вы можете загрузить последнюю версию нашего инструмента и проверить его самостоятельно».
То же самое применимо к ссылкам «продолжение». Они часто встречаются на новостных сайтах, где вы получаете заголовок и текст анонса и ссылку для перехода «продолжение» или «полная история». Решение этой проблемы состоит либо в использовании ссылочного изображения «продолжение» и задание для него уникального альтернативного текста, либо в добавлении интервала внутрь ссылки после «продолжение» и сокрытие его с помощью CSS. Вы узнаете больше об этих приемах в руководстве о меню и навигации позже в ходе курса.
Стилевое оформление ссылки
Bы пока еще не добрались в этом курсе до CSS, но будет полезно рассмотреть в этом месте, что способ представления ссылок очень важен, и что имеется несколько различных состояний ссылки, которые надо учитывать. Состояниями (которые позже свяжутся с псевдо селекторами CSS — это звучит угрожающе, но это не сложно) являются:
- link — состояние по умолчанию — оно определяет, как должны выглядеть ссылки в определенной части документа. По умолчанию непосещенные ссылки имеют синий цвет.
- visited — стиль ссылки, которая уже была посещена раньше (онa может уже находиться в кеше браузера). По умолчанию посещенные ссылки имеют пурпурный цвет.
- hover — стиль ссылки, когда курсор мыши находится над ней.
- active — стиль ссылки, когда она активируется, т.е. когда выполняется соединение с другим сайтом; это также стиль последней активированной ссылки, когда вы снова возвращаетесь к документу в своем браузере.
Заключение
Мы рассмотрели в этот раз достаточно много, но очень важно помнить, как работают ссылки, и что они должны делать. Вы узнаете много приемов и методов за свою карьеру разработчика Web, позволяющих переопределить это поведение по умолчанию, и я надеюсь, что вы остановитесь и задумаетесь, действительно ли нужно то, что вы собираетесь сделать.
Оставить комментарий