блоки кнопок-переключателей - Segmented Radio Buttons

Такой тип контролов с сгруппированными кнопками, выполняющими роль переключателей/фильтров имеет четкое название - Segment Control в iOS или вообще в среде разработчиков проектировщиков называется Segmented Radio Buttons. Такую функциональность можно реализовать out of the box в:
 jQuery UI : Buttons with checkbox - http://jqueryui.com/demos/button/#checkbox
делается с помощью такого кода:

 $('#SELECTOR').buttonset();

<div id="SELECTOR">
<input type="checkbox" id="check1" /><label for="check1">One</label>
<input type="checkbox" id="check2" /><label for="check2">Two</label>
<input type="checkbox" id="check3" /><label for="check3">Three</label>
</div>

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

• Twitter Bootstrap - http://twitter.github.com/bootstrap/components.html
• HTML Kickstart - www.99lime.com/elements/

Не могу не украсть эту картинку с одной из стартаперских групп на facebook.

Any occasion is an opportunity!

значения ширины экрана для media queries в css

1. /* телефон в вертикальном положении и прочее */
2. @media (max-width: 480px) { ... }
3.  
4. /* телефон в горизонтальном положении или планшет в вертикальном */
5. @media (max-width: 767px) { ... }
6.  
7. /* планшет в горизонтальном положении или маленький настольный компьютер */
8. @media (min-width: 768px) and (max-width: 979px) { ... }
9.  
10. /* большой стационарный компьютер и выше */
11. @media (min-width: 1200px) { ... }

Отсюда: http://twitter.github.com/bootstrap/scaffolding.html

отображение email-рассылок: Gmail vs Outlook

Сегодня получил небольшую напоминалку от сервиса Teamlab.

Письмо простое по верстке и все же посмотрите как по-разному оно задумывалось дизайнером/делалось верстальщиком и как открывается у офисных пользователей MS Outlook.

Тут тебе все беды налицо: невозможность использовать картинку ввиде background, внесение своих элементов с своими параметрами в разметку, мракобесие со шрифтами.

Не могу удержаться и не выложить два скриншота. Справедливости ради нужно добавить что в почтовом интерфейсе mail.ru письмо открылось визуально неотличимо от Gmail версии - молодцы.

jQuery noty - вывод сообщений пользователю

jQuery-плагин вывода нотификаций - http://needim.github.com/noty/

Сообщения можно показывать в каждом из 11 (!!!) мест экрана, сообщения могут быть всех стандартных типов  - ошибка, подвтерждение, уведомление и тд.К этому всему еще прилагаются темы оформления, callbacks, управление очередью - всего почти 15 опций настройки.

GitHub - https://github.com/needim/noty/

закон Фиттса - большая красная кнопка

Кратко формулируется : легче всего щёлкнуть по самой большой кнопке. (Это не обязательно будет самая важная кнопка)

А вот здесь есть интерактивная презентация, где вам наглядно покажут что это такое. Предварительно замучав кликаньем по разноцветным кружочкам - http://fww.few.vu.nl/hci/interactive/fitts/

интерфейс личного кабинета регистратора доменов

Уже несколько лет пользуюсь этим регистратором доменов - цены на домены очень привлекательные, проблем и сбоев за это время не было, поддержка адекватная отвечает в течение 12-24 часов.

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

Каждый раз видя ряды, сгрупированные в строки, складывается ощущение что это одна общая таблица, мозг начинает искать связь между плюсиком одному домену и минусиком другому (см. например первую и вторую строки) - а ее нету! 

Это совершенно разнородные данные о чем говорят блоки вверху столбцов и подписи: "Последние зарегистрированные" и "Последние операции" - но сверстаны они одинаково - синяя и чуть более крупная левая колонка и серая и мелкая правая с датой.

Для отображени информации такого рода есть паттерны: tabs, accordeon и другие. Кроме того, такую разнородную информацию на одной странице размещать в корне неправильно - должна быть отдельная страница для фин. информации и отдельно для списка подключенных услуг (в данном случае доменов). 

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