Проектирование сайтов Web

Размеры страниц

Один из основных вопросов дизайна связан с подходящим размером страницы Web. Ширина страницы должна принимать в расчет ширину окна браузера, которая, в свою очередь, определяется разрешением экрана пользователя. Тремя распространенными вертикальными и горизонтальными разрешениями экрана являются 640 x 480, 800 x 600, и 1024 x 768 пикселей.

В настоящее время наиболее распространенным разрешением экрана является 800 x 600 пикселей. Если нет причин сделать по-другому - зная, например, что популяция предполагаемых посетителей использует другое разрешение, - то имеет смысл ориентировать страницы на экран с этим разрешением.

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

Задание горизонтальных размеров

Браузер переносит по словам текст на странице, так что он всегда остается в пределах полей страницы. Однако другие элементы страницы - такие, как графические или текстовые контейнеры, которые имеют фиксированные размеры, - могут не укладываться в эти границы. При этом возникает проблема горизонтальной полосы прокрутки в окне браузера, присутствие которой нежелательно на любой странице Web. Трудно найти что-то более раздражающее или непродуктивное, чем постоянное прокручивание страницы Web туда и обратно, чтобы просмотреть содержимое.

Следующее окно браузера иллюстрирует проблему и решение. Первый затененный раздел имеет заданную ширину в 760 пикселей, подходящую для разрешения экрана 800 x 600. Однако при выводе в браузере на экране 640 x 480 раздел выходит за поля страницы и создает горизонтальную полосу прокрутки для просмотра его на всю ширину.

Рис. 12.6. Управление шириной страницы

Лучшим решением для задания размеров блоков текста является использование измерений в процентах, как делается во втором разделе. Показанная здесь ширина равна 100%. Поэтому раздел будет расширяться только до ширины полей страницы, независимо от разрешения экрана.

При выводе графических изображений задание горизонтального размера немного сложнее, так как настройка ширины может искажать картинку или вызывать пикселизацию, когда изображение увеличивается до ширины, которая больше исходного размера. Всегда лучше задавать размер самого изображения, чем подстраивать его с помощью задания стилей. Выберите размер, который умещается в окне 600 x 400, чтобы гарантировать, что оно правильно будет помещаться в любом другом окне браузера.

Задание вертикальных размеров

Очевидно, что не слишком много можно сделать в отношении вертикальных размеров страниц Web. Они расширяются, чтобы охватить весь объем контента. Конечно, всегда можно разделить содержимое на отдельные, более короткие страницы со ссылками между ними. Компромисс состоит в использовании вертикальной прокрутки или щелканья по ссылкам, но ни один из этих способов не имеет определенного преимущества с точки зрения удобства пользователей.

Мифология дизайна

Можно встретить руководства по проектированию страниц, которые рекомендуют использовать страницы без прокрутки во всех случаях - все страницы должны умещаться в окне браузера даже без вертикальной прокрутки. Такая рекомендация не только создает для дизайнера трудности с поиском физических разрывов страницы там, где они могут логически не существовать, но создает избыточное количество переходов по ссылкам, что может разорвать поток мысли читателя. Лучше никогда не позволять физическим контейнерам определять структуру их содержимого. С помощью здравого смысла всегда можно определить наилучшее распределение информации.

Организация страницы

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

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

- общую идентификацию - баннер, логотип и/или заголовки - чтобы связать страницу визуально с другими страницами сайта;

- наиболее важную информацию на странице или сводку, возможно, со ссылками вниз на разделы страницы с подробной информацией;

- общее меню ссылок на другие важные разделы сайта;

- меню ссылок, имеющих отношение к контенту страницы.

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