Война браузеров в прошлом, но стало ли легче?

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

Джон Олсопп, «Дао веб-дизайна»

Ежедневно мы выходим в Интернет, причем делаем это с разных устройств и доля мобильных устройств с каждым днем становится больше. Чем не повод задуматься об оптимизации сайта?

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

Совсем недавно стихла война браузеров и тут пришла новая беда для web-разработчиков — ОГРОМНОЕ количество различных устройств, способных осуществлять выход в интернет. Такими темпами скоро чайники с утюгами будут читать ленты новостей и отправлять твиты о результатах своей трудовой деятельности. Всё это смешно до той поры пока не появится желание создать новый сайт или переделать существующий под адаптивную вёрстку.

Этан Маркотт, написавший книгу Responsive Web Design («Отзывчивый веб-дизайн»), в которой даётся описание трех основных составляющих адаптивного дизайна: гибкая сетка, гибкие изображения и Media Queries (стандарт CSS3, который позволяет определить различные правила CSS для определенных условий, например: разных разрешений, ориентации экрана, типа устройства). От себя добавлю, наверное самое главное условие - текст должен быть читабельным на любом любом устройстве и разрешении без использования зумов в браузере.

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

CSS3 Media Queries (медиа запросы)

Ключом к созданию адаптивных шаблонов является стандарт CSS media queries (W3C Recommendation 19 June 2012).

Media Queries — это часть спецификации CSS3, позволяющая уточнить область действия css-селектора. Представляет собой блок с указанием параметров устройства вывода, такие как тип (screen, 3d-glasses, print), ширина и высота окна браузера, разрешение, ориентация в пространстве. Спецификацию из первоисточника можно почитать по ссылке выше, если конечно дружите с английским, хотя там всё интуитивно понятно.

Простой пример. Допустим, необходимо применить особое оформление в случае, если ширина экрана устройства меньше или равна 480px:

@media screen and (max-device-width:480px) {
  /* Стили */
}

min-width:

Применяется, если ширина окна больше или равна ширине шаблона

max-width:

Применяется, если ширина окна меньше или равна ширине шаблона

min-device-width:

Применяется при ширине экрана устройства больше или равной ширине шаблона

max-device-width:

Применяется при ширине экрана устройства меньше или равной ширине шаблона

Следует знать, что width — это ширина окна браузера, а device-width — ширина экрана устройства. В обычных браузерах компьютеров и ноутбуков, width, как правило, меньше ширины экрана, однако на мобильных устройствах наоборот. Большинство мобильных браузеров используют «виртуальное окно», которое больше размеров экрана, что позволяет пользователю увеличивать и уменьшать масштаб изображения.

Есть тут ещё одно трудноуловимое различие. Дело в том, что min-width/max-width измеряется в пикселях CSS, в то время как min-device-width/max-device-width измеряется в пикселях устройства.

Когда страница увеличена до 100% на мобильном устройстве, то 1 CSS пиксель = 1 пикселю устройства. Однако если масштаб страницы уменьшен, тогда 1 CSS пиксель меньше 1 пикселя устройства. Ещё больше это усложняется наличием дисплеев высокой чёткости (Retina Display).

Осталось сказать, что ребята из Рэдмонда опять отличились со своей альтернативной реальностью. Internet Explorer 8 и более ранних версий не поддерживает CSS3 media queries. Для IE придется, как всегда, добавлять костыли в виде Javascript-файла css3-mediaqueries.js.

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

Адаптивный дизайн и типографика

Контент всегда стоит во главе угла, и его доступность и читабельность должны стать для вас основным приоритетом.

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

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

«Гибкие» изображения и видео (flexible images)

Наверное самое простое в адаптивном дизайне, это придание эластичности изображениям и видео. Элементу img достаточно прописать всего два свойства — max-width:100% и height:auto.

max-width:100% и height:auto работает в IE7, но не работает в IE8 (еще один странный баг). Для исправления нужно добавить width:auto\9 для IE8.

img {
   max-width: 100%;
   height: auto;
   width: auto9; /* ie8 */
}

Для видео применяем те же правила, что и для изображений. По непонятным причинам max-width:100% для видео не работает в Safari, необходимо использовать width:100%.

.video embed, .video object, .video iframe {
   width: 100%;
   height: auto;
}

Фреймворки и модульные сетки

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

Skeleton (www.getskeleton.com)

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

Bootstrap (http://twitter.github.io/bootstrap/)

Это интерфейсный набор инструментов для быстрой разработки веб-приложений. Включает в себя язык LESS, 12-ти колоночную адаптивную разметку, поддержку мобильных устройств, планшетов и мониторов, множество компонентов, кнопок, выпадающие меню, собственный стиль полей ввода, списков. Готовые встроенные стили заголовков, меток, иконок, табов, всплывающие подсказки, «карусель», различные Javascript-плагины да и еще куча всего.

На сайте можно собрать собственную облегченную версию bootstrap, но даже она будет достаточно тяжелой, на мой взгляд.

Эти два я лично опробовал на паре проектов, чтобы не повторять то, что уже есть в сети, лучше приведу ссылку на HABRAHABR - 30 CSS-фреймворков для адаптивного веб-дизайна.

Что дальше?

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

• Адаптивный словарь - термины и понятия в адаптивном дизайне.
• 50 инструментов для адаптивного дизайна
• Google Gomo - онлайн инструмент для создания мобильной версии сайта.
• Variable Grid System - бесплатный генератор адаптивной css-сетки.
• 5 Popular CSS Frameworks + Tutorials & Tools for Getting Started