Динамично эластичный тип макета

Динамично эластичный тип макета (англ. dynamically expandable elastic) . Тип макета постоянных размеров и пропорций элементов страницы относительно окна обозревателя. Основным элементом вёрстки является тег DIV. Табличные теги так же могут применяться, но лишь как вспомогательный элемент, как контейнер для размещения множества однородных элементов страницы для упрощения их взаимного расположения.
Двойственность названия типа макета выраженная в применении синонимов динамично (динамичный) и эластичный, и связана со следующим.

• Эластичный (синоним в резиновый) означает его адаптивность, способность пропорционально изменять размеры в соответствии с размерами окна обозревателя независимо от разрешения монитора.
• Динамично (динамичный) в означает его способность изменять пропорциональность размеров элементов при масштабировании и/или изменении размера окна обозревателя курсором.

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

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

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

• Все размеры элементов страницы сайта имеют постоянное значение, выражаемое единицами измерения в EM (для выражения любого значения атрибута стиля размера элемента страницы).

Так же в некоторых случаях применяются единицы измерения в % (проценты) и PX (пиксели).

• Все размеры, относительные пропорции размеров как отдельно взятых элементов, так и всех элементов относительно друг друга постоянны и не зависят от:
  • разрешения экрана монитора,
  • размера и соотношения сторон экрана монитора.

Общий размер шаблона макета зависит только от размера окна обозревателя. Макет так же не масштабируется в окне обозревателя, так как он всегда «во весь экран» обозревателя.

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

Положительными сторонами макета является относительная простота создания макета страницы. Макет может создаваться «под любое разрешение» без оглядки на разрешение и размер монитора вообще. Кажущаяся сложность на самом деле является следствием стереотипа опыта применения размеров элементов абсолютными единицами измерения (PX, PT) при создании сайтов.

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

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

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

Фактически отрицательные стороны динамично эластичного типа макета заключаются в том что в данном типе макета невозможно применение тегов HTML, изначально по умолчанию, подразумевающих под единицами выражения размера абсолютную единицу измерения пиксель (PX). Например теги MAP, AREA использующие по умолчанию для координат областей ссылок на изображении только пиксель, что делает такие теги «не эластичными». При необходимости возможна реализация аналога этих тегов в виде группы элементов страницы, что не составит большого паллетного труда для опытного верстальщика. Так же непропорционально относительно иных элементов страницы могут выглядеть рекламные баннеры некоторых сервисов (Google) на мониторах с различным разрешением. Выводимые на страницу Javascript_ами изначально опирающимися так же на пиксель как на единицу измерения размера по умолчанию. Опять же при наличии достаточного опыта в написании скриптов данный недостаток может быть успешно ликвидирован верстальщиком проекта.

Эргономичность динамично эластичного макета

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

• Ширина монитора в сантиметрах, напрямую зависящая от диагонали монитора (видимый горизонтальный размер отображающей поверхности).
• Коэффициент эргономичного расстояния от глаз пользователя до плоскости отображения экрана монитора в пределах 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.

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

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

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

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

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