Что такое адаптивный дизайн?

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

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

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

Примечание редактора. Ниже приведено введение в адаптивный дизайн для начинающих, не предназначенное для более опытных веб-дизайнеров.

Основные компоненты адаптивного дизайна

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

Гибкие сетки

Гибкие сетки — это в основном темы и шаблоны, в которых элементы дизайна задаются в процентах, а не в пикселях. С процентами в качестве единицы измерения это означает, что элемент, созданный на 50%, всегда будет занимать половину экрана, независимо от того, насколько большой или маленький экран.

Гибкие изображения

По своей сути, гибкие изображения очень легко создать, написав простое правило, которое гласит:

 img { max-width: 100%; }

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

Медиа-запрос

С момента появления Media Types в CSS 2.1 таблицы стилей стали гораздо более удобными для мобильных и других устройств. Типы мультимедиа, по сути, позволяют настраивать стили для определенных классов веб-устройств, включая портативные устройства, экраны и телевизоры. Но из-за слабой стандартизации между устройствами и слабой поддержки со стороны производителей устройств типы носителей так и не реализовали свой потенциал.

Медиа-запросы соответствуют этому потенциалу, а затем и некоторым. Но вместо того, чтобы заботиться о типе устройства, как это делают Media Types, Media Queries вместо этого рассматривает возможности устройства.

Простой медиазапрос может выглядеть так:

Двумя компонентами запроса являются тип носителя, установленный как экран, а затем фактический запрос (max-device-width: 480px) , который, по сути, спрашивает, равна ли ширина устройства 480px или меньше. В этом случае устройство загружает generic.css. В противном случае ссылка игнорируется, как и другие, до тех пор, пока не будет определено правильное разрешение и не будет загружена соответствующая таблица стилей.

Больше, чем просто разрешение

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

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

Гибкое мышление

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

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

Рассмотрим, например, разницу между присвоением ширины 100% и 100 пикселей двум одинаковым элементам. В одном вы можете быть уверены, что элемент заполнит весь экран, будь то экран настольного компьютера, ноутбука или iPhone. Но элемент шириной 100 пикселей будет большим на 480-пиксельном экране iPhone, но сравнительно крошечным на экране настольного компьютера с разрешением 1600×900.

Отзывчивый дизайн означает бизнес

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

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

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