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

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

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

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

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

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

Примечания

1. ↑ Первый сайт с динамично эластичным типом макета
2. ↑ Типы макетов, динамично эластичный тип макета

Ссылки

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

• Стандарты ISO 3166-1, ISO 3166-2  (рус.). Архивировано из первоисточника 23 ноября 2012. — Сайт стандартов ISO 3166-1, ISO 3166-2 (ISO — International Organization for Standardization).
• Демо-сайт DEE  (рус.). Архивировано из первоисточника 23 ноября 2012. — Демо сайт Динамично эластичного типа макета (DEE - dynamically expandable elastic).