Создание веб страниц для различных разрешений монитора

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

Что такое разрешение экрана?

Помните ли Вы размер своего монитора? Скорее всего он имеет диагональ экрана от 15 до 21 дюйма.

Видимая область экрана не зависит от различных экранных разрешений, поддерживаемых монитором. "Разрешение" - это количество информации (пикселов), которое может отобразить монитор. Большинство мониторов могут работать с разрешением 640 х 480, 800 х 600 и 1024 х 768 пикселов. При большем разрешении отображается больше информации, чем при меньшем. Например, при разрешении 800 х 600 отображается 480,000 пикселов, а при разрешении 1024 х 768 - 786,432 пиксела.

Основываясь на этой информации, сделаем следующий вывод:

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

 Монитор А     Монитор B
 _ _ _ _ _ _   ___ ___ ___
|_|_|_|_|_|_| |   |   |   |
|_|_|_|_|_|_| |___|___|___|
|_|_|_|_|_|_| |   |   |   |
|_|_|_|_|_|_| |___|___|___|
|_|_|_|_|_|_| |   |   |   |
|_|_|_|_|_|_| |___|___|___|

Эти картинки представляют два монитора одного размера (с одинаковой видимой областью), работающие при разных разрешениях. Монитор А работает при большем разрешении, чем монитор В, и поэтому отображает большее число более маленьких пикселов.

Фиксированные таблицы против относительных

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

Чтобы это проиллюстрировать, рассмотрим такой пример. Если Вы создаете таблицу из четырех ячеек, каждая шириной в 100 пикселов, эта таблица будет фиксированной, так как заданы точные размеры. Ширина таблицы всегда будет равна 400 пикселов (4 х 100). Напротив, если создать таблицу из четырех ячеек, ширина которых будет равна 25% от общей ширины экрана, ширига таблицы в пикселах будет зависить от текущего разрешения экрана.

Например, если установлено разрешение 800 х 600, каждая ячейка таблицы будет иметь ширину 200 пикселов. Ширина всей таблицы будет равна 800 пикселам. Если ту же самую таблицу смотреть при разрешении 1024 х 768, то она будет шире. Каждая ячейка будет иметь ширину 256 пикселов, а ширина таблицы будет равна 1024 пиксела.

Каждый способ имеет свои преимущества и недостатки. С фиксированными таблицами проще работать, так как не придется беспокоиться об изменении размеров таблицы у разных посетителей страницы.

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

<Table Style="table-layout: fixed">

Главным недостатком использования фиксированных таблиц является неиспользование драгоценного пространства при высоких разрешениях экрана.

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

Текст: пикселы против пунктов

Как было сказано выше, пиксел является основной единицей измерения разрешения экрана. Поэтому, все, что имеет отношение к размеру монитора, считается в пикселах. Стандартной единицей измерения размера шрифта является "пункт". Изначально она использовалась в печати и не предназначалась для использования в Сети.

Когда Вы определяете размер текста в пунктах, компьютер должен преобразовать его в пикселы перед началом отображения на экране. К сожалению, преобразование между пикселами и пунктами не является универсальным. Это становится очевидным при создании страниц, предназначенных как для пользователей РС, так и для пользователей Макинтошей. Макинтоши используют меньший коэффициент преобразования пунктов в пикселы. Поэтому, текст, размер которого задан в пунктах, будет выглядеть меньше при просмотре на Макинтошах.

На какое разрешение ориентироваться?

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

Сейчас Вы возможно спросите: "На какое разрешение надо ориентироваться"? Ответ зависит от Вашей аудитории. Поисковые системы вроде  Yahoo! должны работать на как можно большем числе платформ, так как ими пользуется огромное количество пользователей сети. С другой стороны, при создании сайта для специфической группы пользователей, надо ориентироваться на ее технические возможности. Это конечно не означает, что Ваш сайт должно быть невозможно просмотреть при конфигурации отличной от той, под которую Вы его оптимизировали.

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