Жми сюда!

Вадим Макеев, Opera Software

Жми сюда!

Кнопка, ссылка, псевдоссылка? Как правильно выбрать, сверстать и не наделать глупостей.

Ссылка

				<a href="http://…">Ссылка</a>
			
  • Основа гипертекста, лучший друг поисковика
  • Переход между документами самым явным образом
  • Привычна и удобна, как ничто другое

Главное — адрес

Не ссылка

Если у ссылки нет адреса, внутреннего, внешнего или логического, то это не ссылка, т.е. не <a href=""> и даже не <a>

Ведь пользователь может…

Пользователь может

  • Кликнуть с модификатором и открыть в фоновой вкладке
  • Перетянуть на панель закладок или на рабочий стол
  • Кликнуть правой кнопкой и скопировать адрес
  • Взаимодействовать с помощью расширений и программ

Когда ссылка — ссылка

Псевдоссылка

				<a href="#anchor">Псевдоссылка</a>
			
  • Некоторое действие на той же странице
  • Якоря, подстановка текста в формы, открытие выпадушки
  • Стала де-факто стандартом для этого круга действий

Но это не обязательно ссылка…

Тоненьким пунктиром

				.pseudo-link {
				    border-bottom:1px dotted;
				    }
			
  • Стиль dotted выглядит чище, чем dashed
  • Цвет можно не указывать, он наследуется от текста
  • Можно рисовать пунктир картинкой и даже градиентом

Кнопка

				<input type="submit" value="Кнопка">
				<input type="button" value="Кнопка">
				<input type="image" src="…">
			
  • Действия, связанные с отправкой данных, некоторым процессом
  • Самый привычный системный элемент: ДА или НЕТ?!
  • Делать лапу cursor:pointer совсем не нужно

The button element represents a button.
The element is a button.

Кнопка «Кнопка»

				<button type="button">Кнопка</button>
				<button type="submit">Кнопка</button>
				<button type="reset">Кнопка</button>
			

Универсальный элемент для использования вне форм

JavaScript

Яндекс «Ещё»

				<span class="b-link b-link_pseudo_yes i-bem"
				      onclick="return {"b-link":{}}">
				    <span class="b-link__inner">ещё</span>
				</span>
			

С виду правильно, но есть настоящая ссылка «Все сервисы»

Google «Ещё»

				<a href="http://www.google.ru/intl/ru/options/"
				   onclick="gbar.tg(event,this)" aria-haspopup="true">
				    <span id="gbztms1">Ещё</span>
				</a>
			

Всё очень правильно, есть даже ARIA для выпадушки

Facebook «Ещё»

				<a class="rhcFooterSelectorButton"
				   href="#" aria-haspopup="true" aria-expanded="false"
				   aria-owns="u5urfy_47" aria-controls="js_5">
				   Ещё<i class="img sp_4yc81c sx_3f849e"></i>
				</a>
			

Решётка, то есть, простите, диез…

Mail.Ru «Ещё»

				<a href="javascript:void(0);" class="mlr-psd_lnk">
				    <u id="mailru-webagent">Показать все поля</u>
				    <i class="mr_arrow"><b></b></i>
				</a>
			

Void!

Я.Почта «Обновить»

				<a data-action="mailbox.check">
				    <img class="b-ico b-ico_check-mail" src="…">
				    <span class="b-toolbar__item__label">Проверить</span>
				    <span class="b-toolbar__item__selected …
				</a>
			

Сссылка-нессылка

Gmail «Обновить»

				<div class="T-I J-J5-Ji nu T-I-ax7 L3" role="button"
				     tabindex="0" style="-webkit-user-select:none"
				     aria-label="Refresh" data-tooltip="Refresh">
				    <div class="asa">
				        <span class="J-J5-Ji ask">&nbsp;</span>
				    </div>
				</div>
			

Я.Почта «Отправить»

				<input type="submit"
				       class="b-mail-button__button" tabindex="10">
			

Всё хорошо

Mail.Ru «Отправить»

				<a class="button-a js-send" tabindex="1"
				   href="#" role="submit" title="Ctrl+Enter"
				   id="mailru-webagent-gen-35">
				   Отправить
				</a>
			

Дали в руки якоря…

Gmail «Отправить»

				<div id=":ga" class="T-I J-J5-Ji Bq nS T-I-KE L3"
				     role="button" tabindex="2"
				     style="-webkit-user-select:none">
				    <b style="-webkit-user-select:none">Send</b>
				</div>
			

Грубо и прямо

ВКонтакте

				<button id="send_post"
				     onclick="wall.sendPost()">Отправить</button>
				<span class="post_like_link fl_l"
				     id="like_link4483_747">Мне нравится</span>
			
				<a class="fl_r pv_close_link"
				     onclick="Photoview.hide(0)">Закрыть</a>
			

Twitter

				<a href="#" class="tweet-button btn">Твитнуть</a>
			
				<a href="#" class="with-icn js-toggle-rt">
				    <span class="undo-retweet" title="Отменить ретвит">
				        Ретвиты</span>
				    <span class="retweet" title="Ретвитнуть">
				        Ретвитнуть</span></b></a>
			

Ссылки — для перехода по адресам между страницами

Псевдоссылки — для локальных передвижений или изменений

Кнопки — для передачи данных, процессов и диалогов

Жми сюда!

Вадим Макеев, Opera Software

Презентация: pepelsbey.net/pres/push-it