10 юзабилити преступлений, которых вы не должны совершать

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

Преступление #1: В формах метки не связаны с полями ввода

crime1
Использование атрибута «for» позволит пользователям кликать по метке, для выбора соответствующего поля формы. Это особенно важно для чекбоксов и радиокнопок – увеличить область клика.
Подробнее »

Флеш против IE. Побеждает SWFObject!

После того, как Microsoft объявила (опять же), что они изменили способ обработки плагинов в Internet Explorer у веб-разработчиков добавилось проблем. Заключается она в том, что при вставке applet, object, или embed в HTML документ плагин не допустит взаимодействия с пользователем до тех пор, пока пользователь не нажмёт на него :(.

В случае с флеш плагином, это означает, что ваш ролик не будет проигрываться до тех пор, пока пользователь его не активизирует, кликнув на нём. К счастью, Micosoft предлагает довольно простой способ обойти это проблему – вставлять флеш, используя Javascript.

Итак…

SWFObject это небольшой Javascript файл, используемый для максимально лёгкой и валидной вставки флеш. Он помогает обойти дурацкую «защиту» в IE, работает во всех основных браузерах, дружит с поисковиками, вобщем мастхэв! Взгляните на демо-страничку скрипта.

В использовании предельно прост – подключаем файл swfobject.js и добавляем в код странички примерно такое:
Подробнее »

Перенос слов в теге PRE

html-pre-tag.png

Вы наверное не раз замечали, что при использовании тега PRE или CODE для отображения какого-то куска кода получается весьма некрасивая картина. А именно: строки отображаюся без переносов, растягивая и портя дизайн сайта. До того как я написал прошлую заметку я особо не заморачивался данной проблемой. Сегодня же пришлось погуглить и найти красивое CSS решение проблемы:

1
2
3
4
5
6
7
pre {
	white-space: pre-wrap; /* css-3 */
	white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: -o-pre-wrap; /* Opera 7 */
	word-wrap: break-word; /* Internet Explorer 5.5+ */
}

Открытие ссылок в новом или всплывающём окне

Поехали, сразу с середины статьи Alex’a Walker’a – New Windows and Usability: the Theory of ‘REL-ativity’. Вольный первод :)

До сих пор у всех нас есть шеф или клиенты, которые хотят от нас использования всплывающих окон, ну и конечно же, открытия внешних ссылок в новых окнах. Но использование аттрибута ‘target=»_blank»‘ в XHTML strict не является валидным :(

Использование 'href="javascript:...."' или 'href="#" onclick="..."' для всплывающих окон нам не подходит изначально – т.к. протокола javascript: нет, а # вообще никуда не ведёт – в любом случае при отключенном js пользователь окажется в неприятном положении :(

Итак, усовершенствуем ссылки…
Подробнее »

W3C утвердил новый тег!

Вебдевелоперская общественность довольна! :)