Отзывчивый или Адаптивный веб-дизайн (Responsive Web Design)

Отзывчивый или Адаптивный веб-дизайн (Responsive Web Design) Перевод замечательной статьи Итана Маркотта "Responsive Web Design" на alistapart.com про отзывчивый (адаптивный) к браузерам веб-дизайн, в которой Итан объясняет как используя отзывчивый веб-дизайн, приспособить тянущийся макет дизайна, растягивающиеся картинки и media queries, чтобы создать элегантный вид сайта для всех пользователей и браузеров.

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

Джон Оллсопп, "Дао веб-дизайна"
 
Английский архитектор Кристофер Врен однажды заметил, что выбранное им поле деятельности "нацелено на вечность", и в этом вызказывании есть нечто притягательное: в отличие от веба, в котором часто ощущается нацеленность на следующую неделю, архитектура – это дисциплина, в большей мере определяемая своим постоянством. Фундамент здания определяет его опорную поверхность, которая определяет несущие конструкции, а они в свою очередь формируют очертания фасада. Каждая фаза архитектурного процесса более постоянна, более неизменна, чем предыдущая. Творческие решения в точности воплощаются в физическом пространстве, определяя способ, которым люди преодолевают ограничения пространства на протяжении десятилетий или даже веков.
 
Работа в веб-пространстве – совсем иное дело. Наша работа определяется быстротечностью его преобразований, весомые улучшения и изменения случаются за год или два. Несовместимые ширины окон, разрешения экранов, предпочтения пользователей, и установленные пользовательские шрифты, это только несколько неуловимых вещей, к которым мы приспосабливаемся, когда выкладываем свою работу, и с годами мы крайне поднаторели в этом.
 
Но положение вещей смещается, возможно быстрее, чем нам бы хотелось. Мобильные браузеры, по прогнозам опередят настольных собратьев не далее чем, через 3-5 лет. Две из трёх лидирующих видеоигр имеют веб браузер (и один из них совешенно великолепен). Мы проектируем для мышей и клавиатур, для режима ввода Т9, для ручных игровых контроллеров, для интерфейсов реагирующих на касания. Короче, сейчас мы столкнулись с великим множеством устройств, режимов ввода и браузеров, чем когда либо ранее.
 
В последние годы, я работал с компаниями, которые всё чаще просили сделать версию сайта "для iPhone" как часть их проекта. Интересная фраза: на первый взгляд, конечно, это относится к свойству мобильного WebKit как браузера, а также мощное доказательство стремлений бизнес услуг выйти за пределы десктопов. Но как дизайнеры, думаю, мы зачастую способны находить комфорт в таких чётких требованиях, так как они позволяют нам разбить на части проблемы, встающие перед нами. Мы можем вынести случаи с версиями для мобильных устройств на отдельные субдомены, лежащие отдельно от "неайфоновских" сайтов. Но что дальше? Сайт для iPad? Для N90? Можем ли мы и дальше поддерживать каждое новое пользовательское устройство с его исключениями? В какой-то момент, начинаем чувствовать, что это игра без выигрышей и побед. Но как мы и наши разработки можем адаптироваться?
 

"Резиновая" (тянущаяся) основа.

Давайте рассмотрим для примера такой макет дизайна. Я создал простую страницу гипотетического магазина: это простой двухколоночный макет, сделанный в резиновой (тянущейся) вёрстке и в котором добавлено несколько растягивающихся изображений. Как давний сторонник нефиксированных макетов дизайна, я давно чувствовал, что они более обещающие на будущее, только потому что они были не зависимы от плана макета. И в определённой степени это верно: тянущиеся макеты никак не ориентируются на ширину окна браузера, и прекрасно адаптируются к устройствам как с горизонтальной, так и с вертикальной ориентацией.
 
пример растягивающийся макет дизайна сайта
Огромные картинки остаются огромными. Наш макет, хотя и тянется, но не отвечает как следует на изменения разрешения или размеры устройства, в котором отображается.
 
Но ни какой макет, будь то фиксированный или тянущийся, не масштабируется плавно под контекст, для которого он изначально предназначался. Макет в нашем примере, прекрасно выглядит, когда мы растягиваем окно браузера, но на малых разрешениях (узкая ширина окна) начинают выявляться некрасивости. Когда мы просматриваем его на разрешении меньше, чем 800x600, иллюстрация в логотипе, начинает обрезаться, текст в пунктах меню может переноситься неожиданным способом, а картинки внизу становятся слишком мелкими, чтобы различить, что на них изображено. И это происходит не только в случае уменьшения разрешения: если просматривать дизайн на очень широком экране, то картинки вырастают до громоздких размеров, задавливая собой окружающий текст (товарищ, Вас слишком много!).
 
В общем, наш тянущийся дизайн работает достаточно хорошо в десктопном центрированном контексте, для которого он и был задуман, но не оптимизирован на случаи, выходящие за рамки десктопных браузеров.
 

Добавляем отзывчивость (адаптивность).

