Как ненавистница горизонтальных полос прокрутки, я всегда интересуюсь дизайном макета, в котором размеры изменяются в соответствии с окном браузера. А как любительница удобства и доступности, я испытываю повышенный интерес к макетам, которые изменяют размер с изменением размера текста. Поэтому когда текучий (liquid/fluid) и эластичный (elastic) дизайн стали модными темами в области веб-дизайна в середине 2000-х, я экспериментировала с ними наряду с другими.

Что обнаружилось: 1) я все еще плохо разбираюсь в математике; 2) ленивый дизайнер во мне предпочитает "известные" параметры фиксированного дизайна; 3) хотя как эластичный, так и текучий дизайн двигались в правильном направлении, они имели свои ограничения.

• Без установки значений максимальной ширины (что не поддерживается в версиях до IE7) длинные строки в текучих макетах становятся нечитаемыми.
• Эластичный дизайн не изменяет размер, пока не изменится размер текста.  

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

Изобилие устройств

Годы спустя оказывается, что проблема не только в реакции на размер текста или окна браузера. Это относится ко всем устройствам. которые мы сегодня используем для доступа в Интернет: iPhone, Android, широкоэкранным дисплеям, нетбукам, планшетам, игровым устройствам … одного рынка мобильных устройств достаточно, чтобы веб-дизайнер, имеющий самые лучшие намерения, пал духом.

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

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

Реактивный (responsive) дизайн с медиа-запросами

В прошлом году Этан Маркотт (Ethan Marcotte) ввел понятие реактивного дизайна, при помощи которого создается сайт, использующий технологии, позволяющие сайту адаптироваться и реагировать на то, какое устройство визуализирует его. Реактивный дизайн подходит для всех устройств и отображается как часть единого впечатления от интерфейса. Цель состоит в создании дизайна для целостного впечатления, а не в отключении конструкций, предназначенных для других разрешений.

Как можно конструировать для создания единого впечатления? Медиа-запросы (Media query).

Появившиеся в спецификации CSS3, медиа-запросы предоставляют дизайнерам возможность изменять способ отображения их сайтов в разных разрешениях, будь это маленький BlackBerry или большой 24-дюймовый монитор, книжное или альбомное представление.

Цель не в том, чтобы сделать сайт выглядящим одинаково при всех видах просмотра, и не в том, чтобы предназначить его для конкретного устройства (как "сайт iPhone"). Вместо этого реактивный дизайн использует медиа-запросы, чтобы определить клиентское разрешение и настроить соответствующее заполнение экрана.

Краткий обзор синтаксиса

Если вы знаете CSS, то разобраться в использовании медиа-запросов будет не слишком трудно. Как правило, объявляется правило @media, которое задает, какие устройства и условия вы хотите указать:

@media screen and (max-width: 650px){ 
 }

Затем в правило @media вкладывается объявление правил стиля, указывающих, как будет изменяться отображение сайта, если запрос возвращает значение true:

