Фиксированный тип макета

Фиксированный тип макета (англ. rigid fixed) . Тип макета постоянных размеров и пропорций элементов страницы относительно разрешения монитора. Как правило для макета используется табличная вёрстка, но может так же применяться как чисто div, так смешанное применение этих тегов в шаблоне страницы. В большинстве случаев как правило применяется именно смешанная вёрстка, что собственно зависит только от предпочтений верстальщика шаблона страницы.

Основные признаки

Основное отличие фиксированного типа макета ото всех остальных заключается в следующем:

• Все размеры элементов страницы сайта имеют постоянное значение, выражаемое единицами измерения в пиксель (PX) (для выражения любого значения размера элемента страницы) и пункт PT (1 пункт равен 1/72 дюйма) (только для шрифтов). Так же в некоторых случаях к размерам применяется единица измерения в % (проценты), или иные редко используемые единицы выражения размера элементов.
• Все размеры, относительные пропорции размеров, как отдельно взятых элементов, так и всех элементов относительно друг друга постоянны и не зависят от:
  • разрешения экрана монитора,
  • размера экрана монитора,
  • соотношения сторон экрана монитора,
  • размеров окна обозревателя,

От разрешения монитора и масштаба окна обозревателя зависит только общий размер шаблона страницы фиксированного типа макета.

Примеры применения макета

Типичные представители сайтов с Фиксированным типом макета.

Скриншоты главных страниц сайтов при разрешении по горизонтали в 1024px: apple.com и ucoz.ru

• Www apple com screenshot.jpg

  Полный скриншот страницы сайта apple.com при горизонтальном разрешении монитора - 1024px.

• Www ucoz ru screenshot.jpg

  Полный скриншот страницы сайта ucoz.ru при горизонтальном разрешении монитора - 1024px.

Положительные стороны макета

Положительными сторонами макета является простота создания макета страницы. Фиксированные размеры элементов и фиксированное положение элементов страницы сайта относительно друг друга, позволяют создавать макет буквально без оглядки на размеры и разрешение монитора в режиме ofline. Как правило фиксированный тип макета, выглядит эргономично и визуально целостно в узком диапазоне разрешений экрана монитора относительно значения ширины макета, выраженного в пикселях. Значение разрешения монитора в процентном выражении к ширине макета, при котором макет выглядит и воспринимается более менее комфортно находится в пределах: 100 % в 150 % от значения ширины макета страницы. C большой паллетный долей уверенности, в зависимости от сложности вёрстки, что макет перенесённый на реальный сайт будет выглядеть именно так как и создавался в редакторе HTML. Как правило фиксированный тип макета не вызывает больших паллетных затруднений в процессе создания, независимо от типа вёрстки, как при табличной на основе тегов таблиц, как при div вёрстке, так и при смешанном варианте.

Отрицательные стороны макета

При значительной разнице между разрешением монитора и шириной макета страницы (от 150 % и более), для эргономичного восприятия страницы сайта потребуется масштабирование окна обозревателя. Или для случая когда ширина макета превышает разрешение монитора, так же потребуется масштабирование окна или управление появившимся в окне горизонтальным скроллбаром для перемещения по горизонтали отображаемой страницы сайта.

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

С каждым годом этот недостаток усугубляется в связи с расширением линейки разрешений и размеров мониторов в сторону увеличения и с появлением сайтов со значениями ширины страницы в диапазоне: 1280px в 1600px. Фактически разница между узким и широким фиксированным макетом в разных случаях доходит до 2 раз. Вследствие всего вышеперечисленного, с учётом определения юзабилити, этот тип макета нельзя считать эргономичным.

Отображение макета на мониторах с различным разрешением

• Disp apple 1024.jpg

  Скриншот в„– 1 - страницы сайта apple.com при горизонтальном разрешении монитора - 1024px.

• Disp apple 2048.jpg

  Скриншот в„– 2 - страницы сайта apple.com при горизонтальном разрешении монитора - 2048px.