В последнее время, появившаяся дисциплина, названная "отзывчивая архитектура", начала задаваться вопросом, как физические пространства могут отзываться на присутствие людей, находящихся в их близи? С помощью комбинации внедрённой робототехники и эластичных материалов, архитекторы экспериментируют с искусственными инсталляциями и стенными структурами, которые гнутся, растягиваются и расширяются в ответ на приближение людей. Датчики движения могут быть соединены с системами климат-контроля, чтобы поддерживать температуру в помещении и менять освещение, когда помещение наполняется людьми. Компании уже выпустили технологию "умного стекла", которое может автоматически становиться непрозрачным, когда в комнате достигается определённая концентрация людей, и таким образом обеспечивая им дополнительное ощущение личного пространства.
 
В своей книге "Интерактивная архитектура", Майкл Фокс и Майлс Кемп описали этот более адаптивный подход как "многосвязанную систему, в которой каждый участвует в беседе; продолжительный и созидательный обмен информацией". Подчеркну крайнюю значимость отличия: вместо создания неменяющихся пространств, которые определяют частный случай, они предлагают структуру, где живое и неживое может и должно взаимодействовать друг с другом.
 
И это наш случай. Вместо приспосабливания отдельных дизайнов для каждого их всё возрастающего числа устройств, мы можем рассматривать их как грани одного и того же случая. Мы можем проектировать дизайн для случая оптимального экрана, но внедрить технологии, которые не только добавят дизайнам растяжимость, но и адаптируют их к среде, которая их отображает. То есть, нам нужно осуществить отзывчивый веб-дизайн. Но как?
 

Знакомимся с "запросами к среде" (media query).

Со времён CSS 2.1, наши списки стилей (они же таблицы стилей) обрели некоторые возможности опознавания устройств посредством типов запросов (media types). Если вы когда-нибудь писали список стилей для печати, то вы уже сталкивались с такими понятиями, как:
<link rel="stylesheet" type="text/css" href="core.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
В надежде, что мы планируем создать что-то большее, чем просто вид страницы для её печати, CSS-спецификация обеспечила нас рядом допустимых типов запросов (media types), каждый из которых направлен на определённый класс устройств. Но большинство браузеров и устройств никогда в действительности не охватывали все эти спецификации, оставляя многие из запросов внедрёнными неполностью, или вовсе их игнорируя.
 
К счастью, консорциум W3C ввёл медиа-запросы (запросы к средам, media запросы) как часть CSS3-спецификации, ориентируясь на перспективу media-запросов в будущем. Запрос к среде позволяет нам не просто определить классы устройств, на которых будет показываться наш разработанный дизайн, но также и физические характеристики этих устройств. Например, следуя недавнему подъёму мобильного WebKit'а, медиа-запросы стали популярной техникой на стороне клиента для доставления подстроенной таблицы стилей для iPhone, Android и им подобных. Чтобы это сделать, мы можем добавить запрос в соответствующий атрибут "media" нашей таблицы стилей:
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" />
Запрос содержит 2 компонента:
  1. тип медиа (screen)
  2. соответствующий запрос заключённый в скобки, содержащий определённую медиа-особенность (max-device-width), которую хотим проверить, с указанием конечного значения (480px).
Говоря простым русским, мы спрашиваем у устройства о его горизонтальном разрешении (max-device-width), не выходит ли оно за рамки 480px. Если наша проверка успешна, то есть, если мы имеем случай устройства с маленьким экраном, как iPhone – тогда устройство загрузит shetland.css. Иначе, этот метатег будет проигнорирован вовсе.
 
Дизайнеры экспериментировали с макетами для разных разрешений и прежде, главным образом опираясь на JavaScript решения, подобные прекрасному скрипту от Cameron Adams. Но медиа-запросы предоставляют ряд медиа функций, которые выходят далеко за рамки только экранных разрешений, предоставляя широкий диапазон того, что мы можем проверить нашими запросами. И что ещё важно, вы можете проверять сразу  несколько свойств одним запросом, перечисляя их цепочкой друг за другом через слово "and":
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and (resolution: 163dpi)" href="shetland.css" />
 
Кроме того, мы не обязаны включать все запросы в метатеги <links ...>, а можем включить их в наш CSS файл, как часть правила @media:
@media screen and (max-device-width: 480px) {
  .column {
    float: none;
  }
}
Или как часть директивы @import:
@import url("shetland.css") screen and (max-device-width: 480px);
В каждом случае результат будет одинаков: если устройство проходит проверку, запрашиваемую нашим media-запросом, то соответстующие CSS применяются к нашей разметке. Media-запросы для остальных, кто проверку не проходит, остаются условными комментариями. Вместо того, чтобы нацелиться на конкретную версию конкретного браузера, мы можем "хирургически" поправить пункты нашего макета, чтобы он увеличил свой охват, и вышел за рамки первоначального, идеального разрешения.
 

Адаптировался, отозвался и победил.

Давайте обратим наше внимание на картинки, присутствующие на странице. В макете по-умолчанию, соответствующие им стили выглядят так:

.figure {
  float: left;
  margin: 0 3.317535545023696682% 1.5em 0;   /* 21px / 633px */
  width: 31.121642969984202211%;             /* 197px / 633px */
}

