X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> <button> или <a> - за и против?
ShowPrint
ShowPrint
Topic Starter сообщение 15.4.2015, 2:35; Ответить: ShowPrint
Сообщение #1


В ночных изучениях материалов по 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>

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

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

** над стилями не работал (не украшал) - важно было определиться с принципом

 


Результат действий:
1) Кнопка "О компании" - запускает скрипт index.php с "?" в конце (пустой get), подозреваю что можно убрать посредством 301 директа через htaccess;
2) Кнопка "Продукция | Услуги" - просто запускает скрипт (в чистом виде, без "?"), но "пустышку" (насколько понимаю) все равно "засовывает в мозги" посредством передачи post-методом;
3) Кнопка "Контакты" работает в классическом варианте перехода, как и следует "классическому" методу...

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

Вот такие мысли... Мучаюсь, не могу определиться... Может у кого-нибудь из форумчан есть аргументы "за" или "против" какого-нибудь из вариантов?
Буду признателен за любые комментарии - это поможет определиться "неопределившемуся"... =)
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 15.4.2015, 9:27; Ответить: yury_mw
Сообщение #2


При реализации меню 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.4.2015, 9:36
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ShowPrint
ShowPrint
Topic Starter сообщение 15.4.2015, 10:02; Ответить: ShowPrint
Сообщение #3


yury_mw, Спасибо за еще один вариант, про возможность использования списков я совсем забыл... говорила мне мама: по ночам надо спать, а не сайты верстать =)))
(yury @ 15.4.2015, 11:27) *
JS тоже не являются необходимыми
 JS упоминался в контексте реализации возможности перехода посредством клика "по области с ссылкой", а не по самой ссылке... Вариант с использованием списка идентичен (функционально) использованию тега <a> (содержит в себе)...
(yury @ 15.4.2015, 11:27) *
button не используются
Знаю, я бы сказал "как правило", но из любых правил есть исключения ;)
Не уверен что я возьмусь за реализацию этих исключений, но уж больно юзабельно когда можно ткнуть не на ссылку, а на краешек кнопки и перейти куда надо... особенно на яблофоне... )))
"Переночевав" со своими размышлениями на этот счет, самым весомым аргументом "против" button является именно "не используются", т.е. то, что если для переходов придуманы гиперссылки, то они и должны использоваться для этого...
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 15.4.2015, 10:40; Ответить: yury_mw
Сообщение #4


(ShowPrint @ 15.4.2015, 12:02) *
Не уверен что я возьмусь за реализацию этих исключений, но уж больно юзабельно когда можно ткнуть не на ссылку, а на краешек кнопки и перейти куда надо... особенно на яблофоне... )))
Приведенный выше пример, как раз, и предлагает возможность тыкать в любое место кнопки, в том числе на ее краешек.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ShowPrint
ShowPrint
Topic Starter сообщение 15.4.2015, 11:16; Ответить: ShowPrint
Сообщение #5


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


Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Создать видеоканал лучше в ютуб или телеграм?
10 uahomka 1791 24.3.2024, 4:21
автор: Alexand3r
Открытая тема (нет новых ответов) Если статья не в индексе Google - она уникальна или нет?
2 uahomka 800 20.3.2024, 11:17
автор: Vmir
Открытая тема (нет новых ответов) Где больше пробив на кликандер или попандер или попап трафике?
1 Boymaster 614 20.3.2024, 9:50
автор: Skyworker
Горячая тема (нет новых ответов) Выполню качественную верстку макетов или разработка собственного, быстро и не дорого
от 45$
123 webche 116754 17.3.2024, 7:09
автор: webche
Открытая тема (нет новых ответов) От какого экрана будут меньше уставать глаза OLED или IPS?
3 metvekot 981 12.3.2024, 16:25
автор: MisterBit


 



RSS Текстовая версия Сейчас: 29.3.2024, 9:43
Дизайн