@media screen and (max-width: 650px){ 
    body {background: #f90;}
}

Что главным образом говорит этот пример медиа-запроса? "Если устройство отображения представляет собой экран, и максимальная ширина браузера 650 пикселей, то цвет фона страницы следует изменить на оранжевый."

Медиа и свойства

Выше был приведен очень простой пример, медиа-запросы могут быть довольно сложными. Можно указывать разные медиа:

• all (все);
• handheld (наладонник);
• projection (проектор);
• screen (экран);
• tv (телевизор).

Можно также указывать разные свойства:

• высоту и ширину окна браузера;
• высоту и ширину окна устройства;
• ориентацию устройства;
• разрешение устройства;
• пропорции устройства;
• процесс сканирования для телевизионного типа медиа;
• число бит для цветного и монохромного отображения.

Расширенное тестирование

Медиа-запросы можно тестировать в простых и расширенных условиях. Например, можно выполнить тестирование для нескольких сценариев, используя ключевое слово "and":

@media screen and (min-width:480px) and (max-width: 960px){ 
 }

Если какие-то из объединенных условий не выполняются, то правило игнорируется.

Можно также выполнять тестирование, аналогичное запросу "or", разделяя условия запятой:

@media screen and (max-width: 750px), screen and (max-device-width: 480px), handheld and (max-width:480px) { 
}

Можно даже выполнять тестирование, которое будет игнорировать условие с использованием ключевого слова "not":

@media not screen and (color){ 
}

Или указывать конкретное условие с помощью ключевого слова "only":

@media only screen and (color){ 
}

Включение, ссылка и импорт

Все примеры в этой статье используют медиа-запросы, включенные непосредственно во внешний файл CSS. Это просто используемый подход, а не требование. Можно также применять медиа-запросы непосредственно в ссылках CSS:

<link rel="stylesheet" media="screen and (min-width:480px) and (max-width: 960px)" href="styles.css" />

Или написать XML:

<?xml-stylesheet rel="stylesheet" media="screen and (min-width:480px) and (max-width: 960px)" href="styles.css" ?>

Можно даже применять медиа-запросы в правилах @import:

@import url("styles.css") screen and (min-width:480px) and (max-width: 960px);

Во всех этих примерах файл styles.css запрашивается только в том случае, если тест медиа-запроса возвращает значение true.

Прекрасно работает на мобильных устройствах

Как я уже упоминал, медиа-запросы не проверяют наличие конкретного устройства (например наладонника iPhone или Android), они проверяют конкретные свойства устройства. Но не все устройства одинаковы.

Например, браузер Safari в iPhone имеет окно просмотра размером до 1000 пикселей, а другие браузеры для мобильных устройств могут иметь другие параметры по умолчанию. Это может привести к искажению в стилях, которые применяются в медиа-запросах. Поэтому, чтобы лучше указывать разрешение устройства, рекомендуемое каждым производителем, необходимо объединять медиа-запросы с помощью тега meta viewport:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

Вышеприведенный пример использует все доступные значения content, чтобы создать масштаб 1:1 с шириной окна просмотра устройства. Хотя это не гарантирует идеальное впечатление от просмотра, зато помогает гарантировать, что указывается оптимальная ширина для окна просмотра устройства.

Поддержка браузеров

Поддержка браузеров для медиа-запросов довольно хорошо работает для сегодняшних браузеров, включая браузеры для мобильных устройств. Все браузеры Safari, Chrome, Firefox, Opera, Opera Mini, Opera Mobile и Mobile WebKit поддерживают медиа-запросы.

Исключением, конечно, является IE, поддержка медиа-запросов в котором впервые появилась в выпуске IE9. Если вы не можете дождаться IE9, то могут помочь следующие альтернативные подходы:

• библиотека медиа-запросов CSS3
• matchMedia

Тестирование

При работе с медиа-запросами может появиться необходимость выполнить проверку того, как изменяется отображение с разрешением. Если у вас есть iPhone, проверьте на нем. Если у вас есть HTC Incredible, проверьте на нем. Если у вас есть огромный монитор, проверьте на нем. Понимаете? Для получения наилучших результатов всегда выполняйте тестирование на актуальном устройстве с актуальным разрешением.

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

Для проверки разрешения окна браузера просто измените его размер. Или, что даже лучше, воспользуйтесь подключаемым модулем, который изменит его размер за вас (таким как панель инструментов Web Developer). Это позволяет протестировать только уменьшение размера окна браузера, но это лишь начало.

Для имитации iPhone проверьте имитатор iPhoney или воспользуйтесь встроенным переключателем агента пользователя Safari. Для Android SDK предоставляет эмулятор.

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

Реальный реактивный дизайн

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

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

Что было раньше

Исходный дизайн моего сайта основывался на параметрах фиксированной ширины, оптимизированных для экрана в 1024 пикселя, с тремя плавающими колонками:

.wrap {
 padding: 30px 24px;
 margin: 0 auto;
 width: 960px;
 }
  
 section, aside {
 float: left;
 padding: 25px;
width: 248px;
}
 
section {
padding: 22px 30px 30px;
width: 568px;
}

Это означало, что я получала эти ужасные горизонтальные полосы прокрутки в браузерах, чье окно было меньше :

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

Адаптивный макет

К счастью, мой макет придерживался сетки, которую я мог использовать, чтобы решить, как задавать стили для разных разрешений. Макет, по умолчанию состоящий из 3 колонок, можно легко уменьшить до 2 или 1 колонки для маленьких представлений или увеличить до 4 колонок для больших экранов.

Эти четыре разных макета могут соответствовать четырем разным минимальным разрешениям:

• четыре колонки: 1200 пикселей;
• три колонки по умолчанию: 1024 пикселя;
• две колонки: 800 пикселей;
• одна колонка: 640 пикселей.

Эти значения ширины просто являются "спусковыми крючками" ширины окна просмотра, запускающими адаптацию макета сайта. Я выбрала их, в основном исходя из разрешений, которые видела удругихдизайнеров, и вы можете выбрать свои. Или сделайте все проще и воспользуйтесь крутым шаблоном медиа-запросов CSS3 Энди Кларка (Andy Clarke) или сеточной системой Less Framework.

Для своего сайта я объединил свои представления с рекомендациями этих ресурсов. Далее приводится фрагмент моего медиа-запроса для указания экранов с разрешениями, пригодными для двухколоночного макета:

@media screen and (max-width: 800px) {
     .wrap {
        padding: 25px 0;
         width: 750px;
     }
     
     section, aside {
         padding: 15px;
     }
    
    aside {
        margin:44px 10px 0 0;
        width: 240px;
    }
 
    section {
        width: 423px;
    }
 
}

И вот мой медиа-запрос для экранов с макетом в одну колонку:

@media screen and (max-width: 640px) {
     .wrap {
 padding: 60px 0 15px;
 width: 600px;
 }
  
     section, aside {
 padding: 15px;
 }
 
    section {
width:561px;
}
 
    aside {
width:250px;    
margin:10px 0 0;
}
}

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

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

Начальная реактивность

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

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

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

Что касается фото и изображений

Приведенные выше примеры фокусировались исключительно на изменениях макета. Однако я также изменила шрифты и изображения, чтобы они тоже хорошо отображались при разных разрешениях.

Например, в медиа-запрос, который вызывает двухколоночный макет, я включила стили для лучшего отображения текста на домашней странице:

@media screen and (max-width: 800px) {
     #home section[role="main"] h2 {
 margin: 45px 0 15px;
  line-height: 90%;
  }
   
     #home section[role="main"] h3, #home section[role="main"] > p {
  font-size: 17px;
  line-height: 100%;
}
 