li#f-mycroft,
li#f-winter {
  margin-right: 0;
}

Я опустил несколько стилей для типографического оформления, чтобы сфокусироваться на макете: Каждый элемент класса .figure имеет размер, грубо составляющий одну треть пространства основной колонки, и два элемента (li#f-mycroft, li#f-winter) имеют нулевые правые поля. И это неплохо работает, но только до того момента, пока экран не становится суженым или растянутым слишком за пределы стандартных размеров экрана. С помощью media-запросов, мы можем применить специальные настройки, адаптирующие наш дизайн более красивому виду в зависимости от изменений экрана.

Первым делом, давайте вытянем нашу страницу по вертикали (расположим блок под блоком) для случая, когда окно браузера уменьшается меньше порогового значения, скажем, 600px. Для этого допишем вниз нашей таблицы стилей ещё один блок @media, например, так:

@media screen and (max-width: 600px) {
  .mast,
  .intro,
  .main,
  .footer {
    float: none;
    width: auto;
  }
}

Если теперь вы откроете нашу обновлённую страницу в браузере современного компьютера и будете уменьшать размер экрана меньше 600px, то media запросы отключат свойство float для главных блоков макета, располагая каждый блок друг под друга. Так наш миниатюрный дизайн примет красивые очертания, но изображения по-прежнему не будут масштабироваться столь разумно (они слишком миниатюрны становятся). Если мы допишем ещё один media запрос, мы сможем изменять их поведение соответственно:

@media screen and (max-width: 400px) {
  .figure,
  li#f-mycroft {
    margin-right: 3.317535545023696682%;    /* 21px / 633px */
    width: 48.341232227488151658%;          /* 306px / 633px */
  }

  li#f-watson,
  li#f-moriarty {
    margin-right: 0;
  }
}

отзывчивый веб-дизайнНе обращайте внимания на неприглядные цифры процентов; мы просто пересчитываем значения ширин в растягивающемся шаблоне под новый вытянутый вертикально макет. Проще говоря, мы переходим от трёх-колоночного макета к двух-колоночному, в случае, когда ширина уменьшается до 400px и ниже, делая изображения более броскими, более выделяющимися.

Мы можем применить этот же подход для случая широкоэкранных дисплеев. Для этого случая мы вытянем все изображения в одну линию, расположив все 6 картинок в строку:

@media screen and (min-width: 1300px) {
  .figure,
  li#f-mycroft {
    margin-right: 3.317535545023696682%;    /* 21px / 633px */
    width: 13.902053712480252764%;          /* 88px / 633px */
  }
}

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

адаптивный веб-дизайн

Устанавливая min-width в дополнительном запросе @media, мы можем расположить наши изображения в одну строку макета.

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

responsive web design по-русски

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

Несколько технических замечаний.

Следует отметить, что media запросы прекрасно поддерживаются современными браузерами. Десктопные браузеры, такие как Safari 3+, Chrome, Firefox 3.5+, Opera 7+, разбирают media запросы, и так же дело обстоит с последними мобильными браузерами, например, Opera Mobile и мобильный WebKit. Конечно, более старые версии браузеров не поддерживают media запросы. И хотя Microsoft ввели поддержку media запросов в IE9, текущая версия Internet Explorer не имеет родной поддержки media queries.

Однако, если вы заинтересованы, чтобы устаревшие версии поддерживали запросы media, есть решения на основе JavaScript:

  • jQuery плагин 2007-го года, предлагает ограниченные возможности media запросов, только медиа свойства min-width и max-width, которые устанавливаются для отдельных link элементов.
  • Недавно выпущен css3-mediaqueries.js, библиотека, которая обещает "научить IE 5+, Firefox 1+ и Safari 2 работать с CSS3 media запросами", будучи подключёнными посредством @media блоков. С самой первой версии мне эта библиотека показалась удачной, и планирую следить за её развитием.

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

 

Путь вперёд.

Плавающие разметка, тянущиеся изображения и media запросы – 3 технических составлящих отзывчивого веб-дизайна, но это требует другого способа мышления. Вместо того, чтобы подстраивать наш контент к отдельным устройствам, мы можем использовать media запросы, чтобы улучшить отображение нашей работы на разных устройствах. Это не означает, что не имеет смысла делать отдельные версии сайта для разных устройств; например, когда пользователь заходит на мобильную версию сайта и она ограничена в разрешении по сравнению с десктопной версией, то обеспечение разного содержимого для этих разных версий может быть лучшим решением.

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

 

Автор  оригинальной статьи – Ethan Marcotte

Переведено с разрешений A List Apart Magazine и автора.

almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.

Вы можете почитать все статьи от almix'а.



Другие статьи по этой теме:

Комментарии (1)     Подпишитесь на RSS комментариев к этой статье.

1 комментарий

#1353
Stepa говорит:
April 10, 2015 at 01:32 pm
Спасибо за перевод) Как раз просматривал статью в оригинале наткнулся на ваш перевод)

Leave a Comment

Fields with * are required.

Картинка с кодом валидации
Пожалуйста введите символы с картинки. Регистр букв неважен.