Макеты, созданные при помощи CSS доказали свою пригодность, доминируя на экранах от 800 до 1024 px. Однако, если использовать более широкий ряд устройств для доступа в сеть, нам понадобится более мощный и более гибкий механизм управления макетом страницы. Если мы хотим пользоваться устройствами с экранами от 240 до 1680 px и с разрешением от 72 до 150 px/дюйм, нам понадобится новый метод.

Проблема резиновой верстки или тянущегося макета

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

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

Switchy McLayout к спасению

Switchy McLayout позволяет вам определить размеры, плотность контента и вид этого контента на экранах различных размеров. Например, новый сайт должен иметь один макет для широких экранов, один для экранов среднего размера и еще один для КПК. Картинки могли бы уменьшаться и даже исчезать, в зависимости от размера экрана, колонки должны перемещаться, обеспечивая удобочитаемость, и все пространство экрана должно быть эффективно использовано

Этот пример использует технику Switchy McLayout. Для наглядной демонстрации мы определили семь размеров экрана, задав каждому из них свой макет, что позволяет эффективно использовать пространство каждого из экранов. Использование CSS в данных примерах является лишь демонстрацией возможностей данного метода.

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

Диапазон определенных переходов

Устройство	Размер экрана	Макет
PDA Вертикальная ориентация	< 240 px
PDA Горизонтальная ориентация	240-320 px
Set top / TV	320-640 px
Старые Электронно-Лучевые трубки	640-800 px
Обычный TFT монитор	800 - 1024 px
Широкий монитор	1024 - 1280 px
Суперширокий монитор	> 1280 px

Переключение классов

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

JavaScript, наш CSS помощник

Для того, чтобы определить фактический размер экрана пользователя и переключить класс элемента body, возьмем JavaScript. При помощи события onresize объекта window, мы получим размер экрана. Тернарный оператор выбирает соответствующий макет и имя класса и этот класс добавляется через DOM к классам, которые уже присутствуют в элементе body. Если JavaScript отключен, макет меняется обычным образом.

Примите во внимание, что различные браузеры используют различные модели событий (event models). IE6, например, вызывает событие onresize в реальном времени, в то время как Firefox, только в конце фактического изменения размера

Прогрессивное сжатие контента

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

Идем далее

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

В заключении

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

Благодарности и альтернативы

Хотя техника, представленная выше была разработана независимо, существуют достаточно подобных решений. Richard Rutter собирает подобные решения на сайте Clagnut, Kevin Hale представляет похожую технику с похожим эффектом, используя немного другие методы на сайте Particletree. Andy Clarke и James Edwards открыв Invasion of the Body Switchers помогли донести до широких масс, как использовать класс элемента body для смены макета

Источник alistapart.com

Перевод — Дмитрий Папуца

Оригинал статьи

Translated with the permission of A List Apart Magazine and the author[s].