Кнопки vs Ссылки



Всем привет! Давно не виделись! И все по тому, что я уезжала отдыхать. Те, кто подписан на меня в твиттере об этом знали, так что если вы еще не подписаны — подписывайтесь и следите за всеми событиями))

Сегодня поговорим о том, что лучше использовать: кнопки или ссылки на сайте? Конечно, все зависит от самого сайта, где-то лучше использовать кнопки, где-то ссылки. Web-дизайнеру остается только выбрать, что лучше будет смотреться при разработке конкретного проекта.

На сайте можно осуществить какое-либо действие только с помощью кнопок или ссылок. В чем же отличие? Какие функции они выполняют? Об этом я расскажу ниже.

Навигация — это важная часть сайта, собственно и оформлять ее надо понятно и красиво. Тут есть всего 2 варианта на выбор: использовать кнопки или обычные ссылки? Давайте разберемся.

Что такое ссылка? Ссылка (гиперссылка) — это часть документа,  в случае нажатии на нее происходит переход на другую страницу, документ, файл или раздел.

Что такое кнопка? Это элемент управления на сайте. При нажатии на кнопку происходит совершение посетителем какого-либо действия. Например: «скачать»,  кнопка голосования или кнопка регистрации на сайте. 

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

Кнопки на сайте

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

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

Минусы графических кнопок:

  • Создание кнопки . На создание красивой кнопки может уйти очень много времени. Если делать анимированную кнопку, то ко всему этому придется потратить еще какое-то время. Но если дизайнер профессионал, думаю, больших трудностей это не вызовет.
  • Загрузка. Если кнопка весит слишком много, то страница будет загружаться в разы медленней. Конечно, здесь надо учитывать не только вес кнопок, но и само оформление сайта.  Бывает, что вся навигация сделана из изображений, тогда возможна ситуация, что пользователь уже увидит текст, а страница еще не прорисовалась, и он уйдет, так и не оценив ваше творение.
  • Отключенная графика. Многие пользователи отключают графику в браузерах, стараясь не расходовать трафик и время, отсюда следует, что он вообще не увидит навигацию.
  • Маленькие кнопки. На маленьких кнопках соответственно мелкий шрифт, а это не есть хорошо.
  • Индексация. Текст с кнопки не индексируется поисковыми роботами. Единственное что можно сделать — это использовать атрибут Alt.

Текстовые ссылки на сайте

Такие ссылки предназначены для того, что бы связать страницы между собой. Гиперссылки создаются с помощью простых HTML-тегов . С помощью стилей CSS можно настроить цвет, жирность и т.д. При загрузке текста на странице ссылки загружаются очень легко и быстро.

Ссылки работают во всех браузерах и при любых разрешениях одинаково. В отличие от графических кнопок они индексируются поисковыми системами.

Недостатки текстовых ссылок:

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

Если вы решили делать графическое оформление, то используйте кнопки с умом. Их следует делать под весь стиль разрабатываемого макета сайта. То есть если вы делаете бизнес-сайт, то, вы сами понимаете, не стоит выпендриваться и рисовать цветочки на кнопках.

Кнопки следует делать понятными, не использовать большой вес, и не забывайте про атрибут Alt .

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

Учитывая то, что графические кнопки — это большая свобода для творчества, обычные ссылки более гибкие и легко настраиваемые.

Можно взять один простой пример с моего блога. Если посмотреть на подписку по RSS и Twitter в боковом столбце, то можно увидеть, что там используются кнопки-картинки, выглядит красиво, да? Нежели там будут стоять унылые, малозаметные ссылки.

Мое мнение такое: основные разделы, такие как «главная», «об авторе», «контакты» лучше всего делать кнопками, а остальные разделы, например, из рубрик — делать ссылками. Но опять же — нужно учитывать весь дизайн сайта и не ляпать, что попало, куда попало. А вы как думаете?




  1. Absolute:

    Согласен, кнопки необходимо использовать там, где они действительно нужны. Но особого преимущества использования кнопок в навигации я не вижу :)

  2. Михаил:

    По поводу того, что ссылки выглядят невзрачно, не соглашусь:)Можно поместить ссылку в контейнер, которому при помощи CSS указать необходимый размер, фоновое изображение или просто заливку, рамку и т. д. Также при наведении курсора все эти параметры можно менять. Смотреться будет не хуже кнопок

  3. HuntingDog17:

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

    Полностью графические кнопки делают только неопытные веб-дизайнеры или верстальщики.

    Про вес графических кнопок тоже не согласен — если делает толковый дизайнер, то «цена» вопроса несколько десятков килобайт (а то и меньше).

  4. lpchernozem:

    Услуги транспортировки тяжестей Орловской транспортной компании ТК «Логистика Черноземья». Узнайте стоимость перевозки тяжелых грузов по телефону +7 (4862) 49-08-36 или на сайте.

Ваш отзыв