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

1.12.2009

Категория: Веб-разработка

20 коммент. »

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

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

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

, ,

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

24.01.2008

Категория: Веб-разработка

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

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

Итак…

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

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

, , ,

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

28.12.2007

Категория: Веб-разработка

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+ */
}
,

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

17.03.2006

Категория: Веб-разработка

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

popup window

В наши дни вместо того, чтобы пользователям самим позволять выбирать поведение – открыть ссылку в отдельном окне или нет – до сих пор хотят данного функционала. Всё бы хорошо, но в XHTML strict использование атрибута ‘target=”_blank”‘ не является валидным :(

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

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

, , , ,

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

11.01.2006

Категория: Веб-разработка

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

,