Классное расширение для фреймворка Twitter Bootstrap v2.0 — CSS-генератор кнопок. С помощью ползунков выбираете цвет, насыщенность, яркость и выпуклость кнопки.



Потом забираете CSS-код из соседнего окошка. И больше никогда не кодируйте цвет кнопок вручную!

P.S. Ещё один генератор кнопок: Button Maker, ну и вдобавок: CSS генератор градиентов.

Хочу поделиться ссылками на несколько полезных сервисов. Некоторые из них помогут сэкономить время, другие — сделают за Вас незнакомую/нелюбимую работу. Список разбит по категориям, чтобы было легче ориентироваться. Другие сервисы приведены в посте Упрощение жизни разработчика с помощью сторонних сервисов.

Сервисы опросов
simpoll.ru
anketer.ru
userreport.com (добавил Romanych)
webanketa.com (добавил mihass)
Конечно, у большинства CMS есть плагины для реализации опросов, но можно воспользоваться и сторонними сервисами с удобной админкой, наличием большого количества настроек и удобным выводом результатов.

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

Выглядело это примерно так:



html

<div class="large_button">
  <span class="buttons submit_v2-button clickable">
    <i class="left left2"></i>
    <i class="body">
      <b>В архив</b>
      <i class="end">
        <i></i>
      </i>
    </i>
  </span>
</div>

Видно, что запутаться в таком коде проще простого, тем паче, что вариантов кнопок на проекте накопилось не менее 30. Попытка создать такую кнопку на серверной стороне вызывала негодование у коллег «пехапистов».

Поэтому моей негласной задачей стало максимальное упрощение кода.

Почти все мои знакомые веб-мастера после выхода в свет социалки от Google и появления кнопки +1 установили код кнопки на свои ресурсы. На очень многих сайтах появилась эта самая кнопка, соседствующая теперь с «лаком» от Facebook, кнопкой от Twittera и «Вконтакте». Но до последнего кнопочка +1 выглядела как-то сиротливо, не показывая, кто же нажал на нее. Да, есть инструмент в Google Analytics, позволяющий просмотреть сколько раз нажали на кнопку на различных страницах ресурса — и это почти все. Теперь же разработчики обновили код, снабдив кнопку дополнительной информацией.

Популярней в том смысле, что она уже установлена на большем количестве ресурсов, чем кнопка Tweet Button. И это не смотря на то, что кнопке Google +1 от роду не больше месяца. Все же вебмастера, видимо, считают кнопку от Google более перспективной для получения трафика, чем кнопку от Twitter (да и на результаты поисковой выдачи кнопка «Корпорации Добра» вроде как влияет).

Данная статья является продолжением статьи Рисуем кнопку в SVG, в которой рассматривались проблемы создания SVG-изображений, предназначенных для использования в качестве кнопок на веб-страницах. Здесь я перейду непосредственно к внедрению полученных картинок в HTML-код и расскажу, с какими проблемами столкнётся при этом разработчик, как эти проблемы можно решать и что делать с проблемами, которые решить не удаётся.

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

В настоящее время я работаю над одним веб-приложением, и вот захотелось мне обновить нынешний, довольно-таки топорный интерфейс на что-то более современное, более красивое. Начать решил с кнопок как с наиболее технически нагруженной части: в них требуется не только заменить внешний вид, но и добавить индикацию нажатия и обработку событий. Сразу же возникла проблема: как обеспечить масштабирование? Обычной растровой картинкой не обойтись, так как у пользователей могут использоваться разные шрифты (как вид, так и размер), и картинка-подложка не будет под них адаптирована. Логично было бы попробовать использовать для этих целей SVG, чем я и занялся.

К сожалению, в конечном итоге я пришёл к выводу, что овчинка не стоит выделки: слишком много проблем вылезло при попытке реализации этой идеи. Тем не менее, я не считаю это время потерянным: я приобрёл новые знания и навыки и теперь хотел бы поделиться ими с сообществом, чтобы облегчить жизнь тем, кто решит повторить мой путь. Описать свои мучения я планирую в двух статьях: в первой — работа над собственно SVG-картинкой, во второй — техника внедрения полученной картинки в качестве кнопок, возникающие при этом проблемы и их решение или обходные пути. Кому интересна первая часть, прошу под кат.

Капитан Очевидность опять будет смеяться, но факты таковы: у доброй половины обратившихся ко мне за консультацией с проблемой “Плохие продажи” — на сайте возле описания товара отсутствовала цена и кнопка [Купить]! При этом создатели сайта не вызывали никаких сомнений в умственной полноценности, наоборот, уровень их сайтов был гораздо выше среднего. Этому есть вполне разумное объяснение и лежит оно опять же в области UX дизайна и моделирования опыта пользователей.