С самого начала Всемирная паутина была задумана как агностическая. Неважно, какое у вас оборудование. Неважно, какую операционную систему использует ваше устройство. Пока вы можете подключиться к Интернету, Всемирная паутина доступна вам.
На заре Интернета большинство людей использовали настольные компьютеры. Сегодня Интернет доступен на настольных компьютерах, ноутбуках, планшетах, складных телефонах, холодильниках и автомобилях. Люди справедливо ожидают, что веб-сайты будут выглядеть хорошо независимо от того, какое устройство они используют. Адаптивный дизайн делает это возможным.
Адаптивный дизайн — не первый подход к разработке веб-сайтов. За годы до появления адаптивного дизайна веб-дизайнеры и разработчики пробовали множество разных техник.
Конструкция с фиксированной шириной
В начале 1990-х годов, когда Интернет только становился популярным, большинство мониторов имели размеры экрана 640 пикселей в ширину и 480 пикселей в высоту. Это были выпуклые электронно-лучевые трубки, не похожие на плоские жидкокристаллические дисплеи, которые мы имеем сейчас.
На заре становления веб-дизайна было безопасным вариантом создавать веб-страницы шириной 640 пикселей. Но в то время как другие технологии, такие как телефоны и камеры, миниатюризировались, экраны становились больше (и, в конечном итоге, более плоскими). Вскоре большинство экранов имели размеры 800 на 600 пикселей. Веб-дизайн изменился соответственно. Дизайнеры и разработчики начали считать, что 800 пикселей — это безопасное значение по умолчанию.
Затем экраны снова стали больше. По умолчанию стало 1024 на 768. Это было похоже на гонку вооружений между веб-дизайнерами и производителями оборудования.
Будь то 640, 800 или 1024 пикселя, выбор одной конкретной ширины для проектирования назывался дизайном с фиксированной шириной.
Если вы укажете фиксированную ширину для своего макета, то ваш макет будет хорошо выглядеть только при этой конкретной ширине. Если у посетителя вашего сайта экран шире, чем выбранная вами ширина, то на экране будет потрачено зря пространство. Вы можете центрировать содержимое своих страниц, чтобы распределить это пространство более равномерно (вместо того, чтобы иметь пустое пространство с одной стороны), но вы все равно не сможете в полной мере использовать доступное пространство.
Аналогично, если посетитель приходит с экраном уже, чем выбранная вами ширина, ваш контент не поместится по горизонтали. Браузер генерирует полосу сканирования — горизонтальный эквивалент полосы прокрутки — и пользователю приходится перемещать всю страницу влево и вправо, чтобы увидеть весь контент.
Жидкие макеты
Хотя большинство дизайнеров использовали макеты фиксированной ширины, некоторые предпочли сделать свои макеты гибкими. Вместо использования фиксированной ширины для макетов вы можете создать гибкий макет, используя проценты ширины столбцов. Эти конструкции работают в большем количестве ситуаций, чем макет фиксированной ширины, который выглядит правильно только в одном конкретном размере.
Их называли «жидкими макетами». Но хотя «жидкий» макет будет хорошо выглядеть в широком диапазоне ширины, в крайних случаях он начнет ухудшаться. На широком экране макет выглядит растянутым. На узком экране макет выглядит сплющенным. Оба сценария не идеальны.
Вы можете смягчить эти проблемы, используя min-width и max-width для вашего макета. Но тогда при любом размере ниже минимальной ширины или выше максимальной ширины у вас возникнут те же проблемы, что и при использовании макета с фиксированной шириной. На широком экране неиспользуемое пространство будет потрачено впустую. На узком экране пользователю придется перемещать всю страницу влево и вправо, чтобы увидеть все.
Слово «жидкость» — лишь один из терминов, используемых для описания такого типа макета. Подобные конструкции также назывались гибкими макетами или гибкими макетами. Терминология была такой же гибкой, как и техника.
Маленькие экраны
В 21 веке сеть продолжала становиться все больше и больше. То же самое сделали и мониторы. Но появились новые экраны, которые были меньше любого настольного устройства. С появлением мобильных телефонов с полнофункциональными веб-браузерами дизайнеры столкнулись с дилеммой. Как они могли гарантировать, что их проекты будут хорошо смотреться на настольном компьютере и мобильном телефоне? Им нужен был способ стилизации контента для экранов шириной от 240 до тысяч пикселей.
Отдельные сайты
Один из вариантов — создать отдельный поддомен для посетителей с мобильных устройств. Но тогда вам придется поддерживать две отдельные базы кода и проекты. А чтобы перенаправить посетителей на мобильные устройства, вам необходимо выполнить анализ пользовательского агента , который может быть ненадежным и его легко подделать. Chrome прекратит поддержку строки пользовательского агента по соображениям конфиденциальности. Кроме того, нет четкой границы между мобильным и немобильным. На какой сайт вы отправляете планшетные устройства?
Адаптивные макеты
Вместо отдельных сайтов на разных поддоменах вы можете создать один сайт с двумя или тремя макетами фиксированной ширины.
Когда медиа-запросы впервые появились в CSS, они открыли путь к повышению гибкости макетов. Но многим разработчикам по-прежнему было удобнее создавать макеты фиксированной ширины. Один из методов заключался в переключении между несколькими макетами фиксированной ширины и заданной шириной. Некоторые называют это адаптивным дизайном.
Адаптивный дизайн позволял дизайнерам создавать макеты, которые хорошо выглядели в нескольких разных размерах, но дизайн никогда не выглядел правильно, если просматривать их между этими размерами. Проблема лишнего пространства сохранялась, хотя и не была такой серьезной, как при макете с фиксированной шириной.
Используя медиа-запросы CSS, вы можете предоставить людям макет, наиболее близкий к ширине их браузера. Но, учитывая разнообразие размеров устройств, скорее всего, для большинства людей макет будет выглядеть далеко не идеальным.
Адаптивный веб-дизайн
Если адаптивные макеты представляют собой смесь медиа-запросов и макетов фиксированной ширины, то адаптивный веб-дизайн представляет собой смесь медиа-запросов и гибких макетов.
Этот термин был придуман Итаном Маркоттом в статье в журнале A List Apart в 2010 году.
Итан определил три критерия адаптивного дизайна:
- Жидкостные сетки
- Жидкие среды
- Медиа-запросы
Макет и изображения адаптивного сайта будут хорошо смотреться на любом устройстве. Но была одна проблема.
meta -элемент для viewport
Браузерам на мобильных телефонах приходилось иметь дело с веб-сайтами, которые были разработаны с макетами фиксированной ширины для более широких экранов. По умолчанию мобильные браузеры предполагали, что люди проектируют ширину в 980 пикселей (и они не ошиблись). Таким образом, даже если вы использовали гибкий макет, браузер применит ширину 980 пикселей, а затем масштабирует отображаемую веб-страницу до фактической ширины экрана.
Если вы используете адаптивный дизайн, вам нужно указать браузеру не выполнять такое масштабирование. Вы можете сделать это с помощью meta элемента в head веб-страницы:
<meta name="viewport" content="width=device-width, initial-scale=1">
Есть два значения, разделенные запятыми. Первый — width=device-width . Это говорит браузеру, что ширина веб-сайта равна ширине устройства (вместо того, чтобы ширина веб-сайта составляла 980 пикселей). Второе значение — initial-scale=1 . Это сообщает браузеру, насколько сильно или мало нужно масштабировать. Благодаря адаптивному дизайну браузер вообще не требует масштабирования.
При наличии этого meta элемента ваши веб-страницы готовы к реагированию.
Современный адаптивный дизайн
Сегодня у нас есть возможность создавать веб-сайты, адаптивность которых выходит далеко за рамки размеров области просмотра. Медиа-функции предоставляют разработчикам доступ к пользовательским предпочтениям и позволяют настраивать интерфейс. Контейнерные запросы позволяют компонентам владеть собственной реагирующей информацией. Элемент picture позволяет дизайнерам принимать решения по художественному оформлению на основе соотношения сторон экрана.
Проверьте свое понимание
Проверьте свои знания в области адаптивного веб-дизайна
В 2021 году можно ли безопасно создавать веб-страницы фиксированной ширины?
На каких размерах экрана обычно возникают проблемы с «жидкими» макетами?
Исходные три критерия адаптивного дизайна:
Адаптивный дизайн — это захватывающий, растущий мир возможностей. В оставшейся части курса вы узнаете об этих технологиях и о том, как их использовать для создания красивых, адаптивных веб-сайтов для каждого.