Перейти к содержимому


Партнерская программа Kredov

<button> или <a> - за и против?

#1 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 729 сообщений
  • Репутация: 410
0

Отправлено 15 Апрель 2015 - 01:35

В ночных изучениях материалов по css с целью редизайна сайта с учетом адаптивности отрыл и реализовал (списал и оттестил) вариант реализации навигации главного меню... Сделал и задумался... Хотелось бы услышать мнение уважаемых форумчан...

А сделано следующее...

В линкованом css:

button {
background: linear-gradient(to top, #b5bdc8, #828c95 36%, #28343b);
font-size: 16px;
padding: 5px 10px;
margin: 3px;
color: #fff;
border: 1px solid #333;
border-radius: 15px;
height:30px;
cursor:pointer;
}
.button_menu {
background: linear-gradient(to top, #b5bdc8, #828c95 36%, #28343b);
font-size: 16px;
padding: 5px 10px;
margin: 3px;
color: #fff; /* Цвет текста */
border: 1px solid #333;
border-radius: 15px;
height:30px;
}

В коде:

<form>
    <button formaction='index.php'>О компании</button>
    <button formaction='production.php' formmethod='post'>Продукция&nbsp;|&nbsp;Услуги</button>
</form>
<span class='button_menu'><a href=''>Контакты</a></span>

Визуальный результат фактически одинаков:

MainMenu.png
* цвет ссылки "Контактов" легко поменяю через css (если предпочтение будет отдано данному варианту)
** над стилями не работал (не украшал) - важно было определиться с принципом
 

Результат действий:

1) Кнопка "О компании" - запускает скрипт index.php с "?" в конце (пустой get), подозреваю что можно убрать посредством 301 директа через htaccess;

2) Кнопка "Продукция | Услуги" - просто запускает скрипт (в чистом виде, без "?"), но "пустышку" (насколько понимаю) все равно "засовывает в мозги" посредством передачи post-методом;

3) Кнопка "Контакты" работает в классическом варианте перехода, как и следует "классическому" методу...

 

Все три варианта теоретически имеют место быть, так как все они проходят проверку валидности, но... все-таки надо отдать предпочтение "одному из"...

Вариант "О компании" не сильно "нра", по причине отсутствия желания лишний раз экспериментировать с регулярными выражениями формирования редиректа (тяжко мне это дается)

Вариант "Продукция | Услуги"  практически идеален... Понимаю конечно, что пустой post "жрет ресурсы", в мизерных количествах, но все же... Программерское образование (эх, как давно это было) не дает свыкнутся с этой мыслью... Также (по незнанию) нет уверенности в том, что по такому button-у боты будут ползать точно также, как и по стандартной гиперссылке...

Оба этих варианта обладают "улучшенной" юзабельностью для пользователя, т.к. не обязательно кликать на текст - можно сделать переход кликом в любом месте button-а, это удобно...

Понятно что это можно реализовать и в варианте "Контакты" посредством JavaScript, onMouseOver и т.д., но как-то не сильнО желание "наворачивать" и "загружать" код, ведь кроме лишнего гимора это и требует обязательного наличия у юзверя подключенного JavaScript-а (хотя таких и 99,9%, но 0,1% все же есть), плюс тоже самое "пожирание" ресурсов, плюс более тяжелый код (читать как " большее время загрузки"), и еще всяческие мелочи....

 

Вот такие мысли... Мучаюсь, не могу определиться... Может у кого-нибудь из форумчан есть аргументы "за" или "против" какого-нибудь из вариантов?

Буду признателен за любые комментарии - это поможет определиться "неопределившемуся"... =)


 

 

  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#2 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 15 Апрель 2015 - 08:27

При реализации меню button не используются. Формы и JS тоже не являются необходимыми.
Ваш вариант делается примерно так:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
ul#menu{
  list-style: none;
  height: 38px; /*30+2*1+2*3 - высота кнопок (height) + удвоенная толщина рамки (border) + удвоенные вертикальные поля (margin), сюда же могут добавиться еще вертикальные отступы (padding), но у вас они равны 0*/
  overflow: hidden; /*чистим поток*/
}
#menu li{
  float: left; /*кнопки горизонтально*/
  height: 30px; /*высота кнопок*/
}
#menu li a{
  float: left; /*кнопки блочные (активна вся отведенная под них область а не только текст), выровнены влево*/
  height: 30px; /*высота активной области кнопок*/
  background: linear-gradient(to top, #b5bdc8, #828c95 36%, #28343b);
  font: 16px/30px Arial, "Nimbus Sans L", Helvetica, sans-serif; /*размер шрифта/высоту строки делаем равной высоте кнопки 30px, чтобы отцентровать текст по вертикали, далее через запятую идут безопасные шрифты*/
  text-decoration: none; /*убираем подчеркивание на кнопках*/
  padding: 0 10px;
  margin: 3px;
  color: #fff; /* Цвет текста */
  border: 1px solid #333;
  border-radius: 15px;
}
#menu a:hover{ /*чем кнопки будут отличаться при наведении мыши*/
  background: linear-gradient(to top, #828c95 36%, #28343b, #b5bdc8);
}
</style>
</head>
<body>
<ul id="menu">
  <li><a href="index.php">О компании</a></li>
  <li><a href="production.php">Продукция&nbsp;|&nbsp;Услуги</a></li>
  <li><a href="">Контакты</a></li>
</ul>
</body>
</html>

Сообщение отредактировал yury: 15 Апрель 2015 - 08:36

  • 1

#3 ShowPrint

ShowPrint
    Topic Starter
  • Пользователь PRO
  • 1 729 сообщений
  • Репутация: 410

Отправлено 15 Апрель 2015 - 09:02

@yury, Спасибо за еще один вариант, про возможность использования списков я совсем забыл... говорила мне мама: по ночам надо спать, а не сайты верстать =)))

JS тоже не являются необходимыми
 JS упоминался в контексте реализации возможности перехода посредством клика "по области с ссылкой", а не по самой ссылке... Вариант с использованием списка идентичен (функционально) использованию тега <a> (содержит в себе)...

button не используются
Знаю, я бы сказал "как правило", но из любых правил есть исключения ;)

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

"Переночевав" со своими размышлениями на этот счет, самым весомым аргументом "против" button является именно "не используются", т.е. то, что если для переходов придуманы гиперссылки, то они и должны использоваться для этого...


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#4 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 15 Апрель 2015 - 09:40

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

Приведенный выше пример, как раз, и предлагает возможность тыкать в любое место кнопки, в том числе на ее краешек.
  • 0

#5 ShowPrint

ShowPrint
    Topic Starter
  • Пользователь PRO
  • 1 729 сообщений
  • Репутация: 410

Отправлено 15 Апрель 2015 - 10:16

@yury, ещё раз спасибо, будет чем заняться этим ночером, попробую... )))


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/



Оформление форума – IPBSkins.ru