#home section[role="main"] p {
line-height: 125%;
}
}

Кроме того, когда мой сайт отображается при низком разрешении экрана, изображения остаются в исходном размере, что вызывает проблемы с отображением:

Так что я воспользовалась еще одной подсказкой мистера Маркотта и сделал свои изображения текучими:

img {
 max-width: 100%;
 }

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

Хотя вы не обязаны исправлять изображения и оформление вместе с макетами, смысл в том, что это можно делать. Я рекомендую сначала сделать макет реактивным и освоить сами медиа-запросы. Затем по мере необходимости переходить к правке оформления, изображений и других элементов дизайна.

Оптимизация для мобильных устройств

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

@media only screen and (max-width: 320px) {
     .wrap {
 width: 90%;
 padding: 3% 5%;
 }
     
 section {
 padding: 5%;
 width: 90%;
margin: 0;
float: none;
}
 
    aside {
width: 90%;
padding: 5%;
float: none;
}
    
nav[role="navigation"] li {
float: none;
display: inline;
width: auto;
margin: 0;
}
    header h1 {
float: left;
margin: 0;
line-height: 90%;
}
    header h1 span {
display: block;
margin: 0;
}
}

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

Ключ — в контексте

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

• · скорость сети;
• · скорость обработки браузера для мобильных устройств;
• · расположение;
• · интерфейсы на основе сенсорной технологии.

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

• · минимизация навигации, включая ссылки "дополнительные сведения", которые увеличивают количество обращений к серверу;
• · минимизация таких стилей :hover как раскрывающиеся меню;
• · оптимизация областей :target для малых пространств и толстых пальцев пользователей.

Но иногда "мобилизация" сайта означает обслуживание другого контента для мобильных пользователей.

В некотором отношении могут помочь медиа-запросы, скрывая (с помощью display: none) контент для определенных разрешений. Я даже делала это в моем собственном сайте, удаляя контент, который в действительности не был важен для пользователей мобильных устройств, а также контент, который сильно зависел от действий :hover:

@media only screen and (max-width: 320px) {
      #project, #contact aside, #footer ul {
  display:none;
  }
  }

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

Знание — это полдела

Медиа-запросы относятся к очень простым в реализации технологиям. Их синтаксис прост, как в условной логике. И если вы знакомы с CSS, то остальное — лишь вопрос корпения над альтернативными стилями для запросов.

Но это только полдела. Реальная проблема заключается в принятии адаптивного дизайна; проектировать сайт с учетом полного взаимодействия с пользователем, а не только компьютерного браузера. И это не только дизайн CSS, но также визуальный и структурный дизайн (и даже планирование) сайта, который должен быть реактивным.

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

• Реактивное усовершенствование