Стратегии использования медиазапросов

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

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

- Гибкие параметры ширины. Дизайн с фиксированными параметрами ширины можно использовать для браузеров настольных компьютеров. Именно так годами и поступали дизайнеры, но для более узких экранов планшетных компьютеров и телефонов элементы с фиксированным дизайном не поместятся в окно. Страница шириной 960 пикселов будет слишком большой для имеющихся у телефонов 320 или 480 пикселов. Для телефонов и планшетных компьютеров более удачным подходом будет установка параметров ширины div-контейнеров с содержимым на Auto или на 100%. Эти установки превратят дизайн вашей страницы из фиксированного в свободный или гибкий. Иными словами, независимо от ширины экрана телефона, div-контейнеры поместятся на нем на все 100 %. Если человек держит iPhone в книжном режиме (при ширине экрана 320 пикселов), а затем быстро поворачивает телефон горизонтально (изменяя ширину экрана до значения 480 пикселов), div-контейнеры, настроенные на Auto или на 100% просто изменят свой размер, чтобы поместиться в новом пространстве.

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

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

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

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

- Скрытие содержимого на портативных устройствах. Многие разработчики скрывают содержимое в мобильных версиях сайтов. На мониторе настольного компьютера просмотр нескольких колонок и сотен строк текста дается довольно легко, а вот слишком много информации на телефоне может показаться совершенно излишним. CSS можно использовать для того, чтобы просто скрыть содержимое, которое, на ваш взгляд, не нужно показывать пользователям мобильных устройств, для чего требуется установить для CSS-свойства display значение none. Но все же нужно иметь в виду, что, скрывая содержимое, вы отстраняете посетителя от той информации, которая предоставляется на вашем сайте. Для тех, кто ранее посещал сайт, используя настольный компьютер, а теперь посещает его же с помощью телефона, будет крайне неприятно увидеть, что совсем недавно просматриваемая ими важная информация теперь куда-то исчезла. Кроме того, даже если мы скроем содержимое с помощью CSS, сам код HTML никуда не денется, заставляя мобильный телефон впустую тратить время и трафик на загрузку неиспользуемого HTML.

- Использование фонового изображения. Если поместить на экран 960-пиксельный баннер, то ни один телефон не покажет его без сжатия. Можно, конечно, предоставить достаточно небольшое изображение, способное поместиться на экране телефона, или же воспользоваться вместо него фоновыми изображениями CSS. Можно, например, создать div-контейнер и добавить к нему следующий класс: <div class="logo">. Затем в таблице стилей для браузера настольного компьютера установить ширину и высоту div-контейнера, соответствующую размеру большого логотипа, используя свойство background-image для вставки изображения в фон. Например:

.logo {

width: 960px;

height: 120px;

background-image: url(images/large_logo.png);

}

Затем можно поместить в эту таблицу стилей еще один стиль, используемый для мобильных телефонов, который изменяет размеры div-контейнера и использует другое фоновое изображение:

.logo {

width: 320px;

height: 60px;

background-image: url(images/small_logo.png)

}

- Создание контрольных точек. Медиазапросы позволяют отправлять браузерам различные стили на основе ширины экранов этих браузеров. Различные значения ширины, указываемые вами, — 480px, 769px и т. д. — в адаптивном дизайне часто называют контрольными точками (breakpoints). А с каких вообще значений нужно начинать разбивать дизайн на контрольные точки? Легче всего это определить, если взять готовый дизайн для настольного компьютера и открыть страницу в веб-браузере. Захватим щелчком кнопки мыши точку регулирования размера окна и медленно уменьшайте ширину окна. В определенный момент страница приобретет совершенно неприглядный вид. Например, станет тесно ее четырем колонкам. Точка, в которой дизайн теряет приемлемый внешний вид, становится хорошим кандидатом на контрольную точку, то есть этот размер вполне подходит для определения нового медиазапроса и для загрузки новых стилей, чтобы удалить одну или две колонки.

Нередко создаются три набора медиазапросов для трех различных контрольных точек — один для смартфонов, другой для планшетных компьютеров, а третий для настольных мониторов. Конкретные значения контрольных точек зависят от конкретного дизайна (а также от конкретного устройства), но чаще всего отправной точкой служит экран, имеющий ширину меньше 480 пикселов, который получает один набор стилей, экран шириной между 481 и 768 пикселами получает второй набор стилей, а все, что по ширине больше 768 пикселов, получает дизайн, предназначенный для настольных компьютеров. Но все это в конечном счете остается на усмотрение дизайнера. Некоторые дизайнеры допускают расширение зоны планшетных компьютеров до 1024 пикселов, а стили для настольных компьютеров начинают отправлять тем браузерам, чья ширина окна превышает 1024 пиксела.

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

Гибкие сетки

Не стоит поддаваться соблазну разработки раскладок с фиксированной шириной 320 пикселов, типичной для iPhone и некоторых телефонов с операционной системой Android, с шириной 720 пикселов для компьютеров как iPad в книжном (высоком) режиме работы и с шириной 1000 пикселов для мониторов настольных систем. Хотя устройства типа iPhone приобрели широкую популярность, на них свет клином не сошелся. Есть еще и телефоны с операционной системой Android, имеющие всевозможные формы и размеры, а стало быть, и ширину. Не стоит подвергать сомнению, что нам попадались и многие другие устройства с необычными размерами, да и планшетные устройства имеют весьма разнообразную ширину экрана. То есть универсальной ширины для смартфонов и планшетных устройств просто нет, поэтому лучше всего создавать страницы с гибкой шириной.

Основным компонентом адаптивного веб-дизайна являются гибкие сетки. Они — не что иное, как свободная разметка с непостоянной шириной, и при которой общая ширина страницы изменяется, чтобы страница могла поместиться на экранах разной ширины. В большинстве случаев это означает, что для ширины устанавливается значение 100 %. Но для дисплеев настольных систем, возможно, потребуется использовать свойство max-width, чтобы страница не становилась абсурдно широкой на больших мониторах настольных систем. Кроме того, процентная основа должна быть в дизайне и у отдельных колонок, заменяя собой единицы измерения в фиксированных пикселах или em. Отдельные колонки также должны становиться шире или уже, чтобы вписываться в изменяющуюся ширину страницы.

Например, предположим, что нужно создать дизайн на основе двух колонок, где первая колонка имеет ширину, равную одной трети ширины страницы, а вторая — равную двум третям ширины страницы. Можно начать с создания простого кода HTML (Листинг 1.2). Затем можно создать несколько CSS-стилей для создания свободной разметки (Листинг 1.3).

Первый стиль —.columns — устанавливает ширину div-контейнера, содержащего колонки. Задание для свойства width значения auto — это то же самое, что и установка для него значения 100%, поскольку свойство max-width будет сдерживать блок от приобретения слишком большой ширины. Второй стиль —.columns:after — помогает содержать две плавающие колонки. И наконец, последние два стиля просто устанавливают ширину двух div-контейнеров в 33 % (в ширину одной трети его контейнера) и в 67 % (две трети) и перемещают их влево, чтобы они появились рядом.