Жми сюда!

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

Жми сюда!

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

Ссылка на страницу

			<a href="http://example.com/">Ссылка</a>
		

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

Ссылка на страницу и её блок

			<a href="http://example.com/#section-3">Раздел №3</a>
		

Ссылка на страницу и объект на ней

			<section id="section-3">
			
			</section>
		

Ссылка на страницу и её блок

			<a href="http://example.com/#section-3">Раздел №3</a>
		

Ссылка на страницу и объект на ней

			<section>
			    <a name="section-3"></a>
			</section>
		

Не ссылка!

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

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

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

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

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

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

			<a href="#anchor">Псевдоссылка</a>
		

Главное для всего типа — локальность

Псевдоссылка с фолбеком

			<a href="http://example.com/login"
			    onclick="login()">Войти
			</a>
		

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

			.pseudo-link {
			    border-bottom:1px dotted;
			    }
		

Кнопка

			<input type="submit" value="Кнопка">
			<input type="button" value="Кнопка">
			<input type="image" src="…">
		

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

Powered by Shower