Требования к изображениям
— если изображение масштабируемо, это обозначается специальным образом (напр., значок лупа с плюсиком );
— полная поддержка png24 в IE. // см. приложение 1//
— на растягивающихся окнах есть индикатор растягиваемости;
— alt;
— направление теней во всех элементах управления должно быть снизу справа;
— фотографии и изображения, сопутствующие контенту сайта, обязательно снабжаются текстовым комментарием снизу;
— картинка, связанная с текстовой ссылкой, также должна быть ссылкой;
— если речь идет об аватаре или фото, обязательно:
— делать рамку 1px темного цвета в стиле сайта,
— если изображения нет, отображать заставку. Пример:
Требования к flash
— имеет статические флеш-заглушки (при отключенном флеше выглядит адекватно);
— обязательно наличие загрузчика, показывающего объем скачанной и оставшейся информации flash;
— При вставке флеш-картинок использовать скрипт, чтобы избежать в IE выделения рамки при наведении и дополнительного клика для активации флеша // см. приложение 2//
Требования к ссылкам
— поведение ссылок: активные подчеркнуты и выделены цветом, отличным от цвета шрифта;
— при наведении подчеркивание не снимается, цвет шрифта при наведении меняется;
— в больших объемах текста и при выдаче разносторонней информации цвет посещенных ссылок меняется (это правило не распространяется на меню);
— на открытой странице ссылка на нее же – активна, но не подчеркнута;
— все ссылки на другие ресурсы и на элементы каталога открываются в новом окне;
— в качестве ссылок лучше не использовать графику;
— текст кнопки и ссылки, открывающей новое окно или страницу, на которой от пользователя требуется совершение неких действий, заканчивается многоточием (например: «Изменить параметры…»);
— ссылки, обозначающие скрипт, работающий в данном окне – подчеркиваются не сплошной чертой, а пунктиром. Пример:
— элементы, похожие на ссылки, но не являющиеся таковыми, должны отличаться стилем от текста и ссылок (например, использование bold или italic).
— всем ссылкам меню, а так же всем главным интерфейсным элементам прописывается параметр title (всплывающая подсказка), текст которого отражает результат использования этих элементов;
— ссылок «Подробнее», или елочек, или многоточий с подчеркиванием, или «Читать дальше» — быть не должно. Название аннотации (заголовок) – уже является ссылкой на полное описание статьи;
—————————————————————
Приложение 1.
// PNG
function fixPNG(element)
{
//Если браузер IE версии 5.5-6
if (/MSIE (5\.5|6).+Win/.test(navigator.userAgent))
{
var src;
if (element.tagName==’IMG’) //Если текущий элемент картинка (тэг IMG)
{
if (/\.png$/.test(element.src)) //Если файл картинки имеет расширение PNG
{
src = element.src;
element.src=»/bitrix/templates/work/img/pixels/t_pixel.gif» mce_src=»/bitrix/templates/work/img/pixels/t_pixel.gif» ; //заменяем
изображение прозрачным gif-ом
}
}
else //иначе, если это не картинка а другой элемент
{
//если у элемента задана фоновая картинка,
то присваеваем значение свойства background-шmage переменной src
src = element.currentStyle.backgroundImage.match(/url\(«(.+\.png)»\)/i);
if (src)
{
src = src[1]; //берем из значения свойства
background-шmage только адрес картинки
element.runtimeStyle.backgroundImage=»none»; //убираем
фоновое изображение
}
}
//если, src не пуст, то нужно загрузить изображение
с помощью фильтра AlphaImageLoader
if (src) element.runtimeStyle.filter = «progid:DXImageTransform.Microsoft.AlphaImageLoader(src='» + src + «‘,sizingMethod=’scale’)»;
}
}
Приложение 2.
// FLASH
isIE = (navigator.appName == ‘Microsoft Internet Explorer’) ? 1 : 0;
function checkBackground(obj) {
if (isIE) {
obj.parentNode.style.background = »;
}
}