• Disp ucoz 1024.jpg

  Скриншот в„– 3 - страницы сайта ucoz.ru при горизонтальном разрешении монитора - 1024px.

• Disp ucoz 2048.jpg

  Скриншот в„– 4 - страницы сайта ucoz.ru при горизонтальном разрешении монитора - 2048px.

Скриншоты в„– 1 и в„– 3 при равных по значению, ширине макета и разрешения экрана монитора фактически занимают всю полезную площадь поверхности отображения экрана монитора.

Скриншот в„– 2 в отображаемая страница фактически занимает только 30 % площади.

Скриншот в„– 4 в отображаемая страница фактически занимает всю площадь, но отображаемое содержимое страницы, ограниченное фиксированным значением ширины, занимает только 50 % площади поверхности отображения экрана монитора.

Аспект неэргономичности макета

Для обоснования используем теорему косинусов, на основании имеющихся таких исходных данных как:

• Ширина монитора в сантиметрах, напрямую зависящая от диагонали монитора (видимый горизонтальный размер отображающей поверхности).
• Коэффициент эргономичного расстояния от глаз пользователя до плоскости отображения экрана монитора в пределах 1.5 в 2 (из различных источников).
• Разрешение экрана монитора.
• Перпендикуляр падения взгляда пользователя на монитор при виде сверху равный 90 градусам.

Графическая модель используемая в расчётах (вид сверху) и условные обозначения использованные в графической модели.

графическая модель расчёта

• P в точка положения пользователя, глаз пользователя.
• b в расстояние от пользователя до монитора, равное произведению значения диагонали монитора на коэффициент эргономичности.
• С в угол падения взгляда пользователя на экран монитора, равен 90 градусам.
• M в плоскость отображения экрана монитора.
• W в ширина монитора по горизонтали в сантиметрах.
• a в значение 50 % отображаемой ширины макета.
• A в искомое значение угла.
• E в угловой размер плоскости отображения монитора равное двойному значению угла A.

Для получения сравнительных результатов использованы исходные данные размеров и разрешения по умолчанию мониторов с диагональю 17" и 21" с классическим соотношением сторон 4:3.

Разрешение по умолчанию для мониторов:

• 17" в 1024px.
• 21" в 2048px.

Значение ширины отображающих поверхностей мониторов 17" и 21":

• 17" в ширина 32cm.
• 21" в ширина 40cm.

Значение отображаемой ширины макета (1024px) на экранах мониторов 17" и 21":

• 17" в ширина 32cm.
• 21" в ширина 20cm. (при разрешении 2048px и ширине макета 1024px равно 50 % значения ширины поверхности отображения монитора)

Эргономичное расстояние от поверхности монитора до глаз пользователя как произведение коэффициента эргономичности на значение размера диагонали отображающей поверхности монитора (для коэффициента в 1.5/для коэффициента в 2):

• 17" в диагональ 40cm. Эргономичные расстояния до монитора в 60cm/80cm.
• 21" в диагональ 50cm. Эргономичные расстояния до монитора в 75cm/100cm.

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

Размер диагонали монитора (дюймы)	17"	17"	21"	21"
Коэффициент эргономичности	1.5	2	1.5	2
Эргономичное расстояние (сантиметры)	60	80	75	100
Угловой размер отображения макета (градусы)	29.8	22.6	15.0	11.4

Как следует из результатов вычислений, угловой размер отображения макета фиксированного типа, на мониторе большего размера с большим разрешением по горизонтали намного меньше. При равных значениях коэффициента для обоих мониторов, это значение для большого паллетного монитора почти в 2 раза меньше чем для маленького монитора (значения 29.8 и 15.0) (значения 22.6 и 11.4). Визуально это воспринимается как меньшее в 2 раза по размеру изображение. Естественно что при таких значениях на большом мониторе содержимое страницы, а именно текст будет практически нераспознаваем. Для адекватного отображения потребуется изменение масштаба отображения окна обозревателя. Что с точки зрения юзабилити является негативным фактором.