Горизонтальная прокрутка в окне шириной 640

Штрафной балл: 0.1–0.5

Рекомендации

Штраф для небольшой горизонтальной прокрутки (менее 1/8 ширины окна) на одной странице — 0.1.

Штраф значительной горизонтальной прокрутки (более 1/3 ширины окна) на большей части страниц — 0.5.

Для других случаев проверяющий выбирает промежуточный штраф из диапазона 0.1–0.5.

Число пользователей, которые смотрят Интернет через монитор шириной 640 пикселов, конечно, невелико.

Но многие открывают приложение (в том числе и браузер) не на полный экран, а в окне гораздо меньшего размера (шириной примерно в 640 пикселов).

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

Разрушение единого информационного элемента при изменении размера окна браузера (например, заголовка, навигационной панели, группы управляющих кнопок)

Штрафной балл: 0.1

У Сидорова на экране сайт выглядел вполне прилично (рис. 7.3):

Рис 7.3. Страница сайта в широком окне

Когда Мячиков посмотрел на сайт в окне меньшей ширины, то увидел неприглядную картину (рис. 7.4):

Рис 7.4. Страница сайта в узком окне

Чтобы элементы, задуманные как единое целое, не распадались на отдельные фрагменты при изменении размера окна, нужно использовать тег NOBR или неразрывный пробел  .

Постоянные элементы страниц (заголовки, меню, логотип и т.П.) плохо держат свое место на экране при переходах со страницы на страницу

Штрафной балл: 0.1

К постоянным элементам относятся в первую очередь:

• логотип;

• заголовок сайта;

• навигационные меню.

Лишние сдвиги на экране утомляют глаза пользователя.

Необоснованные сдвиги создают ощущение беспорядка.

И главное, постоянные элементы играют роль интерфейсных линеек, обрамляющих рабочее окно, поэтому их смещение воспринимается как явная погрешность разработчика.

Пример этой ошибки демонстрируется на рис. 7.5

Рис 7.5. Постоянные элементы плохо держат своё место

Вертикальное меню сместилось вниз и вправо. Заголовок сайта и горизонтальное меню сместились вниз, при этом расстояние между заголовком и меню увеличилось.

Прижатость элементов друг к другу

Штрафной балл: 0.1

Одна из распространенных ошибок начинающих — «удушение» информационных элементов на экране путем слишком тесного их расположения.

Практическая рекомендация: оставляйте между текстом и картинкой, текстом и табличными гранями по 10 пикселов.

Таблица

Пример из конкурсной работы:

Это мы!	Рассказ о нашей команде.
Cоветы	Ермиков Федор предлагает воспользоваться кратким справочником, который был составлен по учебнику HTML-конструирование.
Полезные ссылки	Их немного, но они нам помогают.
Афоризмы	Личная страничка Скляровой Насти.
Фразмочки	Работа Горошковой Елены.

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

Промежуток легко образуется, если задать нужные значения атрибутам cellspacing и cellpadding в теге TABLE. (Атрибут cellspacing задаёт расстояние между ячейками таблицы, атрибут cellpadding — расстояние между содержимым ячейки и рамкой ячейки.)

Для образования полей вокруг элемента, помещенного в ячейку, таблицу можно кодировать, например, так:

<TABLE cellspacing=0 cellpadding=10 другие атрибуты>

Это мы!	Рассказ о нашей команде.
Cоветы	Ермиков Федор предлагает воспользоваться кратким справочником, который был составлен по учебнику HTML-конструирование.
Полезные ссылки	Их немного, но они нам помогают.
Афоризмы	Личная страничка Скляровой Насти.
Фразмочки	Работа Горошковой Елены.

Замечание. Всегда явно задавайте в таблице значения атрибутов cellspacing и cellpadding. Если они будут опущены, браузер установит значения по умолчанию, причем умолчания у разных браузеров свои. Не следует доверять браузеру делать такие вещи по своему усмотрению.