Одной из давних задач веб-дизайна является создание сайта, который хорошо отображается на разных платформах и в разных браузерах. С появлением мобильных устройств эта проблема усугубилась из-за еще большего разнообразия операционных систем и браузеров, а также более широкого диапазона разрешений и ширины просмотра. Адаптивный веб-дизайн развился как способ обработки этих вариантов.
Понимание адаптивного дизайна
По своей сути, концепция адаптивного веб-дизайна, представленная в статье Итана Маркотта 2010 года A List Apart , просто утверждает, что один веб-сайт должен работать на всех устройствах. Не должно быть необходимости в нескольких сайтах, таких как один, специально предназначенный для настольного монитора, и другой, предназначенный для определенного портативного устройства. Это означает, что макет правильно спроектированного сайта должен адаптироваться или реагировать на используемое устройство.
Адаптивный веб-дизайн решает две очень важные проблемы.
- Взаимодействие с пользователем. Как дизайнер вы можете не контролировать, какое устройство используется для просмотра вашего сайта, но вы должны сохранять контроль над предоставляемым дизайном. Благодаря адаптивному веб-дизайну вы выполняете это с помощью одного набора кода, в отличие от прошлого, когда создавалось несколько сайтов — один для настольных компьютеров, а другой для мобильных устройств.
- Обслуживание. Обслуживание сайта также значительно упрощается благодаря адаптивному дизайну, поскольку любые изменения, внесенные в сайт, обновляются внутри одного и того же набора кода.
Адаптивная сетка веб-дизайна
Одним из многих больших преимуществ Интернета является его сообщество с открытым исходным кодом, что снижает необходимость «изобретать велосипед» каждый раз, когда появляется новая технология. Существует значительное количество адаптивных веб-сеток, доступных для использования дизайнерами. Эти сетки дают вам основу, необходимую для создания адаптивного дизайна веб-сайта. Обычно лучше всего начать с сетки, а затем настроить ее в соответствии с вашими потребностями.
- Чтобы использовать сетку, выберите ту, которая наиболее точно соответствует вашей цели.
- Если выбранная сетка точно соответствует, просто скопируйте и вставьте HTML и CSS в документ и таблицу стилей соответственно.
- Если это не идеальное совпадение, настройте CSS, пока у вас не будет сетки, которая будет работать с вашим контентом.
Сетка создана для того, чтобы помимо экономии времени на создание кода сворачиваться организованно на небольших экранах. Он должен расширяться и растягиваться контролируемым образом на более крупных.
Кодирование для адаптивного дизайна
Гибкие макеты
Кодирование для адаптивного дизайна основано на идее гибких макетов, которые похожи на гибкие макеты , но идут на шаг дальше.
- В жидких макетах страницы расширялись в зависимости от разрешения, но это не означало, что они всегда хорошо работали при разных размерах.
- Гибкие макеты используют точные проценты для управления шириной контейнера контента и его поля, поэтому они измеряются пропорционально, а не только в произвольной ширине (как фиксированные макеты) или процентах.
Основная формула гибкого макета: цель/контент = результат. Так, например, если целевая область составляет 300 пикселей, а контейнер содержимого — 930 пикселей, процентное соотношение равно 300/930 или 32,25.
Медиа-запросы
Вторая часть кодирования связана с медиа-запросами — концепция, представленная в CSS3 . Применимыми частями медиа-запросов для адаптивного веб-дизайна являются атрибуты min-width и max-width .
С помощью этих атрибутов к экрану можно применить определенный стиль в зависимости от его размера. Например, вы можете создать стили для следующей минимальной ширины: 240 пикселей, 400 пикселей или 960 пикселей. Когда пользователь заходит на ваш сайт с настольного компьютера, будет использоваться макет для стиля 960 пикселей — если они просматривают ваш сайт на экране с разрешением 400 пикселей, то будут использоваться стили для минимальной ширины 400 пикселей.
Инструменты кодирования
Доступно несколько инструментов, помогающих в создании сайта. Некоторые из наиболее популярных программ включают Adobe Edge Reflow , TopStyle 5 или WebFlow . Эти программы выполняют требуемое скрытое кодирование, поэтому размер вашего сайта может регулироваться в зависимости от устройства, на котором он просматривается, что экономит время, необходимое для его кодирования.
Образец кодирования
Используя приведенную выше формулу и атрибут max-width , вот несколько фрагментов, которые помогут вам понять, как работает кодирование. В этом примере мы использовали контент шириной 960 пикселей с двумя столбцами внутри него. Левая колонка имеет ширину 620 пикселей, а правая — 300 пикселей. Между столбцами есть отступ в 10 пикселей.
HTML
<div class=»content-well»>
<left-column>…</left-column>
<right-column>…</right-column>
</div>
CSS
.content-well{
ширина: 960 пикселей;
}
левый столбец{
float: left;
маржа: 1,04%; /* 10px ÷ 960px = 0,0104166 */
ширина: 64,5833%; /* 620px ÷ 960px = .645833 */
}
right-column{
float: right;
маржа: 1,04%; /* 10px ÷ 960px = 0,0104166 */
ширина: 31,25%; /* 10 пикселей ÷ 960 пикселей = 0,0104166 */
}
Медиа-запрос
Медиа-запрос можно настроить несколькими способами, включая ориентацию (альбомная или портретная), и общий способ — создать стили, связанные с различной шириной. В данном случае это стиль для экрана с минимальной шириной 420 пикселей. Этот стиль удаляет атрибут float, заставляя содержимое стекаться, а не пытаться позиционировать себя горизонтально. Если бы экран имел минимальную ширину 600 пикселей, вместо этого использовался бы стиль, созданный для этой ширины.
@media all and (максимальная ширина: 420 пикселей) {
правый столбец, левый столбец {
float: none;
ширина: авто;
}
}
Объединить ресурсы
Отзывчивый веб-дизайн во многих отношениях представляет собой высвобождение ресурсов. Дизайнеры и разработчики больше не должны создавать несколько сайтов для разных платформ. Вместо этого они могут объединять ресурсы и сотрудничать, чтобы определить, для чего конечный пользователь будет использовать контент, и разработать сайт, который сможет предоставить эту информацию независимо от того, какое устройство выберет конечный пользователь.