Сегодня я обращусь к вечному спору всех верстальщиков, вопросу, почище знаменитого «Быть или не быть?» - спору о кнопках и ссылках. Конечно, однозначно сказать что использовать для создания навигации, не сможет никто, но я все же рискну высказать свое скромное мнение по данному вопросу... Скажу сразу - тут нет единого мнения, нет стандарта, нет универсальных рекомендаций. В каждом отдельном случае надо рассматривать целесообразность того или иного метода.
Лирическое отступление. Давайте же расставим точки над «i». Что такое кнопка? Кнопка - это, прежде всего кнопка! Это элемент управления. Поэтому она должна применяться там, где пользователю требуется завершить какое-то действие нажатием кнопки. Напимер, голосование - выбираете вариант ответа, жмете «Голосовать», и дело сделано. Все просто и логично. Кнопки чаще всего применяются в различных формах, для этого в HTML существуют специальные тэги.
Мне кажется, в других случаях применение кнопок нецелесообразно. Например, на многих сайтах, нажав на кнопку, можно скачать файл (далеко ходить не надо - так устроено скачивание электронного журнала IZONE). Мне кажется, это нелогичным - скачивая файл, мы ничем не управляем на сайте, мы просто получаем доступ к другой информации. Вот здесь мы и сталкиваемся с ссылками.
Как известно, Интернет во многом обязан своему появлению и бурному развитию языку HTML, в основе которого лежит концепция связывания документов с помощью гипертекстовых ссылок. Т.е именно ссылки служат для связывания документов в единое целое. Поэтому, если пользователю предлагается получить доступ к какой-то информации, логичнее будет использовать ссылку. Меня, например, ссылка «Скачать!» привлекает больше, нежели кнопка с такой же надписью.
О навигации
Вот мы, собственно, и подошли к тому, ради чего статья затевалась: использованию «кнопок» в навигации. Я пишу в кавычках потому, что здесь я рассматриваю не кнопки в обычном понимании, а графические изображения с гиперссылками. Но, пожалуй, отбросим кавычки, тем более, что большинство людей так и делает, называя картинки-ссылки кнопками. Как известно, навигация - важнейшая часть сайта и оформлять её надо соответственно - красиво и понятно. Вот здесь и встает во всей красе перед дизайнером вопрос выбора - что использовать обычные линки или кнопки. У обоих методов свои сторонники и свои аргументы за и против. Чтож, давайте выслушаем обе стороны.
Кнопки
Многие дизайнеры их очень любят. И не зря. С помощью кнопок можно создать очень красивое меню, стилизовать его под определенную тематику. Это огромный плюс. Тут дизайнер может дать волю фантазии и нарисовать нечто, что приведет пользователя в неописуемый восторг (или ужас) от увиденного. Кроме того, картинки имеют одинаковый размер при любом разрешении экрана пользователя, так что дизайн не «поедет» в любом случае. В некоторых случаях просто необходимо использовать кнопки, потому что текстовые ссылки резко портит весь дизайн.
Но нет ничего совершенного, и у графических ссылок есть множество минусов:
скорость загрузки
- если страница перегружена кнопками, особенно не оптимизированными, то размер страницы становиться слишком велик, из-за чего пользователю на медленной линии приходится долго ждать загрузки страницы. Если вся навигация сделана на изображениях, то возможна ситуация, когда пользователь уже видит текст страницы, но навигация еще не появилась. Это очень неприятно и непонятно, посетитель может уйти, так и не увидев вашего шедевра.
сложность изготовления
- создание хорошей кнопки может занять довольно большое время, и не всякому это по силам. А если делать кнопки анимированными, то надо еще и несколько комплектов делать! А если изменилась структура, то кнопки придется делать заново. Не лучше ли потратить это время на создание интересного контента?
проблема с отключенной графикой
- многие пользователи, пытаясь сэкономить свой трафик и свое время, отключают
отображение графики в браузере. Такой пользователь вообще не увидит вашей навигации!
Частичным решением проблемы является включение атрибута «ALT» с описанием (всегда!
Всегда используйте атрибут alt!. Ваша страница станет наиболее доступной для
пользователя, кроме того, спецификация HTML 4.0 объявляет его обязательным для
тега ), но это не решение проблемы.
отсутствие масштабирования
- с одной стороны это плюс, но на высоких разрешениях кнопки становятся мелкими, а текст на них неразличимым.
неполная поддержка
- существует, хотя и очень малый, процент текстовых и речевых браузеров, которые не работают с графикой.
не индексируется поисковиками
- в отличии от текстовой ссылки, не индексируется поисковыми системами
Прежде чем использовать изображения в навигации, подумайте, надо ли оно вам? Если просто рисовать кнопки, «чтобы было круче», то это неверно. Часто можно обойтись более удобными (на мой взгляд) текстовыми ссылками.
Текстовые ссылки
Изначально предназначены для связывания документов между собой. Создаются очень просто с помощью стандартных тегов HTML. С помощью каскадных таблиц стилей легко настраивается цвет, жирность и прочие свойства. Также быстро появляются при загрузке, как и обычный текст. Отменно работает во всех браузерах и при любом разрешении. Индексируется поисковиками, если содержит ключевые слова, то имеет значительный вес при ранжировании результатов запроса.
Достоинств очень много, но есть и недостатки:
сложности с масштабированием
- если шрифт не задан фиксировано, то существует вероятность, что если пользователь выберет размер больший, чем рассчитывал дизайнер, то весь дизайн развалится, «поедет». С другой стороны, если шрифт фиксированный и слишком мелкий, то на высоких разрешениях текст плохо читается. меньшая
информативность
- зачастую менее информативна, чем хорошо сделанная кнопка эстетически менее
красивая
- хорошая кнопка, все-таки, произведение искусства! Часто, если дизайн насыщен
графикой, то текстовые ссылки не смотрятся.
Выводы
Я думаю, все всё равно остались при своем мнении. Я лишь резюмирую свои мысли.
Используйте кнопки с умом! Не стоит делать их чтобы выпендриться. Можно сделать отличный дизайн с помощью ссылок, это уже неоднократно доказано. Ссылки больше понятны пользователю - синий подчеркнутый текст почти на 100% гарантирует, что ссылка будет правильно идентифицирована. Если используете кнопки, не забывайте использовать атрибут alt (он, кстати, тоже индексируется, но имеет малый вес). Старайтесь максимально оптимизировать графику. Делайте не только красивые кнопки, но и понятные, или не делайте вовсе.
Хотя графические ссылки предоставляют большую свободу творчества дизайнеру, но текстовые ссылки более гибки. Настроить ссылки - дело нескольких минут. Мне кажется оправданным применять кнопки для обозначения главных (корневых) разделов, таких как «статьи», «музыка», «контакты»; а ссылки более низкой иерархии делать текстовыми (например в разделе «контакты», ссылки «схема проезда», «телефоны», «адрес»). Такой подход позволяет «сэкономить на кнопках», облегчив себе работу; еще раз выделить иерархию, тем самым упростить навигацию по сайту; улучшить индексацию сайта, выделив основную информацию текстовыми ссылками.
Вот и все, что я хотел поведать, как обычно, окончательное решение за вами! Удачи!